{"id":9129,"date":"2024-04-29T01:56:15","date_gmt":"2024-04-28T22:56:15","guid":{"rendered":"https:\/\/webbingstone.com\/?post_type=portfolio&p=9129"},"modified":"2026-06-22T17:55:13","modified_gmt":"2026-06-22T14:55:13","slug":"%d8%ae%d8%af%d9%85%d8%a7%d8%aa-%d8%a7%d9%84%d8%b1%d8%b9%d8%a7%d9%8a%d8%a9-%d9%88%d8%a7%d9%84%d8%b5%d9%8a%d8%a7%d9%86%d8%a9-%d9%84%d9%84%d9%85%d9%88%d8%a7%d9%82%d8%b9","status":"publish","type":"portfolio","link":"https:\/\/webbingstone.com\/ar\/service\/%d8%ae%d8%af%d9%85%d8%a7%d8%aa-%d8%a7%d9%84%d8%b1%d8%b9%d8%a7%d9%8a%d8%a9-%d9%88%d8%a7%d9%84%d8%b5%d9%8a%d8%a7%d9%86%d8%a9-%d9%84%d9%84%d9%85%d9%88%d8%a7%d9%82%d8%b9\/","title":{"rendered":"\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0631\u0639\u0627\u064a\u0629 \u0648\u0627\u0644\u0635\u064a\u0627\u0646\u0629 \u0644\u0644\u0645\u0648\u0627\u0642\u0639"},"content":{"rendered":"\t\t
\n\t\t\t\t
\r\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n \r\n \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 - WebbingStone<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;500;600;700;800&display=swap');\r\n\r\n :root {\r\n --color-purple: #667eea;\r\n --color-purple-dark: #764ba2;\r\n --color-coral: #EE5946;\r\n --color-dark: #0f0c29;\r\n --color-dark-2: #302b63;\r\n --color-dark-3: #24243e;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;\r\n background: #000;\r\n color: #fff;\r\n overflow-x: hidden;\r\n direction: rtl;\r\n }\r\n\r\n \/* Hero Section *\/\r\n .hero {\r\n position: relative;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-2) 50%, var(--color-dark-3) 100%);\r\n overflow: hidden;\r\n padding: 100px 20px;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n left: 0;\r\n bottom: 0;\r\n background: \r\n radial-gradient(circle at 80% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),\r\n radial-gradient(circle at 20% 70%, rgba(238, 89, 70, 0.15) 0%, transparent 50%);\r\n animation: gradientShift 10s ease infinite;\r\n }\r\n\r\n @keyframes gradientShift {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.8; transform: scale(1.1); }\r\n }\r\n\r\n .floating-particles {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n pointer-events: none;\r\n }\r\n\r\n .particle {\r\n position: absolute;\r\n width: 4px;\r\n height: 4px;\r\n background: var(--color-coral);\r\n border-radius: 50%;\r\n opacity: 0.6;\r\n animation: float 15s infinite ease-in-out;\r\n }\r\n\r\n @keyframes float {\r\n 0% { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }\r\n 10% { opacity: 0.6; }\r\n 90% { opacity: 0.6; }\r\n 100% { transform: translateY(-100px) translateX(-100px) scale(1); opacity: 0; }\r\n }\r\n\r\n .particle:nth-child(1) { right: 10%; animation-delay: 0s; animation-duration: 12s; }\r\n .particle:nth-child(2) { right: 20%; animation-delay: 2s; animation-duration: 14s; }\r\n .particle:nth-child(3) { right: 30%; animation-delay: 4s; animation-duration: 16s; }\r\n .particle:nth-child(4) { right: 40%; animation-delay: 1s; animation-duration: 13s; }\r\n .particle:nth-child(5) { right: 50%; animation-delay: 3s; animation-duration: 15s; }\r\n .particle:nth-child(6) { right: 60%; animation-delay: 5s; animation-duration: 17s; }\r\n .particle:nth-child(7) { right: 70%; animation-delay: 2s; animation-duration: 14s; }\r\n .particle:nth-child(8) { right: 80%; animation-delay: 4s; animation-duration: 16s; }\r\n .particle:nth-child(9) { right: 90%; animation-delay: 1s; animation-duration: 13s; }\r\n .particle:nth-child(10) { right: 15%; animation-delay: 6s; animation-duration: 18s; }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 10;\r\n text-align: center;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .hero-badge {\r\n display: inline-block;\r\n padding: 10px 24px;\r\n background: rgba(102, 126, 234, 0.1);\r\n border: 1px solid rgba(102, 126, 234, 0.3);\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n color: var(--color-purple);\r\n margin-top: 50px;\r\n margin-bottom: 30px;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .hero h1 {\r\n font-size: 4.5rem;\r\n font-weight: 800;\r\n margin-bottom: 30px;\r\n background: linear-gradient(135deg, #fff 0%, var(--color-purple) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n line-height: 1.3;\r\n }\r\n\r\n .hero h1.glowing {\r\n animation: glow-pulse 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes glow-pulse {\r\n 0%, 100% {\r\n filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.8)) \r\n drop-shadow(0 0 40px rgba(102, 126, 234, 0.4));\r\n transform: scale(1);\r\n }\r\n 50% {\r\n filter: drop-shadow(0 0 35px rgba(102, 126, 234, 1)) \r\n drop-shadow(0 0 70px rgba(238, 89, 70, 0.5))\r\n drop-shadow(0 0 90px rgba(102, 126, 234, 0.3));\r\n transform: scale(1.01);\r\n }\r\n }\r\n\r\n .hero p {\r\n font-size: 1.4rem;\r\n color: rgba(255, 255, 255, 0.8);\r\n max-width: 700px;\r\n margin: 0 auto 40px;\r\n line-height: 1.9;\r\n }\r\n\r\n .cta-buttons {\r\n display: flex;\r\n gap: 20px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .btn {\r\n padding: 18px 40px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n border: none;\r\n border-radius: 12px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n display: inline-block;\r\n position: relative;\r\n overflow: hidden;\r\n min-width: 200px;\r\n max-width: 300px;\r\n text-align: center;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: 50%;\r\n width: 0;\r\n height: 0;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translate(50%, -50%);\r\n transition: width 0.6s, height 0.6s;\r\n }\r\n\r\n .btn:hover::before {\r\n width: 300px;\r\n height: 300px;\r\n }\r\n\r\n .btn span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, var(--color-coral) 0%, #ff7961 100%);\r\n color: white;\r\n box-shadow: 0 10px 30px rgba(238, 89, 70, 0.3);\r\n }\r\n\r\n .btn-secondary {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: white;\r\n border: 2px solid rgba(255, 255, 255, 0.2);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n \/* Stats Section *\/\r\n .hero-stats {\r\n display: flex;\r\n gap: 60px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n margin-top: 30px;\r\n }\r\n\r\n .stat-item {\r\n text-align: center;\r\n }\r\n\r\n .stat-number {\r\n font-size: 3rem;\r\n font-weight: 700;\r\n background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-coral) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n display: block;\r\n margin-bottom: 10px;\r\n line-height: 1.4;\r\n padding: 5px 0;\r\n }\r\n\r\n .stat-label {\r\n font-size: 1rem;\r\n color: rgba(255, 255, 255, 0.7);\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n font-weight: 500;\r\n }\r\n\r\n \/* Scroll indicator *\/\r\n .scroll-indicator {\r\n position: absolute;\r\n bottom: 40px;\r\n right: 50%;\r\n transform: translateX(50%);\r\n animation: bounce 2s infinite;\r\n }\r\n\r\n .scroll-indicator::before {\r\n content: '';\r\n display: block;\r\n width: 30px;\r\n height: 50px;\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n border-radius: 25px;\r\n position: relative;\r\n }\r\n\r\n .scroll-indicator::after {\r\n content: '';\r\n position: absolute;\r\n top: 10px;\r\n right: 50%;\r\n transform: translateX(50%);\r\n width: 6px;\r\n height: 10px;\r\n background: var(--color-coral);\r\n border-radius: 3px;\r\n animation: scroll 2s infinite;\r\n }\r\n\r\n @keyframes bounce {\r\n 0%, 20%, 50%, 80%, 100% { transform: translateX(50%) translateY(0); }\r\n 40% { transform: translateX(50%) translateY(-10px); }\r\n 60% { transform: translateX(50%) translateY(-5px); }\r\n }\r\n\r\n @keyframes scroll {\r\n 0% { opacity: 1; transform: translateX(50%) translateY(0); }\r\n 100% { opacity: 0; transform: translateX(50%) translateY(20px); }\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .hero {\r\n padding: 80px 20px;\r\n }\r\n\r\n .hero h1 {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .hero p {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .btn {\r\n padding: 15px 30px;\r\n font-size: 1rem;\r\n }\r\n\r\n .cta-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .hero-stats {\r\n gap: 40px;\r\n margin-top: 25px;\r\n }\r\n\r\n .stat-number {\r\n font-size: 2rem;\r\n line-height: 1.4;\r\n padding: 5px 0;\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero h1 {\r\n font-size: 2rem;\r\n }\r\n\r\n .hero p {\r\n font-size: 1rem;\r\n }\r\n\r\n .hero-badge {\r\n font-size: 0.8rem;\r\n padding: 8px 20px;\r\n }\r\n\r\n .btn {\r\n min-width: 180px;\r\n max-width: 280px;\r\n }\r\n\r\n .hero-stats {\r\n margin-top: 20px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- \u0642\u0633\u0645 \u0627\u0644\u0628\u0637\u0644 -->\r\n <section class=\"hero\">\r\n <div class=\"floating-particles\">\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <div class=\"particle\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"hero-badge\">\ud83d\udee1\ufe0f \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0628\u0627\u0644\u0645\u0648\u0627\u0642\u0639<\/div>\r\n \r\n <h1>\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0623\u062f\u0627\u0621 \u0645\u0648\u0642\u0639\u0643 \u0641\u064a \u0623\u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u064a\u0627\u062a\u0647<\/h1>\r\n \r\n <p>\u062e\u062f\u0645\u0627\u062a \u0635\u064a\u0627\u0646\u0629 \u0645\u0648\u0627\u0642\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0634\u0627\u0645\u0644\u0629 \u062a\u0636\u0645\u0646 \u0628\u0642\u0627\u0621 \u0645\u0648\u0642\u0639\u0643 \u0622\u0645\u0646\u0627\u064b \u0648\u0633\u0631\u064a\u0639\u0627\u064b \u0648\u0645\u062d\u062f\u062b\u0627\u064b. \u0645\u0646 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0623\u0645\u0646\u064a\u0629 \u0625\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621\u060c \u0646\u062d\u0646 \u0646\u063a\u0637\u064a \u0643\u0644 \u0634\u064a\u0621.<\/p>\r\n \r\n <div class=\"cta-buttons\">\r\n <a href=\"https:\/\/webbingstone.com\/ar\/contact\/\" class=\"btn btn-primary\">\r\n <span>\u0627\u0628\u062f\u0623 \u0627\u0644\u064a\u0648\u0645<\/span>\r\n <\/a>\r\n <a href=\"#pricing\" class=\"btn btn-secondary\">\r\n <span>\u0639\u0631\u0636 \u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hero-stats\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">99.9%<\/span>\r\n <span class=\"stat-label\">\u0636\u0645\u0627\u0646 \u0627\u0644\u062a\u0634\u063a\u064a\u0644<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">24\/7<\/span>\r\n <span class=\"stat-label\">\u0645\u0631\u0627\u0642\u0628\u0629 \u0645\u0633\u062a\u0645\u0631\u0629<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">200+<\/span>\r\n <span class=\"stat-label\">\u0645\u0648\u0642\u0639 \u062a\u062d\u062a \u0627\u0644\u0635\u064a\u0627\u0646\u0629<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scroll-indicator\"><\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Wait for DOM to be ready\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Check if GSAP is loaded\r\n if (typeof gsap === 'undefined') {\r\n console.log('GSAP not loaded');\r\n return;\r\n }\r\n\r\n \/\/ Register GSAP plugins\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n \/\/ Hero entrance animations\r\n const tl = gsap.timeline({ defaults: { ease: 'power3.out' } });\r\n\r\n \/\/ Badge animation with bounce\r\n tl.fromTo('.hero-badge', \r\n {\r\n opacity: 0,\r\n y: -50,\r\n scale: 0.8\r\n },\r\n {\r\n opacity: 1,\r\n y: 0,\r\n scale: 1,\r\n duration: 0.8,\r\n ease: 'back.out(1.7)',\r\n clearProps: 'all'\r\n }\r\n );\r\n\r\n \/\/ Title animation\r\n tl.fromTo('.hero h1', \r\n {\r\n opacity: 0,\r\n y: 50\r\n },\r\n {\r\n opacity: 1,\r\n y: 0,\r\n duration: 1,\r\n ease: 'power4.out',\r\n clearProps: 'all'\r\n }, \r\n '-=0.4'\r\n );\r\n\r\n \/\/ Description slide up\r\n tl.fromTo('.hero p', \r\n {\r\n opacity: 0,\r\n y: 30\r\n },\r\n {\r\n opacity: 1,\r\n y: 0,\r\n duration: 0.8,\r\n clearProps: 'all'\r\n }, \r\n '-=0.6'\r\n );\r\n\r\n \/\/ Buttons pop in with stagger\r\n tl.fromTo('.cta-buttons .btn', \r\n {\r\n opacity: 0,\r\n scale: 0.8,\r\n y: 20\r\n },\r\n {\r\n opacity: 1,\r\n scale: 1,\r\n y: 0,\r\n duration: 0.6,\r\n stagger: 0.15,\r\n ease: 'back.out(1.7)',\r\n clearProps: 'all'\r\n }, \r\n '-=0.4'\r\n );\r\n\r\n \/\/ Stats animation\r\n tl.fromTo('.stat-item', \r\n {\r\n opacity: 0,\r\n y: 30\r\n },\r\n {\r\n opacity: 1,\r\n y: 0,\r\n duration: 0.6,\r\n stagger: 0.2,\r\n clearProps: 'all'\r\n }, \r\n '-=0.3'\r\n );\r\n\r\n \/\/ Add glowing effect to title after 2 seconds\r\n setTimeout(() => {\r\n const title = document.querySelector('.hero h1');\r\n if (title) {\r\n title.classList.add('glowing');\r\n \r\n gsap.fromTo(title, \r\n {\r\n filter: 'drop-shadow(0 0 0px transparent)'\r\n },\r\n {\r\n filter: 'drop-shadow(0 0 20px rgba(102, 126, 234, 0.8)) drop-shadow(0 0 40px rgba(102, 126, 234, 0.4))',\r\n duration: 1.5,\r\n ease: 'power2.inOut'\r\n }\r\n );\r\n }\r\n }, 2000);\r\n\r\n \/\/ Animate stat numbers with counter\r\n setTimeout(() => {\r\n gsap.utils.toArray('.stat-number').forEach((stat) => {\r\n const text = stat.textContent;\r\n const hasPercent = text.includes('%');\r\n const hasPlus = text.includes('+');\r\n \r\n if (text === '24\/7') {\r\n return;\r\n }\r\n \r\n const num = parseFloat(text.replace(\/[^0-9.]\/g, ''));\r\n \r\n if (!isNaN(num)) {\r\n const obj = { val: 0 };\r\n gsap.to(obj, {\r\n val: num,\r\n duration: 2,\r\n ease: 'power2.out',\r\n onUpdate: function() {\r\n let displayValue = hasPercent ? obj.val.toFixed(1) : Math.floor(obj.val);\r\n if (hasPercent) {\r\n stat.textContent = displayValue + '%';\r\n } else if (hasPlus) {\r\n stat.textContent = displayValue + '+';\r\n } else {\r\n stat.textContent = displayValue.toLocaleString();\r\n }\r\n }\r\n });\r\n }\r\n });\r\n }, 1500);\r\n\r\n \/\/ Particle hover effect\r\n const particles = document.querySelectorAll('.particle');\r\n const hero = document.querySelector('.hero');\r\n \r\n hero.addEventListener('mousemove', (e) => {\r\n const xPercent = e.clientX \/ window.innerWidth;\r\n const yPercent = e.clientY \/ window.innerHeight;\r\n \r\n particles.forEach((particle, index) => {\r\n const speed = (index + 1) * 0.5;\r\n gsap.to(particle, {\r\n x: -(xPercent - 0.5) * speed * 50,\r\n y: (yPercent - 0.5) * speed * 50,\r\n duration: 0.5,\r\n ease: 'power2.out'\r\n });\r\n });\r\n });\r\n\r\n \/\/ Button hover effects\r\n const buttons = document.querySelectorAll('.btn');\r\n buttons.forEach(btn => {\r\n btn.addEventListener('mouseenter', () => {\r\n gsap.to(btn, {\r\n scale: 1.05,\r\n duration: 0.3,\r\n ease: 'power2.out'\r\n });\r\n });\r\n \r\n btn.addEventListener('mouseleave', () => {\r\n gsap.to(btn, {\r\n scale: 1,\r\n duration: 0.3,\r\n ease: 'power2.out'\r\n });\r\n });\r\n });\r\n\r\n \/\/ Scroll indicator pulse\r\n gsap.to('.scroll-indicator', {\r\n y: 10,\r\n duration: 1.5,\r\n repeat: -1,\r\n yoyo: true,\r\n ease: 'power1.inOut'\r\n });\r\n\r\n \/\/ Parallax effect on scroll\r\n gsap.to('.hero-content', {\r\n scrollTrigger: {\r\n trigger: '.hero',\r\n start: 'top top',\r\n end: 'bottom top',\r\n scrub: 1\r\n },\r\n y: 100,\r\n opacity: 0.5,\r\n ease: 'none'\r\n });\r\n\r\n \/\/ Particles parallax on scroll\r\n gsap.to('.floating-particles', {\r\n scrollTrigger: {\r\n trigger: '.hero',\r\n start: 'top top',\r\n end: 'bottom top',\r\n scrub: 1\r\n },\r\n y: -150,\r\n ease: 'none'\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b30e93 e-con-full e-flex e-con e-parent\" data-id=\"3b30e93\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-e5303cf elementor-widget elementor-widget-html\" data-id=\"e5303cf\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <meta name=\"description\" content=\"\u062e\u0637\u0637 \u0623\u0633\u0639\u0627\u0631 \u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0627\u0644\u0645\u0631\u0646\u0629. \u062c\u0645\u064a\u0639 \u0627\u0644\u062e\u0637\u0637 \u062a\u0634\u0645\u0644 \u0645\u0631\u0627\u0642\u0628\u0629 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 \u0648\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0623\u0645\u0646\u064a\u0629. \u0627\u062e\u062a\u0631 \u0627\u0644\u062e\u0637\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643.\">\r\n <meta name=\"keywords\" content=\"\u0623\u0633\u0639\u0627\u0631 \u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0645\u0648\u0627\u0642\u0639, \u062e\u0637\u0637 \u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0645\u0648\u0627\u0642\u0639, \u062a\u0643\u0644\u0641\u0629 \u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0645\u0648\u0642\u0639, \u0623\u0633\u0639\u0627\u0631 \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0645\u0648\u0627\u0642\u0639, \u062e\u062f\u0645\u0627\u062a \u0635\u064a\u0627\u0646\u0629 \u0634\u0647\u0631\u064a\u0629\">\r\n <title>\u0623\u0633\u0639\u0627\u0631 \u0648\u062e\u0637\u0637 \u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 | WebbingStone<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;500;600;700&display=swap');\r\n\r\n :root {\r\n --color-purple: #667eea;\r\n --color-purple-dark: #764ba2;\r\n --color-coral: #EE5946;\r\n --color-dark: #0f0c29;\r\n --color-dark-2: #302b63;\r\n --color-dark-3: #24243e;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Arial, sans-serif;\r\n background: #000;\r\n color: #fff;\r\n overflow-x: hidden;\r\n direction: rtl;\r\n }\r\n\r\n \/* Pricing Section *\/\r\n .pricing-section {\r\n padding: 120px 20px;\r\n background: linear-gradient(135deg, #24243e 0%, #0f0c29 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .pricing-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n left: 0;\r\n bottom: 0;\r\n background: \r\n radial-gradient(circle at 80% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 20% 70%, rgba(238, 89, 70, 0.1) 0%, transparent 50%);\r\n animation: pulseGlow 8s ease infinite;\r\n }\r\n\r\n @keyframes pulseGlow {\r\n 0%, 100% { opacity: 0.5; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-block;\r\n padding: 8px 20px;\r\n background: rgba(102, 126, 234, 0.1);\r\n border: 1px solid rgba(102, 126, 234, 0.3);\r\n border-radius: 50px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n color: var(--color-purple);\r\n margin-bottom: 20px;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 3rem;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, #fff 0%, var(--color-purple) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-header p {\r\n font-size: 1.2rem;\r\n color: rgba(255, 255, 255, 0.7);\r\n max-width: 600px;\r\n margin: 0 auto;\r\n line-height: 1.9;\r\n }\r\n\r\n .pricing-cards {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 30px;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n .pricing-card {\r\n position: relative;\r\n padding: 50px 40px;\r\n background: rgba(255, 255, 255, 0.03);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n backdrop-filter: blur(10px);\r\n text-align: center;\r\n transition: all 0.4s ease;\r\n min-height: 600px;\r\n }\r\n\r\n .pricing-card.enterprise {\r\n background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(238, 89, 70, 0.05) 100%);\r\n border: 2px solid rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .pricing-card.enterprise::before {\r\n content: '\ud83c\udf1f';\r\n position: absolute;\r\n top: -15px;\r\n right: 50%;\r\n transform: translateX(50%);\r\n font-size: 2rem;\r\n animation: starPulse 2s ease infinite;\r\n }\r\n\r\n @keyframes starPulse {\r\n 0%, 100% { transform: translateX(50%) scale(1); }\r\n 50% { transform: translateX(50%) scale(1.2); }\r\n }\r\n\r\n .pricing-card.featured {\r\n border: 2px solid var(--color-purple);\r\n transform: scale(1.05);\r\n background: rgba(102, 126, 234, 0.05);\r\n }\r\n\r\n .pricing-card.featured::after {\r\n content: '\u0627\u0644\u0623\u0643\u062b\u0631 \u0634\u0639\u0628\u064a\u0629';\r\n position: absolute;\r\n top: -15px;\r\n right: 50%;\r\n transform: translateX(50%);\r\n padding: 8px 20px;\r\n background: var(--color-coral);\r\n border-radius: 20px;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n letter-spacing: 0.5px;\r\n box-shadow: 0 5px 15px rgba(238, 89, 70, 0.4);\r\n animation: popIn 0.6s ease 1.2s both;\r\n }\r\n\r\n @keyframes popIn {\r\n 0% { transform: translateX(50%) scale(0); opacity: 0; }\r\n 50% { transform: translateX(50%) scale(1.1); }\r\n 100% { transform: translateX(50%) scale(1); opacity: 1; }\r\n }\r\n\r\n .pricing-card:hover {\r\n border-color: rgba(102, 126, 234, 0.3);\r\n box-shadow: 0 20px 60px rgba(102, 126, 234, 0.2);\r\n }\r\n\r\n .pricing-card.featured:hover {\r\n box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);\r\n }\r\n\r\n .pricing-card h3 {\r\n font-size: 1.8rem;\r\n margin-bottom: 10px;\r\n font-weight: 600;\r\n color: #fff;\r\n }\r\n\r\n .tasks-badge {\r\n display: inline-block;\r\n padding: 6px 16px;\r\n background: rgba(102, 126, 234, 0.15);\r\n border-radius: 20px;\r\n font-size: 0.85rem;\r\n color: var(--color-purple);\r\n margin-bottom: 20px;\r\n font-weight: 600;\r\n }\r\n\r\n .pricing-card .price {\r\n font-size: 3.5rem;\r\n font-weight: 700;\r\n margin: 20px 0;\r\n background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-coral) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n line-height: 1.2;\r\n display: inline-block;\r\n padding: 10px 0;\r\n }\r\n\r\n .pricing-card .price span {\r\n font-size: 1.2rem;\r\n color: rgba(255, 255, 255, 0.6);\r\n font-weight: 400;\r\n }\r\n\r\n .pricing-features {\r\n list-style: none;\r\n margin: 30px 0;\r\n text-align: right;\r\n }\r\n\r\n .pricing-features li {\r\n padding: 12px 0;\r\n color: rgba(255, 255, 255, 0.7);\r\n display: flex;\r\n align-items: center;\r\n font-size: 0.95rem;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .pricing-card:hover .pricing-features li {\r\n color: rgba(255, 255, 255, 0.9);\r\n }\r\n\r\n .pricing-features li::before {\r\n content: '\u2713';\r\n color: var(--color-coral);\r\n font-weight: bold;\r\n margin-left: 12px;\r\n font-size: 1.2rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n .btn {\r\n width: 100%;\r\n padding: 18px 40px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n border: none;\r\n border-radius: 12px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n display: inline-block;\r\n transition: all 0.3s ease;\r\n margin-top: 20px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: 50%;\r\n width: 0;\r\n height: 0;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translate(50%, -50%);\r\n transition: width 0.6s, height 0.6s;\r\n }\r\n\r\n .btn:hover::before {\r\n width: 300px;\r\n height: 300px;\r\n }\r\n\r\n .btn span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, var(--color-coral) 0%, #ff7961 100%);\r\n color: white;\r\n box-shadow: 0 10px 30px rgba(238, 89, 70, 0.3);\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 40px rgba(238, 89, 70, 0.4);\r\n }\r\n\r\n .btn-secondary {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: white;\r\n border: 2px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.3);\r\n transform: translateY(-3px);\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1200px) {\r\n .pricing-cards {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n\r\n .pricing-card:nth-child(3) {\r\n grid-column: 1 \/ -1;\r\n max-width: 500px;\r\n margin: 0 auto;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .pricing-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 60px;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2rem;\r\n }\r\n\r\n .section-header p {\r\n font-size: 1rem;\r\n }\r\n\r\n .pricing-cards {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n .pricing-card:nth-child(3) {\r\n grid-column: 1;\r\n max-width: none;\r\n }\r\n\r\n .pricing-card {\r\n padding: 40px 30px;\r\n }\r\n\r\n .pricing-card .price {\r\n font-size: 3rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .section-header h2 {\r\n font-size: 1.75rem;\r\n }\r\n\r\n .pricing-card {\r\n padding: 35px 25px;\r\n }\r\n\r\n .pricing-card h3 {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .pricing-card .price {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .pricing-features li {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- \u0642\u0633\u0645 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 -->\r\n <section class=\"pricing-section\" id=\"pricing\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\u062e\u0637\u0637 \u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/div>\r\n <h2>\u0627\u062e\u062a\u0631 \u062e\u0637\u0629 \u0627\u0644\u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629<\/h2>\r\n <p>\u062e\u0637\u0637 \u0634\u0647\u0631\u064a\u0629 \u0645\u0631\u0646\u0629 \u062a\u0646\u0627\u0633\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643. \u062c\u0645\u064a\u0639 \u0627\u0644\u062e\u0637\u0637 \u062a\u0634\u0645\u0644 \u0645\u0631\u0627\u0642\u0628\u0629 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 \u0648\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0623\u0645\u0646\u064a\u0629.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pricing-cards\">\r\n <!-- Basic Care -->\r\n <div class=\"pricing-card\">\r\n <h3>\u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/h3>\r\n <div class=\"tasks-badge\">\u062d\u062a\u0649 10 \u0645\u0647\u0627\u0645\/\u0634\u0647\u0631\u064a\u0627\u064b<\/div>\r\n <div class=\"price\">5,000 <span>\u062c\u0646\u064a\u0647\/\u0634\u0647\u0631\u064a\u0627\u064b<\/span><\/div>\r\n <ul class=\"pricing-features\">\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0623\u0645\u0646\u064a\u0629 \u0623\u0633\u0628\u0648\u0639\u064a\u0629<\/li>\r\n <li>\u0645\u0631\u0627\u0642\u0628\u0629 \u0627\u0644\u0623\u062f\u0627\u0621<\/li>\r\n <li>\u0646\u0633\u062e \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 \u0634\u0647\u0631\u064a\u0629<\/li>\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0625\u0636\u0627\u0641\u0627\u062a \u0648\u0627\u0644\u0642\u0648\u0627\u0644\u0628<\/li>\r\n <li>\u0641\u062d\u0635 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a \u0627\u0644\u062e\u0628\u064a\u062b\u0629<\/li>\r\n <li>\u0645\u0631\u0627\u0642\u0628\u0629 \u0627\u0644\u062a\u0648\u0641\u0631 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629<\/li>\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0645\u062d\u062a\u0648\u0649 \u0623\u0633\u0627\u0633\u064a\u0629<\/li>\r\n <li>\u062f\u0639\u0645 \u0639\u0628\u0631 \u0627\u0644\u0628\u0631\u064a\u062f (\u0631\u062f \u062e\u0644\u0627\u0644 48 \u0633\u0627\u0639\u0629)<\/li>\r\n <\/ul>\r\n <a href=\"https:\/\/webbingstone.com\/ar\/contact\/\" class=\"btn btn-secondary\">\r\n <span>\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Professional Care -->\r\n <div class=\"pricing-card featured\">\r\n <h3>\u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/h3>\r\n <div class=\"tasks-badge\">\u062d\u062a\u0649 25 \u0645\u0647\u0645\u0629\/\u0634\u0647\u0631\u064a\u0627\u064b<\/div>\r\n <div class=\"price\">10,000 <span>\u062c\u0646\u064a\u0647\/\u0634\u0647\u0631\u064a\u0627\u064b<\/span><\/div>\r\n <ul class=\"pricing-features\">\r\n <li>\u062c\u0645\u064a\u0639 \u0645\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629<\/li>\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0623\u0645\u0646\u064a\u0629 \u064a\u0648\u0645\u064a\u0629<\/li>\r\n <li>\u0646\u0633\u062e \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 \u0623\u0633\u0628\u0648\u0639\u064a\u0629<\/li>\r\n <li>\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621<\/li>\r\n <li>\u0645\u0631\u0627\u0642\u0628\u0629 \u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b<\/li>\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0645\u062d\u062a\u0648\u0649 \u0645\u062a\u0642\u062f\u0645\u0629<\/li>\r\n <li>\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0635\u0648\u0631<\/li>\r\n <li>\u062a\u062d\u0633\u064a\u0646 \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/li>\r\n <li>\u062f\u0639\u0645 \u0628\u0631\u064a\u062f\u064a \u0630\u0648 \u0623\u0648\u0644\u0648\u064a\u0629 (\u0631\u062f \u062e\u0644\u0627\u0644 24 \u0633\u0627\u0639\u0629)<\/li>\r\n <li>\u062a\u0642\u0631\u064a\u0631 \u0623\u062f\u0627\u0621 \u0634\u0647\u0631\u064a<\/li>\r\n <\/ul>\r\n <a href=\"https:\/\/webbingstone.com\/ar\/contact\/\" class=\"btn btn-primary\">\r\n <span>\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Enterprise Care -->\r\n <div class=\"pricing-card enterprise\">\r\n <h3>\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u0634\u0631\u0643\u0627\u062a<\/h3>\r\n <div class=\"tasks-badge\">\u0645\u0647\u0627\u0645 \u063a\u064a\u0631 \u0645\u062d\u062f\u0648\u062f\u0629<\/div>\r\n <div class=\"price\">\u0645\u062e\u0635\u0635 <span>\u062d\u0633\u0628 \u0627\u0644\u0637\u0644\u0628<\/span><\/div>\r\n <ul class=\"pricing-features\">\r\n <li>\u062c\u0645\u064a\u0639 \u0645\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629<\/li>\r\n <li>\u0635\u064a\u0627\u0646\u0629 \u0628\u0639\u0644\u0627\u0645\u0629 \u062a\u062c\u0627\u0631\u064a\u0629 \u062e\u0627\u0635\u0629<\/li>\r\n <li>\u0625\u062f\u0627\u0631\u0629 \u0645\u0648\u0627\u0642\u0639 \u0645\u062a\u0639\u062f\u062f\u0629<\/li>\r\n <li>\u0627\u062a\u0641\u0627\u0642\u064a\u0629 \u0645\u0633\u062a\u0648\u0649 \u062e\u062f\u0645\u0629 \u0645\u062e\u0635\u0635\u0629<\/li>\r\n <li>\u0641\u0631\u064a\u0642 \u062a\u0637\u0648\u064a\u0631 \u0645\u062e\u0635\u0635<\/li>\r\n <li>\u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0637\u0648\u0627\u0631\u0626 \u0630\u0627\u062a \u0623\u0648\u0644\u0648\u064a\u0629<\/li>\r\n <li>\u062a\u062d\u0644\u064a\u0644\u0627\u062a \u0648\u062a\u0642\u0627\u0631\u064a\u0631 \u0645\u062a\u0642\u062f\u0645\u0629<\/li>\r\n <li>\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0627\u0645\u062a\u062b\u0627\u0644<\/li>\r\n <li>\u062f\u0639\u0645 \u0647\u0627\u062a\u0641\u064a \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 (\u0631\u062f \u062e\u0644\u0627\u0644 \u0633\u0627\u0639\u0629)<\/li>\r\n <li>\u062c\u0644\u0633\u0627\u062a \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0631\u0628\u0639 \u0633\u0646\u0648\u064a\u0629<\/li>\r\n <\/ul>\r\n <a href=\"https:\/\/webbingstone.com\/ar\/contact\/\" class=\"btn btn-secondary\">\r\n <span>\u062a\u0648\u0627\u0635\u0644 \u0645\u0639 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Wait for DOM to be fully loaded\r\n document.addEventListener('DOMContentLoaded', function() {\r\n \/\/ Check if GSAP is loaded\r\n if (typeof gsap === 'undefined') {\r\n console.log('GSAP not loaded, skipping animations');\r\n return;\r\n }\r\n\r\n \/\/ Register GSAP ScrollTrigger\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n \/\/ Animate section header\r\n gsap.fromTo('.section-badge',\r\n {\r\n opacity: 0,\r\n y: -50\r\n },\r\n {\r\n scrollTrigger: {\r\n trigger: '.pricing-section',\r\n start: 'top 80%',\r\n },\r\n opacity: 1,\r\n y: 0,\r\n duration: 0.8,\r\n ease: 'power3.out',\r\n clearProps: 'all'\r\n }\r\n );\r\n\r\n gsap.fromTo('.section-header h2',\r\n {\r\n opacity: 0,\r\n y: 30\r\n },\r\n {\r\n scrollTrigger: {\r\n trigger: '.pricing-section',\r\n start: 'top 80%',\r\n },\r\n opacity: 1,\r\n y: 0,\r\n duration: 0.8,\r\n delay: 0.2,\r\n ease: 'power3.out',\r\n clearProps: 'all'\r\n }\r\n );\r\n\r\n gsap.fromTo('.section-header p',\r\n {\r\n opacity: 0,\r\n y: 30\r\n },\r\n {\r\n scrollTrigger: {\r\n trigger: '.pricing-section',\r\n start: 'top 80%',\r\n },\r\n opacity: 1,\r\n y: 0,\r\n duration: 0.8,\r\n delay: 0.4,\r\n ease: 'power3.out',\r\n clearProps: 'all'\r\n }\r\n );\r\n\r\n \/\/ Animate pricing cards\r\n const pricingCards = document.querySelectorAll('.pricing-card');\r\n if (pricingCards.length > 0) {\r\n gsap.fromTo(pricingCards,\r\n {\r\n opacity: 0,\r\n y: 50\r\n },\r\n {\r\n scrollTrigger: {\r\n trigger: '.pricing-cards',\r\n start: 'top 75%',\r\n },\r\n opacity: 1,\r\n y: 0,\r\n duration: 0.6,\r\n stagger: 0.15,\r\n ease: 'power2.out',\r\n clearProps: 'all'\r\n }\r\n );\r\n }\r\n\r\n \/\/ Hover animations\r\n pricingCards.forEach(card => {\r\n card.addEventListener('mouseenter', () => {\r\n gsap.to(card, {\r\n scale: 1.05,\r\n duration: 0.3,\r\n ease: 'power2.out'\r\n });\r\n });\r\n \r\n card.addEventListener('mouseleave', () => {\r\n gsap.to(card, {\r\n scale: 1,\r\n duration: 0.3,\r\n ease: 'power2.out'\r\n });\r\n });\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-afe614e e-con-full e-flex e-con e-parent\" data-id=\"afe614e\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-5e93b62 elementor-widget elementor-widget-html\" data-id=\"5e93b62\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div>\r\n\r\n\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0645\u0648\u0642\u0639 - WebbingStone<\/title>\r\n <style>\r\n :root {\r\n --color-purple: #667eea;\r\n --color-purple-dark: #764ba2;\r\n --color-coral: #EE5946;\r\n --color-dark: #0f0c29;\r\n --color-dark-2: #302b63;\r\n --color-dark-3: #24243e;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\r\n background: #000;\r\n color: #fff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Services Section *\/\r\n .services-section {\r\n position: relative;\r\n padding: 120px 20px;\r\n background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-2) 50%, var(--color-dark-3) 100%);\r\n overflow: hidden;\r\n }\r\n\r\n .services-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: \r\n radial-gradient(circle at 80% 30%, rgba(238, 89, 70, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 20% 70%, rgba(102, 126, 234, 0.1) 0%, transparent 50%);\r\n animation: gradientMove 10s ease infinite;\r\n }\r\n\r\n @keyframes gradientMove {\r\n 0%, 100% { opacity: 0.5; transform: scale(1); }\r\n 50% { opacity: 1; transform: scale(1.05); }\r\n }\r\n\r\n .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .section-badge {\r\n display: inline-block;\r\n padding: 8px 20px;\r\n background: rgba(102, 126, 234, 0.1);\r\n border: 1px solid rgba(102, 126, 234, 0.3);\r\n border-radius: 50px;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n color: var(--color-purple);\r\n margin-bottom: 20px;\r\n backdrop-filter: blur(10px);\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .js-enabled .section-badge {\r\n opacity: 0;\r\n transform: translateY(-20px);\r\n }\r\n\r\n .section-badge.animate-in {\r\n animation: fadeInDown 0.8s ease both;\r\n }\r\n\r\n @keyframes fadeInDown {\r\n from { opacity: 0; transform: translateY(-20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 3rem;\r\n font-weight: 700;\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, #fff 0%, var(--color-purple) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .js-enabled .section-header h2 {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n\r\n .section-header h2.animate-in {\r\n animation: fadeInUp 0.8s ease 0.2s both;\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .section-header p {\r\n font-size: 1.2rem;\r\n color: rgba(255, 255, 255, 0.7);\r\n max-width: 700px;\r\n margin: 0 auto;\r\n line-height: 1.8;\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .js-enabled .section-header p {\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n\r\n .section-header p.animate-in {\r\n animation: fadeInUp 0.8s ease 0.4s both;\r\n }\r\n\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n gap: 30px;\r\n }\r\n\r\n .service-card {\r\n position: relative;\r\n padding: 40px;\r\n background: rgba(255, 255, 255, 0.03);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n backdrop-filter: blur(10px);\r\n transition: all 0.4s ease;\r\n overflow: hidden;\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .js-enabled .service-card {\r\n opacity: 0;\r\n transform: translateY(50px);\r\n }\r\n\r\n .service-card.animate-in {\r\n animation: fadeInUp 0.8s ease both;\r\n }\r\n\r\n .service-card.animate-in:nth-child(1) { animation-delay: 0.1s; }\r\n .service-card.animate-in:nth-child(2) { animation-delay: 0.2s; }\r\n .service-card.animate-in:nth-child(3) { animation-delay: 0.3s; }\r\n .service-card.animate-in:nth-child(4) { animation-delay: 0.4s; }\r\n .service-card.animate-in:nth-child(5) { animation-delay: 0.5s; }\r\n .service-card.animate-in:nth-child(6) { animation-delay: 0.6s; }\r\n\r\n .service-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-coral) 100%);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .service-card:hover {\r\n transform: translateY(-10px);\r\n border-color: rgba(102, 126, 234, 0.3);\r\n box-shadow: 0 20px 60px rgba(102, 126, 234, 0.2);\r\n }\r\n\r\n .service-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .service-icon {\r\n width: 70px;\r\n height: 70px;\r\n background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-coral) 100%);\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2rem;\r\n margin-bottom: 25px;\r\n animation: floatIcon 3s ease-in-out infinite;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .service-card:hover .service-icon {\r\n transform: scale(1.1) rotate(5deg);\r\n }\r\n\r\n @keyframes floatIcon {\r\n 0%, 100% { transform: translateY(0); }\r\n 50% { transform: translateY(-10px); }\r\n }\r\n\r\n .service-card h3 {\r\n font-size: 1.5rem;\r\n margin-bottom: 15px;\r\n color: #fff;\r\n font-weight: 600;\r\n }\r\n\r\n .service-card p {\r\n color: rgba(255, 255, 255, 0.7);\r\n line-height: 1.8;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .service-list {\r\n list-style: none;\r\n }\r\n\r\n .service-list li {\r\n padding: 8px 0;\r\n color: rgba(255, 255, 255, 0.6);\r\n font-size: 0.95rem;\r\n display: flex;\r\n align-items: center;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .service-card:hover .service-list li {\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .service-list li::before {\r\n content: '\u2192';\r\n color: var(--color-coral);\r\n font-weight: bold;\r\n margin-right: 10px;\r\n font-size: 1rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .services-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .section-header {\r\n margin-bottom: 60px;\r\n }\r\n\r\n .section-header h2 {\r\n font-size: 2rem;\r\n }\r\n\r\n .section-header p {\r\n font-size: 1rem;\r\n }\r\n\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .service-card {\r\n padding: 30px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .section-header h2 {\r\n font-size: 1.75rem;\r\n }\r\n\r\n .service-icon {\r\n width: 60px;\r\n height: 60px;\r\n font-size: 1.75rem;\r\n }\r\n\r\n .service-card h3 {\r\n font-size: 1.3rem;\r\n }\r\n }\r\n <\/style>\r\n\r\n\r\n <!-- Services Section -->\r\n <section class=\"services-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\u0645\u0627\u0630\u0627 \u0646\u0642\u062f\u0645<\/div>\r\n <h2>\u0635\u064a\u0627\u0646\u0629 \u0634\u0627\u0645\u0644\u0629 \u0644\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/h2>\r\n <p>\u0645\u0646 \u062a\u0635\u062d\u064a\u062d\u0627\u062a \u0627\u0644\u0623\u0645\u0627\u0646 \u0625\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621\u060c \u0646\u062a\u0648\u0644\u0649 \u0643\u0644 \u0645\u0627 \u064a\u062d\u062a\u0627\u062c\u0647 \u0645\u0648\u0642\u0639\u0643 \u0644\u064a\u0628\u0642\u0649 \u0622\u0645\u0646\u0627\u064b \u0648\u064a\u0639\u0645\u0644 \u0628\u0643\u0641\u0627\u0621\u0629 \u0639\u0627\u0644\u064a\u0629.<\/p>\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83d\udee1\ufe0f<\/div>\r\n <h3>\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0623\u0645\u0646<\/h3>\r\n <p>\u0642\u0645 \u0628\u062d\u0645\u0627\u064a\u0629 \u0645\u0648\u0642\u0639\u0643 \u0645\u0646 \u0627\u0644\u062a\u0647\u062f\u064a\u062f\u0627\u062a \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u062a\u062e\u0627\u0630 \u0625\u062c\u0631\u0627\u0621\u0627\u062a \u0623\u0645\u0646\u064a\u0629 \u0627\u0633\u062a\u0628\u0627\u0642\u064a\u0629 \u0648\u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u062f\u0648\u0631\u064a\u0629.<\/p>\r\n <ul class=\"service-list\">\r\n <li>\u0641\u062d\u0635 \u0648\u0625\u0632\u0627\u0644\u0629 \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0627\u062a \u0627\u0644\u0636\u0627\u0631\u0629<\/li>\r\n <li>\u062a\u0647\u064a\u0626\u0629 \u062c\u062f\u0627\u0631 \u0627\u0644\u062d\u0645\u0627\u064a\u0629<\/li>\r\n <li>\u0625\u062f\u0627\u0631\u0629 \u0634\u0647\u0627\u062f\u0627\u062a SSL<\/li>\r\n <li>\u062a\u0635\u062d\u064a\u062d\u0627\u062a \u0648\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0623\u0645\u0627\u0646<\/li>\r\n <li>\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u062a\u0639\u0627\u0641\u064a \u0645\u0646 \u0627\u0644\u0627\u062e\u062a\u0631\u0627\u0642<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\u26a1<\/div>\r\n <h3>\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621<\/h3>\r\n <p>\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0633\u0631\u0639\u0629 \u0645\u0648\u0642\u0639\u0643 \u0627\u0644\u0628\u0631\u0642\u064a\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u0645\u0631\u0627\u0642\u0628\u0629 \u0627\u0644\u0645\u0633\u062a\u0645\u0631\u0629 \u0644\u0644\u0623\u062f\u0627\u0621 \u0648\u0627\u0644\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0645\u0633\u062a\u0645\u0631.<\/p>\r\n <ul class=\"service-list\">\r\n <li>\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0633\u0631\u0639\u0629<\/li>\r\n <li>\u062a\u0646\u0638\u064a\u0641 \u0642\u0627\u0639\u062f\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/li>\r\n <li>\u0636\u063a\u0637 \u0627\u0644\u0635\u0648\u0631<\/li>\r\n <li>\u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u062a\u062e\u0632\u064a\u0646 \u0627\u0644\u0645\u0624\u0642\u062a (\u0627\u0644\u0643\u0627\u0634)<\/li>\r\n <li>\u0625\u0639\u062f\u0627\u062f \u0648\u0625\u062f\u0627\u0631\u0629 \u0634\u0628\u0643\u0629 \u062a\u0648\u0635\u064a\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 (CDN)<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83d\udd04<\/div>\r\n <h3>\u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u062f\u0648\u0631\u064a\u0629<\/h3>\r\n <p>\u0627\u0628\u0642\u064e \u0639\u0644\u0649 \u0627\u0637\u0644\u0627\u0639 \u062f\u0627\u0626\u0645 \u0628\u0623\u062d\u062f\u062b \u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633 \u0648\u0627\u0644\u0625\u0636\u0627\u0641\u0627\u062a \u0648\u0627\u0644\u0642\u0648\u0627\u0644\u0628 \u062f\u0648\u0646 \u0639\u0646\u0627\u0621.<\/p>\r\n <ul class=\"service-list\">\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633<\/li>\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0625\u0636\u0627\u0641\u0627\u062a \u0648\u0627\u062e\u062a\u0628\u0627\u0631\u0647\u0627<\/li>\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0642\u0648\u0627\u0644\u0628<\/li>\r\n <li>\u0641\u062d\u0635 \u0627\u0644\u062a\u0648\u0627\u0641\u0642<\/li>\r\n <li>\u0627\u0644\u062a\u0631\u0627\u062c\u0639 \u0639\u0646\u062f \u0627\u0644\u062d\u0627\u062c\u0629<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83d\udcbe<\/div>\r\n <h3>\u0627\u0644\u0646\u0633\u062e \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u0637\u064a \u0648\u0627\u0644\u0627\u0633\u062a\u0639\u0627\u062f\u0629<\/h3>\r\n <p>\u0644\u0627 \u062a\u0642\u0644\u0642 \u0623\u0628\u062f\u064b\u0627 \u0628\u0634\u0623\u0646 \u0641\u0642\u062f\u0627\u0646 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u0639 \u0627\u0644\u0646\u0633\u062e \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u0637\u064a \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a \u0648\u062e\u064a\u0627\u0631\u0627\u062a \u0627\u0644\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0633\u0631\u064a\u0639\u0629.<\/p>\r\n <ul class=\"service-list\">\r\n <li>\u0627\u0644\u0646\u0633\u062e \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u0637\u064a \u0627\u0644\u064a\u0648\u0645\u064a \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a<\/li>\r\n <li>\u062a\u062e\u0632\u064a\u0646 \u062e\u0627\u0631\u062c\u064a (\u062e\u0627\u0631\u062c \u0627\u0644\u0645\u0648\u0642\u0639)<\/li>\r\n <li>\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0628\u0646\u0642\u0631\u0629 \u0648\u0627\u062d\u062f\u0629<\/li>\r\n <li>\u0627\u0644\u062a\u062d\u0642\u0642 \u0645\u0646 \u0627\u0644\u0646\u0633\u062e \u0627\u0644\u0627\u062d\u062a\u064a\u0627\u0637\u064a<\/li>\r\n <li>\u062e\u0637\u0629 \u0627\u0644\u062a\u0639\u0627\u0641\u064a \u0645\u0646 \u0627\u0644\u0643\u0648\u0627\u0631\u062b<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83d\udcca<\/div>\r\n <h3>\u0627\u0644\u0645\u0631\u0627\u0642\u0628\u0629 \u0648\u0627\u0644\u062a\u0642\u0627\u0631\u064a\u0631<\/h3>\r\n <p>\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0631\u0624\u0649 \u0645\u0641\u0635\u0644\u0629 \u062d\u0648\u0644 \u0635\u062d\u0629 \u0645\u0648\u0642\u0639\u0643\u060c \u0623\u062f\u0627\u0626\u0647\u060c \u0648\u0633\u0644\u0648\u0643 \u0632\u0648\u0627\u0631\u0643.<\/p>\r\n <ul class=\"service-list\">\r\n <li>\u0645\u0631\u0627\u0642\u0628\u0629 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 \u0637\u0648\u0627\u0644 \u0623\u064a\u0627\u0645 \u0627\u0644\u0623\u0633\u0628\u0648\u0639<\/li>\r\n <li>\u062a\u062d\u0644\u064a\u0644\u0627\u062a \u0627\u0644\u0623\u062f\u0627\u0621<\/li>\r\n <li>\u062a\u0642\u0627\u0631\u064a\u0631 \u0634\u0647\u0631\u064a\u0629<\/li>\r\n <li>\u0645\u062a\u0627\u0628\u0639\u0629 \u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b (SEO)<\/li>\r\n <li>\u0645\u0631\u0627\u0642\u0628\u0629 \u0633\u062c\u0644 \u0627\u0644\u0623\u062e\u0637\u0627\u0621<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\u270f\ufe0f<\/div>\r\n <h3>\u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/h3>\r\n <p>\u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0645\u062d\u062a\u0648\u0627\u0643 \u062d\u062f\u064a\u062b\u064b\u0627 \u0648\u0645\u064f\u062d\u062f\u0651\u062b\u064b\u0627 \u062f\u0648\u0646 \u0627\u0644\u062d\u0627\u062c\u0629 \u0644\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0623\u064a \u0633\u0637\u0631 \u0645\u0646 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629.<\/p>\r\n <ul class=\"service-list\">\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0646\u0635\u0648\u0635 \u0648\u0627\u0644\u0635\u0648\u0631<\/li>\r\n <li>\u0625\u062f\u0627\u0631\u0629 \u0645\u0642\u0627\u0644\u0627\u062a \u0627\u0644\u0645\u062f\u0648\u0646\u0629<\/li>\r\n <li>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a<\/li>\r\n <li>\u062a\u0639\u062f\u064a\u0644\u0627\u062a \u0627\u0644\u0642\u0627\u0626\u0645\u0629<\/li>\r\n <li>\u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0646\u0645\u0627\u0630\u062c<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Add js-enabled class to enable animations\r\n document.documentElement.classList.add('js-enabled');\r\n \r\n \/\/ Intersection Observer for scroll animations\r\n const observerOptions = {\r\n threshold: 0.15,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('animate-in');\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n \/\/ Observe all animated elements\r\n const initAnimations = () => {\r\n const animatedElements = document.querySelectorAll('.section-badge, .section-header h2, .section-header p, .service-card');\r\n animatedElements.forEach(element => observer.observe(element));\r\n };\r\n\r\n \/\/ Initialize when DOM is ready\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initAnimations);\r\n } else {\r\n initAnimations();\r\n }\r\n <\/script>\r\n\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fba1d74 e-con-full e-flex e-con e-parent\" data-id=\"fba1d74\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-9faf255 elementor-widget elementor-widget-html\" data-id=\"9faf255\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <meta name=\"description\" content=\"\u062e\u062f\u0645\u0627\u062a \u0635\u064a\u0627\u0646\u0629 \u0648\u0623\u0645\u0627\u0646 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0645\u0639 \u062f\u0639\u0645 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629. \u0627\u0646\u0636\u0645 \u0625\u0644\u0649 \u0623\u0643\u062b\u0631 \u0645\u0646 200 \u0634\u0631\u0643\u0629. \u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0645\u062c\u0627\u0646\u064a\u0629\u060c \u0628\u062f\u0648\u0646 \u0639\u0642\u0648\u062f \u0637\u0648\u064a\u0644\u0629 \u0627\u0644\u0623\u062c\u0644. \u0627\u0628\u062f\u0623 \u0627\u0644\u064a\u0648\u0645!\">\r\n <meta name=\"keywords\" content=\"\u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629, \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0628\u0627\u0644\u0645\u0648\u0627\u0642\u0639, \u0623\u0645\u0627\u0646 \u0627\u0644\u0645\u0648\u0627\u0642\u0639, \u062f\u0639\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629, \u0635\u064a\u0627\u0646\u0629 \u0645\u0648\u0627\u0642\u0639 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629\">\r\n <title>\u062e\u062f\u0645\u0627\u062a \u0635\u064a\u0627\u0646\u0629 \u0648\u0623\u0645\u0627\u0646 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 | WebbingStone<\/title>\r\n <style>\r\n :root {\r\n --color-purple: #667eea;\r\n --color-purple-dark: #764ba2;\r\n --color-coral: #EE5946;\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;\r\n background: #000;\r\n color: #fff;\r\n overflow-x: hidden;\r\n direction: rtl;\r\n }\r\n\r\n \/* CTA Section *\/\r\n .cta-section {\r\n padding: 120px 20px;\r\n background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .cta-section::before {\r\n content: '';\r\n position: absolute;\r\n width: 500px;\r\n height: 500px;\r\n background: radial-gradient(circle, rgba(238, 89, 70, 0.2) 0%, transparent 70%);\r\n top: -250px;\r\n left: -250px;\r\n animation: pulse 4s ease infinite, float-diagonal 8s ease-in-out infinite;\r\n }\r\n\r\n .cta-section::after {\r\n content: '';\r\n position: absolute;\r\n width: 400px;\r\n height: 400px;\r\n background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);\r\n bottom: -200px;\r\n right: -200px;\r\n animation: pulse 5s ease infinite, float-diagonal-reverse 10s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { transform: scale(1); opacity: 0.5; }\r\n 50% { transform: scale(1.1); opacity: 0.8; }\r\n }\r\n\r\n @keyframes float-diagonal {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 25% { transform: translate(30px, 30px) scale(1.05); }\r\n 50% { transform: translate(60px, 60px) scale(1.1); }\r\n 75% { transform: translate(30px, 30px) scale(1.05); }\r\n }\r\n\r\n @keyframes float-diagonal-reverse {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 25% { transform: translate(-30px, -30px) scale(1.05); }\r\n 50% { transform: translate(-60px, -60px) scale(1.1); }\r\n 75% { transform: translate(-30px, -30px) scale(1.05); }\r\n }\r\n\r\n \/* Floating Particles *\/\r\n .particle {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.1);\r\n pointer-events: none;\r\n }\r\n\r\n .particle-1 {\r\n width: 10px;\r\n height: 10px;\r\n top: 20%;\r\n right: 10%;\r\n animation: float-particle 6s ease-in-out infinite;\r\n }\r\n\r\n .particle-2 {\r\n width: 15px;\r\n height: 15px;\r\n top: 60%;\r\n right: 80%;\r\n animation: float-particle 8s ease-in-out infinite 1s;\r\n }\r\n\r\n .particle-3 {\r\n width: 8px;\r\n height: 8px;\r\n top: 40%;\r\n right: 15%;\r\n animation: float-particle 7s ease-in-out infinite 2s;\r\n }\r\n\r\n .particle-4 {\r\n width: 12px;\r\n height: 12px;\r\n top: 70%;\r\n right: 70%;\r\n animation: float-particle 9s ease-in-out infinite 0.5s;\r\n }\r\n\r\n .particle-5 {\r\n width: 6px;\r\n height: 6px;\r\n top: 30%;\r\n right: 90%;\r\n animation: float-particle 5s ease-in-out infinite 1.5s;\r\n }\r\n\r\n @keyframes float-particle {\r\n 0%, 100% { \r\n transform: translate(0, 0) scale(1);\r\n opacity: 0.3;\r\n }\r\n 25% { \r\n transform: translate(-20px, -30px) scale(1.2);\r\n opacity: 0.6;\r\n }\r\n 50% { \r\n transform: translate(10px, -60px) scale(0.8);\r\n opacity: 0.8;\r\n }\r\n 75% { \r\n transform: translate(-30px, -30px) scale(1.1);\r\n opacity: 0.5;\r\n }\r\n }\r\n\r\n .cta-content {\r\n position: relative;\r\n z-index: 10;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n }\r\n\r\n .cta-content h2 {\r\n font-size: 3rem;\r\n margin-bottom: 25px;\r\n font-weight: 700;\r\n position: relative;\r\n background: linear-gradient(\r\n 90deg,\r\n rgba(255, 255, 255, 0.4) 0%,\r\n rgba(255, 255, 255, 1) 20%,\r\n rgba(255, 255, 255, 1) 40%,\r\n rgba(255, 255, 255, 0.4) 60%,\r\n rgba(255, 255, 255, 0.4) 100%\r\n );\r\n background-size: 200% 100%;\r\n -webkit-background-clip: text;\r\n background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n animation: fadeInUp 0.8s ease, glow-sweep 3s ease-in-out infinite;\r\n }\r\n\r\n @keyframes glow-sweep {\r\n 0% { background-position: 200% 0; }\r\n 50% { background-position: -200% 0; }\r\n 100% { background-position: 200% 0; }\r\n }\r\n\r\n @keyframes fadeInUp {\r\n from { opacity: 0; transform: translateY(30px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .cta-content p {\r\n font-size: 1.3rem;\r\n margin-bottom: 40px;\r\n opacity: 0.95;\r\n line-height: 1.9;\r\n animation: fadeInUp 0.8s ease 0.2s both;\r\n position: relative;\r\n padding-bottom: 20px;\r\n }\r\n\r\n .cta-content p::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n right: 50%;\r\n transform: translateX(50%);\r\n width: 60px;\r\n height: 3px;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);\r\n border-radius: 2px;\r\n animation: width-expand 1s ease 0.8s both;\r\n }\r\n\r\n @keyframes width-expand {\r\n from { width: 0; opacity: 0; }\r\n to { width: 60px; opacity: 1; }\r\n }\r\n\r\n .cta-buttons {\r\n display: flex;\r\n gap: 20px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n animation: fadeInUp 0.8s ease 0.4s both;\r\n }\r\n\r\n .btn {\r\n padding: 20px 50px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n border: none;\r\n border-radius: 12px;\r\n cursor: pointer;\r\n text-decoration: none;\r\n display: inline-block;\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n right: 50%;\r\n width: 0;\r\n height: 0;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translate(50%, -50%);\r\n transition: width 0.6s, height 0.6s;\r\n }\r\n\r\n .btn:hover::before {\r\n width: 350px;\r\n height: 350px;\r\n }\r\n\r\n .btn span {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .btn-white {\r\n background: white;\r\n color: var(--color-purple);\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n }\r\n\r\n .btn-white::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n right: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.3), transparent);\r\n transition: right 0.5s;\r\n z-index: 0;\r\n }\r\n\r\n .btn-white:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .btn-white:hover::after {\r\n right: 100%;\r\n }\r\n\r\n .btn-outline {\r\n background: transparent;\r\n color: white;\r\n border: 2px solid rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .btn-outline::after {\r\n content: '';\r\n position: absolute;\r\n top: -2px;\r\n right: -2px;\r\n left: -2px;\r\n bottom: -2px;\r\n border-radius: 12px;\r\n border: 2px solid white;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n z-index: 0;\r\n }\r\n\r\n .btn-outline:hover {\r\n background: rgba(255, 255, 255, 0.1);\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .btn-outline:hover::after {\r\n opacity: 1;\r\n animation: border-pulse 1.5s ease infinite;\r\n }\r\n\r\n @keyframes border-pulse {\r\n 0%, 100% { opacity: 0.5; }\r\n 50% { opacity: 1; }\r\n }\r\n\r\n .trust-badges {\r\n margin-top: 60px;\r\n display: flex;\r\n gap: 40px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n animation: fadeInUp 0.8s ease 0.6s both;\r\n }\r\n\r\n .trust-item {\r\n text-align: center;\r\n animation: float 3s ease-in-out infinite;\r\n transition: transform 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .trust-item:nth-child(1) {\r\n animation-delay: 0s;\r\n }\r\n\r\n .trust-item:nth-child(2) {\r\n animation-delay: 0.5s;\r\n }\r\n\r\n .trust-item:nth-child(3) {\r\n animation-delay: 1s;\r\n }\r\n\r\n .trust-item:nth-child(4) {\r\n animation-delay: 1.5s;\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0px); }\r\n 50% { transform: translateY(-10px); }\r\n }\r\n\r\n .trust-item:hover {\r\n transform: translateY(-5px) scale(1.05);\r\n }\r\n\r\n .trust-item:hover .trust-icon {\r\n transform: scale(1.2) rotate(10deg);\r\n filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));\r\n }\r\n\r\n .trust-item:hover .trust-text {\r\n opacity: 1;\r\n }\r\n\r\n .trust-icon {\r\n font-size: 2.5rem;\r\n margin-bottom: 10px;\r\n opacity: 0.9;\r\n display: inline-block;\r\n transition: all 0.3s ease;\r\n animation: rotate-glow 4s ease-in-out infinite;\r\n }\r\n\r\n @keyframes rotate-glow {\r\n 0%, 100% { \r\n transform: scale(1) rotate(0deg);\r\n filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));\r\n }\r\n 50% { \r\n transform: scale(1.1) rotate(5deg);\r\n filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6));\r\n }\r\n }\r\n\r\n .trust-text {\r\n font-size: 0.95rem;\r\n opacity: 0.9;\r\n font-weight: 500;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .cta-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .cta-content h2 {\r\n font-size: 2rem;\r\n }\r\n\r\n .cta-content p {\r\n font-size: 1.1rem;\r\n }\r\n\r\n .btn {\r\n padding: 16px 40px;\r\n font-size: 1rem;\r\n }\r\n\r\n .cta-buttons {\r\n flex-direction: column;\r\n width: 100%;\r\n }\r\n\r\n .btn {\r\n width: 100%;\r\n }\r\n\r\n .trust-badges {\r\n gap: 30px;\r\n }\r\n\r\n .trust-icon {\r\n font-size: 2rem;\r\n }\r\n\r\n .trust-text {\r\n font-size: 0.9rem;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .cta-content h2 {\r\n font-size: 1.75rem;\r\n }\r\n\r\n .cta-content p {\r\n font-size: 1rem;\r\n }\r\n }\r\n\r\n \/* Import Cairo font for better Arabic display *\/\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;500;600;700&display=swap');\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- \u0642\u0633\u0645 \u0627\u0644\u062f\u0639\u0648\u0629 \u0644\u0644\u0625\u062c\u0631\u0627\u0621 -->\r\n <section class=\"cta-section\">\r\n <!-- \u0627\u0644\u062c\u0633\u064a\u0645\u0627\u062a \u0627\u0644\u0639\u0627\u0626\u0645\u0629 -->\r\n <div class=\"particle particle-1\"><\/div>\r\n <div class=\"particle particle-2\"><\/div>\r\n <div class=\"particle particle-3\"><\/div>\r\n <div class=\"particle particle-4\"><\/div>\r\n <div class=\"particle particle-5\"><\/div>\r\n \r\n <div class=\"cta-content\">\r\n <h2>\u0647\u0644 \u0623\u0646\u062a \u0645\u0633\u062a\u0639\u062f \u0644\u062a\u0623\u0645\u064a\u0646 \u0645\u0648\u0642\u0639\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u061f<\/h2>\r\n <p>\u0627\u0646\u0636\u0645 \u0625\u0644\u0649 \u0623\u0643\u062b\u0631 \u0645\u0646 200 \u0634\u0631\u0643\u0629 \u062a\u062b\u0642 \u0628\u0646\u0627 \u0641\u064a \u0635\u064a\u0627\u0646\u0629 \u0645\u0648\u0627\u0642\u0639\u0647\u0627 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629. \u0627\u0628\u062f\u0623 \u0627\u0644\u064a\u0648\u0645 \u0628\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0645\u062c\u0627\u0646\u064a\u0629 \u0648\u0634\u0627\u0647\u062f \u0643\u064a\u0641 \u064a\u0645\u0643\u0646\u0646\u0627 \u0645\u0633\u0627\u0639\u062f\u0629 \u0645\u0648\u0642\u0639\u0643 \u0639\u0644\u0649 \u0627\u0644\u0627\u0632\u062f\u0647\u0627\u0631.<\/p>\r\n \r\n <div class=\"cta-buttons\">\r\n <a href=\"https:\/\/webbingstone.com\/ar\/contact\/\" class=\"btn btn-white\">\r\n <span>\u0627\u0628\u062f\u0623 \u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0645\u062c\u0627\u0646\u064a\u0629<\/span>\r\n <\/a>\r\n <a href=\"tel:+201234567890\" class=\"btn btn-outline\">\r\n <span>\u0627\u062a\u0635\u0644 \u0628\u0646\u0627 \u0627\u0644\u0622\u0646<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"trust-badges\">\r\n <div class=\"trust-item\">\r\n <div class=\"trust-icon\">\u26a1<\/div>\r\n <div class=\"trust-text\">\u062f\u0639\u0645 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629<\/div>\r\n <\/div>\r\n <div class=\"trust-item\">\r\n <div class=\"trust-icon\">\ud83d\udee1\ufe0f<\/div>\r\n <div class=\"trust-text\">\u0622\u0645\u0646 \u0628\u0646\u0633\u0628\u0629 100%<\/div>\r\n <\/div>\r\n <div class=\"trust-item\">\r\n <div class=\"trust-icon\">\u2705<\/div>\r\n <div class=\"trust-text\">\u0628\u062f\u0648\u0646 \u0639\u0642\u0648\u062f \u0637\u0648\u064a\u0644\u0629 \u0627\u0644\u0623\u062c\u0644<\/div>\r\n <\/div>\r\n <div class=\"trust-item\">\r\n <div class=\"trust-icon\">\ud83d\udcb0<\/div>\r\n <div class=\"trust-text\">\u0636\u0645\u0627\u0646 \u0627\u0633\u062a\u0631\u062c\u0627\u0639 \u0627\u0644\u0645\u0627\u0644<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>  \ud83d\udee1\ufe0f \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0639\u0646\u0627\u064a\u0629 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0628\u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u062d\u0627\u0641\u0638 \u0639\u0644\u0649 \u0623\u062f\u0627\u0621 \u0645\u0648\u0642\u0639\u0643 \u0641\u064a \u0623\u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u064a\u0627\u062a\u0647 \u062e\u062f\u0645\u0627\u062a \u0635\u064a\u0627\u0646\u0629 \u0645\u0648\u0627\u0642\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0634\u0627\u0645\u0644\u0629 \u062a\u0636\u0645\u0646 \u0628\u0642\u0627\u0621 \u0645\u0648\u0642\u0639\u0643 \u0622\u0645\u0646\u0627\u064b \u0648\u0633\u0631\u064a\u0639\u0627\u064b \u0648\u0645\u062d\u062f\u062b\u0627\u064b. \u0645\u0646 \u0627\u0644\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0623\u0645\u0646\u064a\u0629 \u0625\u0644\u0649 \u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0623\u062f\u0627\u0621\u060c \u0646\u062d\u0646 \u0646\u063a\u0637\u064a \u0643\u0644 \u0634\u064a\u0621. \u0627\u0628\u062f\u0623 \u0627\u0644\u064a\u0648\u0645 \u0639\u0631\u0636 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 99.9% \u0636\u0645\u0627\u0646 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 24\/7 \u0645\u0631\u0627\u0642\u0628\u0629 \u0645\u0633\u062a\u0645\u0631\u0629 200+ \u0645\u0648\u0642\u0639 \u062a\u062d\u062a \u0627\u0644\u0635\u064a\u0627\u0646\u0629   \u062e\u0637\u0637 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 \u0627\u062e\u062a\u0631 \u062e\u0637\u0629 \u0627\u0644\u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 […]<\/p>\n","protected":false},"featured_media":1240,"template":"elementor_header_footer","meta":{"footnotes":""},"portfolio_cat":[],"portfolio_skills":[175],"class_list":["post-9129","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry","portfolio_skills-175"],"_links":{"self":[{"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio\/9129","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio"}],"about":[{"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/types\/portfolio"}],"version-history":[{"count":5,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio\/9129\/revisions"}],"predecessor-version":[{"id":22576,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio\/9129\/revisions\/22576"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/media\/1240"}],"wp:attachment":[{"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/media?parent=9129"}],"wp:term":[{"taxonomy":"portfolio_cat","embeddable":true,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio_cat?post=9129"},{"taxonomy":"portfolio_skills","embeddable":true,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio_skills?post=9129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}