{"id":9557,"date":"2024-05-06T01:37:37","date_gmt":"2024-05-05T22:37:37","guid":{"rendered":"https:\/\/webbingstone.com\/?post_type=portfolio&p=9557"},"modified":"2026-01-18T18:58:06","modified_gmt":"2026-01-18T16:58:06","slug":"%d8%a7%d9%84%d9%86%d8%b4%d8%b1-%d8%b9%d9%84%d9%89-%d9%85%d9%88%d8%a7%d9%82%d8%b9-%d8%a7%d9%84%d8%aa%d9%88%d8%a7%d8%b5%d9%84-%d8%a7%d9%84%d8%a7%d8%ac%d8%aa%d9%85%d8%a7%d8%b9%d9%8a","status":"publish","type":"portfolio","link":"https:\/\/webbingstone.com\/ar\/service\/%d8%a7%d9%84%d9%86%d8%b4%d8%b1-%d8%b9%d9%84%d9%89-%d9%85%d9%88%d8%a7%d9%82%d8%b9-%d8%a7%d9%84%d8%aa%d9%88%d8%a7%d8%b5%d9%84-%d8%a7%d9%84%d8%a7%d8%ac%d8%aa%d9%85%d8%a7%d8%b9%d9%8a\/","title":{"rendered":"\u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a"},"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 \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0641\u064a \u0645\u0635\u0631 | WebbingStone<\/title>\r\n\r\n <style>\r\n .social-media-page * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n .social-media-page {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, \r\n color: #ffffff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Hero Section *\/\r\n .social-media-page .hero {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n padding: 80px 20px;\r\n }\r\n\r\n .social-media-page .hero::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle at center, rgba(68, 39, 100, 0.3) 0%, transparent 70%);\r\n animation: rotate 20s linear infinite;\r\n }\r\n\r\n @keyframes rotate {\r\n from { transform: rotate(0deg); }\r\n to { transform: rotate(360deg); }\r\n }\r\n\r\n .social-media-page .hero-content {\r\n max-width: 1200px;\r\n text-align: center;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .social-media-page .hero h1 {\r\n font-size: clamp(2.5rem, 6vw, 5rem);\r\n font-weight: 800;\r\n margin-bottom: 30px;\r\n background: linear-gradient(135deg, #ffffff 0%, #EE5946 50%, #442764 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 opacity: 0;\r\n transform: translateY(50px);\r\n }\r\n\r\n .social-media-page .hero-subtitle {\r\n font-size: clamp(1.2rem, 2.5vw, 1.8rem);\r\n color: rgba(255, 255, 255, 0.8);\r\n margin-bottom: 30px;\r\n max-width: 900px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n }\r\n\r\n .social-media-page .platform-icons {\r\n display: flex;\r\n gap: 20px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n margin-bottom: 40px;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n }\r\n\r\n .social-media-page .platform-icon {\r\n font-size: 2.5rem;\r\n transition: transform 0.3s ease;\r\n cursor: pointer;\r\n }\r\n\r\n .social-media-page .platform-icon:hover {\r\n transform: translateY(-5px) scale(1.1);\r\n }\r\n\r\n .social-media-page .hero-cta {\r\n display: inline-flex;\r\n gap: 20px;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n }\r\n\r\n .social-media-page .btn {\r\n padding: 18px 45px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n border: none;\r\n border-radius: 50px;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n text-decoration: none;\r\n display: inline-block;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .social-media-page .btn-primary {\r\n background: linear-gradient(135deg, #EE5946 0%, #442764 100%);\r\n color: white;\r\n box-shadow: 0 10px 30px rgba(238, 89, 70, 0.3);\r\n }\r\n\r\n .social-media-page .btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 40px rgba(238, 89, 70, 0.5);\r\n }\r\n\r\n .social-media-page .btn-secondary {\r\n background: rgba(255, 255, 255, 0.1);\r\n color: white;\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .social-media-page .btn-secondary:hover {\r\n background: rgba(255, 255, 255, 0.2);\r\n transform: translateY(-3px);\r\n }\r\n\r\n \/* Floating Elements *\/\r\n .social-media-page .floating-element {\r\n position: absolute;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(238, 89, 70, 0.3), rgba(68, 39, 100, 0.3));\r\n filter: blur(40px);\r\n animation: float 6s ease-in-out infinite;\r\n }\r\n\r\n .social-media-page .floating-element:nth-child(1) {\r\n width: 300px;\r\n height: 300px;\r\n top: 10%;\r\n left: 10%;\r\n animation-delay: 0s;\r\n }\r\n\r\n .social-media-page .floating-element:nth-child(2) {\r\n width: 250px;\r\n height: 250px;\r\n bottom: 15%;\r\n right: 15%;\r\n animation-delay: 2s;\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translateY(0px); }\r\n 50% { transform: translateY(-30px); }\r\n }\r\n\r\n \/* Services Section *\/\r\n .social-media-page .services-section {\r\n padding: 120px 20px;\r\n position: relative;\r\n }\r\n\r\n .social-media-page .container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .social-media-page .section-header {\r\n text-align: center;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .social-media-page .section-label {\r\n display: inline-block;\r\n padding: 10px 25px;\r\n background: rgba(238, 89, 70, 0.1);\r\n border: 1px solid rgba(238, 89, 70, 0.3);\r\n border-radius: 50px;\r\n color: #EE5946;\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n text-transform: uppercase;\r\n letter-spacing: 2px;\r\n margin-bottom: 20px;\r\n opacity: 0;\r\n }\r\n\r\n .social-media-page .section-title {\r\n font-size: clamp(2rem, 4vw, 3.5rem);\r\n font-weight: 800;\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, #ffffff 0%, #EE5946 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n opacity: 0;\r\n }\r\n\r\n .social-media-page .section-description {\r\n font-size: 1.2rem;\r\n color: rgba(255, 255, 255, 0.7);\r\n max-width: 800px;\r\n margin: 0 auto;\r\n line-height: 1.8;\r\n opacity: 0;\r\n }\r\n\r\n \/* Service Cards Grid *\/\r\n .social-media-page .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n gap: 30px;\r\n margin-top: 60px;\r\n }\r\n\r\n .social-media-page .service-card {\r\n background: rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 24px;\r\n padding: 40px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n }\r\n\r\n .social-media-page .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: 4px;\r\n background: linear-gradient(90deg, #EE5946 0%, #442764 100%);\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .social-media-page .service-card:hover::before {\r\n transform: scaleX(1);\r\n }\r\n\r\n .social-media-page .service-card:hover {\r\n transform: translateY(-10px);\r\n border-color: rgba(238, 89, 70, 0.3);\r\n background: rgba(255, 255, 255, 0.08);\r\n box-shadow: 0 20px 60px rgba(238, 89, 70, 0.2);\r\n }\r\n\r\n .social-media-page .service-icon {\r\n width: 70px;\r\n height: 70px;\r\n background: linear-gradient(135deg, rgba(238, 89, 70, 0.2), rgba(68, 39, 100, 0.2));\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 transition: all 0.4s ease;\r\n }\r\n\r\n .social-media-page .service-card:hover .service-icon {\r\n transform: scale(1.1) rotate(5deg);\r\n background: linear-gradient(135deg, rgba(238, 89, 70, 0.3), rgba(68, 39, 100, 0.3));\r\n }\r\n\r\n .social-media-page .service-card h3 {\r\n font-size: 1.5rem;\r\n margin-bottom: 15px;\r\n color: #ffffff;\r\n }\r\n\r\n .social-media-page .service-card p {\r\n color: rgba(255, 255, 255, 0.7);\r\n line-height: 1.7;\r\n font-size: 1rem;\r\n }\r\n\r\n \/* Content Types Section *\/\r\n .social-media-page .content-types-section {\r\n padding: 120px 20px;\r\n background: linear-gradient(180deg, transparent 0%, rgba(68, 39, 100, 0.1) 100%);\r\n }\r\n\r\n .social-media-page .content-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 25px;\r\n margin-top: 60px;\r\n }\r\n\r\n .social-media-page .content-card {\r\n background: rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n padding: 30px;\r\n text-align: center;\r\n transition: all 0.3s ease;\r\n opacity: 0;\r\n transform: scale(0.9);\r\n }\r\n\r\n .social-media-page .content-card:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n border-color: rgba(238, 89, 70, 0.3);\r\n transform: scale(1.05);\r\n }\r\n\r\n .social-media-page .content-icon {\r\n font-size: 3rem;\r\n margin-bottom: 15px;\r\n display: inline-block;\r\n }\r\n\r\n .social-media-page .content-card h4 {\r\n font-size: 1.2rem;\r\n color: #ffffff;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .social-media-page .content-card p {\r\n color: rgba(255, 255, 255, 0.6);\r\n font-size: 0.9rem;\r\n }\r\n\r\n \/* Process Section *\/\r\n .social-media-page .process-section {\r\n padding: 120px 20px;\r\n }\r\n\r\n .social-media-page .process-timeline {\r\n position: relative;\r\n max-width: 900px;\r\n margin: 80px auto 0;\r\n }\r\n\r\n .social-media-page .process-step {\r\n display: flex;\r\n gap: 40px;\r\n margin-bottom: 60px;\r\n position: relative;\r\n opacity: 0;\r\n transform: translateX(-50px);\r\n }\r\n\r\n .social-media-page .process-step:nth-child(even) {\r\n flex-direction: row-reverse;\r\n transform: translateX(50px);\r\n }\r\n\r\n .social-media-page .process-number {\r\n min-width: 80px;\r\n height: 80px;\r\n background: linear-gradient(135deg, #EE5946 0%, #442764 100%);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 2rem;\r\n font-weight: 800;\r\n box-shadow: 0 10px 30px rgba(238, 89, 70, 0.3);\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .social-media-page .process-content {\r\n flex: 1;\r\n background: rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n padding: 30px;\r\n }\r\n\r\n .social-media-page .process-content h3 {\r\n font-size: 1.6rem;\r\n margin-bottom: 12px;\r\n color: #EE5946;\r\n }\r\n\r\n .social-media-page .process-content p {\r\n color: rgba(255, 255, 255, 0.7);\r\n line-height: 1.7;\r\n }\r\n\r\n \/* Benefits Grid *\/\r\n .social-media-page .benefits-section {\r\n padding: 120px 20px;\r\n background: rgba(68, 39, 100, 0.05);\r\n }\r\n\r\n .social-media-page .benefits-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 30px;\r\n margin-top: 60px;\r\n }\r\n\r\n .social-media-page .benefit-card {\r\n background: rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 20px;\r\n padding: 35px;\r\n text-align: center;\r\n opacity: 0;\r\n transform: scale(0.8);\r\n }\r\n\r\n .social-media-page .benefit-icon {\r\n font-size: 3rem;\r\n margin-bottom: 20px;\r\n display: inline-block;\r\n }\r\n\r\n .social-media-page .benefit-card h4 {\r\n font-size: 1.3rem;\r\n margin-bottom: 12px;\r\n color: #ffffff;\r\n }\r\n\r\n .social-media-page .benefit-card p {\r\n color: rgba(255, 255, 255, 0.7);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Stats Section *\/\r\n .social-media-page .stats-section {\r\n padding: 80px 20px;\r\n background: rgba(68, 39, 100, 0.1);\r\n }\r\n\r\n .social-media-page .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 40px;\r\n max-width: 1000px;\r\n margin: 0 auto;\r\n }\r\n\r\n .social-media-page .stat-item {\r\n text-align: center;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n\r\n .social-media-page .stat-number {\r\n font-size: 3.5rem;\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #EE5946 0%, #442764 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 10px;\r\n display: inline-block;\r\n line-height: 1.3;\r\n padding: 5px 0;\r\n }\r\n\r\n .social-media-page .stat-label {\r\n color: rgba(255, 255, 255, 0.7);\r\n font-size: 1.1rem;\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n }\r\n\r\n \/* Pricing Section *\/\r\n .social-media-page .pricing-section {\r\n padding: 120px 20px;\r\n background: linear-gradient(180deg, rgba(68, 39, 100, 0.05) 0%, transparent 100%);\r\n }\r\n\r\n .social-media-page .pricing-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n gap: 30px;\r\n margin-top: 60px;\r\n max-width: 1200px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .social-media-page .pricing-card {\r\n background: rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 24px;\r\n padding: 40px;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .social-media-page .pricing-card.featured {\r\n border-color: rgba(238, 89, 70, 0.5);\r\n transform: translateY(40px) scale(1.05);\r\n }\r\n\r\n .social-media-page .pricing-card.featured::before {\r\n content: '\u0627\u0644\u0623\u0643\u062b\u0631 \u0634\u0639\u0628\u064a\u0629';\r\n position: absolute;\r\n top: 20px;\r\n left: -35px;\r\n background: linear-gradient(135deg, #EE5946 0%, #442764 100%);\r\n color: white;\r\n padding: 5px 50px;\r\n font-size: 0.75rem;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n transform: rotate(-45deg);\r\n box-shadow: 0 4px 15px rgba(238, 89, 70, 0.4);\r\n }\r\n\r\n .social-media-page .pricing-card:hover {\r\n transform: translateY(-10px);\r\n border-color: rgba(238, 89, 70, 0.3);\r\n background: rgba(255, 255, 255, 0.08);\r\n box-shadow: 0 20px 60px rgba(238, 89, 70, 0.2);\r\n }\r\n\r\n .social-media-page .pricing-card.featured:hover {\r\n transform: translateY(-10px) scale(1.05);\r\n }\r\n\r\n .social-media-page .pricing-header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .social-media-page .pricing-name {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #EE5946;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .social-media-page .pricing-price {\r\n font-size: 3rem;\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #ffffff 0%, #EE5946 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 5px;\r\n line-height: 1;\r\n }\r\n\r\n .social-media-page .pricing-period {\r\n color: rgba(255, 255, 255, 0.6);\r\n font-size: 1rem;\r\n }\r\n\r\n .social-media-page .pricing-features {\r\n list-style: none;\r\n margin: 30px 0;\r\n flex-grow: 1;\r\n }\r\n\r\n .social-media-page .pricing-features li {\r\n padding: 12px 0;\r\n color: rgba(255, 255, 255, 0.8);\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .social-media-page .pricing-features li:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .social-media-page .pricing-features li::before {\r\n content: '\u2713';\r\n color: #EE5946;\r\n font-weight: bold;\r\n font-size: 1.2rem;\r\n flex-shrink: 0;\r\n }\r\n\r\n .social-media-page .pricing-button {\r\n width: 100%;\r\n padding: 15px 30px;\r\n background: linear-gradient(135deg, rgba(238, 89, 70, 0.2), rgba(68, 39, 100, 0.2));\r\n border: 1px solid rgba(238, 89, 70, 0.3);\r\n color: white;\r\n border-radius: 50px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n display: inline-block;\r\n text-align: center;\r\n }\r\n\r\n .social-media-page .pricing-button:hover {\r\n background: linear-gradient(135deg, #EE5946 0%, #442764 100%);\r\n transform: translateY(-2px);\r\n box-shadow: 0 10px 30px rgba(238, 89, 70, 0.4);\r\n }\r\n\r\n .social-media-page .pricing-card.featured .pricing-button {\r\n background: linear-gradient(135deg, #EE5946 0%, #442764 100%);\r\n box-shadow: 0 10px 30px rgba(238, 89, 70, 0.3);\r\n }\r\n\r\n \/* CTA Section *\/\r\n .social-media-page .cta-section {\r\n padding: 120px 20px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .social-media-page .cta-content {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n background: rgba(255, 255, 255, 0.05);\r\n backdrop-filter: blur(20px);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n border-radius: 30px;\r\n padding: 80px 40px;\r\n opacity: 0;\r\n transform: translateY(50px);\r\n }\r\n\r\n .social-media-page .cta-content h2 {\r\n font-size: clamp(2rem, 4vw, 3rem);\r\n margin-bottom: 20px;\r\n background: linear-gradient(135deg, #ffffff 0%, #EE5946 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 .social-media-page .cta-content p {\r\n font-size: 1.2rem;\r\n color: rgba(255, 255, 255, 0.7);\r\n margin-bottom: 40px;\r\n line-height: 1.8;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .social-media-page .hero {\r\n padding: 60px 20px;\r\n }\r\n\r\n .social-media-page .services-section,\r\n .social-media-page .content-types-section,\r\n .social-media-page .process-section,\r\n .social-media-page .benefits-section,\r\n .social-media-page .cta-section {\r\n padding: 80px 20px;\r\n }\r\n\r\n .social-media-page .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .social-media-page .process-step,\r\n .social-media-page .process-step:nth-child(even) {\r\n flex-direction: column;\r\n gap: 20px;\r\n transform: translateX(0);\r\n }\r\n\r\n .social-media-page .process-number {\r\n min-width: 60px;\r\n height: 60px;\r\n font-size: 1.5rem;\r\n }\r\n\r\n .social-media-page .cta-content {\r\n padding: 50px 30px;\r\n }\r\n\r\n .social-media-page .hero-cta {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .social-media-page .btn {\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n\r\n .social-media-page .content-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .social-media-page .service-card {\r\n padding: 30px 20px;\r\n }\r\n\r\n .social-media-page .content-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .social-media-page .stats-grid {\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Social Media Posting Page Content - Arabic -->\r\n<div class=\"social-media-page\">\r\n <!-- Hero Section -->\r\n <section class=\"hero\">\r\n <div class=\"floating-element\"><\/div>\r\n <div class=\"floating-element\"><\/div>\r\n \r\n <div class=\"hero-content\">\r\n <h1>\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0641\u064a \u0645\u0635\u0631<\/h1>\r\n <p class=\"hero-subtitle\">\r\n \u0646\u0634\u0631 \u0648\u062c\u062f\u0648\u0644\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u0645\u062d\u062a\u0648\u0627\u0643 \u0639\u0628\u0631 \u062c\u0645\u064a\u0639 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 - \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0627\u0646\u0633\u062a\u062c\u0631\u0627\u0645\u060c \u062a\u0648\u064a\u062a\u0631 \u0648\u0644\u064a\u0646\u0643\u062f \u0627\u0646. \u062e\u062f\u0645\u0629 \u0645\u0648\u062b\u0648\u0642\u0629 \u0645\u0646 \u0627\u0644\u0642\u0627\u0647\u0631\u0629 \u0644\u062c\u0645\u064a\u0639 \u0623\u0646\u062d\u0627\u0621 \u0645\u0635\u0631\r\n <\/p>\r\n <div class=\"platform-icons\">\r\n <span class=\"platform-icon\">\ud83d\udcd8<\/span>\r\n <span class=\"platform-icon\">\ud83d\udcf7<\/span>\r\n <span class=\"platform-icon\">\ud83d\udc26<\/span>\r\n <span class=\"platform-icon\">\ud83d\udcbc<\/span>\r\n <span class=\"platform-icon\">\u25b6\ufe0f<\/span>\r\n <span class=\"platform-icon\">\ud83c\udfb5<\/span>\r\n <\/div>\r\n <div class=\"hero-cta\">\r\n <a href=\"#contact\" class=\"btn btn-primary\">\u0627\u0628\u062f\u0623 \u0627\u0644\u064a\u0648\u0645<\/a>\r\n <a href=\"#services\" class=\"btn btn-secondary\">\u0634\u0627\u0647\u062f \u0627\u0644\u062e\u062f\u0645\u0627\u062a<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Services Section -->\r\n <section class=\"services-section\" id=\"services\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <span class=\"section-label\">\u0645\u0627 \u0646\u0642\u062f\u0645\u0647<\/span>\r\n <h2 class=\"section-title\">\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0641\u064a \u0645\u0635\u0631<\/h2>\r\n <p class=\"section-description\">\r\n \u0646\u0623\u062e\u0630 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062c\u0627\u0647\u0632 \u0645\u0646\u0643 \u0648\u0646\u0646\u0634\u0631\u0647 \u0639\u0644\u0649 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0641\u064a \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0627\u0646\u0633\u062a\u062c\u0631\u0627\u0645\u060c \u062a\u0648\u064a\u062a\u0631 \u0648\u0644\u064a\u0646\u0643\u062f \u0627\u0646 \u0641\u064a \u0627\u0644\u0623\u0648\u0642\u0627\u062a \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0635\u0631\u064a\r\n <\/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\udcc5<\/div>\r\n <h3>\u0627\u0644\u0646\u0634\u0631 \u0627\u0644\u0645\u062c\u062f\u0648\u0644<\/h3>\r\n <p>\r\n \u0646\u0634\u0631 \u0645\u062d\u062a\u0648\u0627\u0643 \u062d\u0633\u0628 \u0627\u0644\u062c\u062f\u0648\u0644 \u0627\u0644\u0632\u0645\u0646\u064a \u0639\u0628\u0631 \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u062c\u0631\u0627\u0645\u060c \u062a\u0648\u064a\u062a\u0631\u060c \u0644\u064a\u0646\u0643\u062f \u0625\u0646 \u0648\u0627\u0644\u0645\u0632\u064a\u062f. \u0646\u0634\u0631 \u0645\u062a\u0633\u0642 \u0641\u064a \u0627\u0644\u0623\u0648\u0642\u0627\u062a \u0627\u0644\u0645\u062b\u0644\u0649 \u0644\u0623\u0642\u0635\u0649 \u0638\u0647\u0648\u0631\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83c\udfaf<\/div>\r\n <h3>\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a<\/h3>\r\n <p>\r\n \u0625\u0636\u0627\u0641\u0629 \u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0630\u0627\u062a \u0635\u0644\u0629 \u0644\u0645\u0646\u0634\u0648\u0631\u0627\u062a\u0643 \u0644\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0648\u0635\u0648\u0644 \u0648\u0627\u0644\u0638\u0647\u0648\u0631. \u0646\u062d\u0633\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0644\u0623\u0641\u0636\u0644 \u0645\u0645\u0627\u0631\u0633\u0627\u062a \u0643\u0644 \u0645\u0646\u0635\u0629\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\u2699\ufe0f<\/div>\r\n <h3>\u0625\u0639\u062f\u0627\u062f \u0648\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0628\u0631\u0648\u0641\u0627\u064a\u0644<\/h3>\r\n <p>\r\n \u0625\u0639\u062f\u0627\u062f \u0643\u0627\u0645\u0644 \u0644\u062d\u0633\u0627\u0628\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0643 \u0645\u0639 \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629\u060c \u0627\u0644\u0635\u0648\u0631\u060c \u0648\u0639\u0646\u0627\u0635\u0631 \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0639\u0628\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\r\n <\/p>\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\u0646\u0634\u0631 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u0645\u0646\u0635\u0627\u062a<\/h3>\r\n <p>\r\n \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0639\u062f\u0629 \u0645\u0646\u0635\u0627\u062a \u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0641\u064a \u0646\u0641\u0633 \u0627\u0644\u0648\u0642\u062a. \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0645\u0631\u0629 \u0648\u0627\u062d\u062f\u0629 \u064a\u062a\u0645 \u062a\u0648\u0632\u064a\u0639\u0647 \u0639\u0628\u0631 \u062c\u0645\u064a\u0639 \u0642\u0646\u0648\u0627\u062a\u0643\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83d\udcca<\/div>\r\n <h3>\u062a\u062d\u0644\u064a\u0644\u0627\u062a \u0627\u0644\u0646\u0634\u0631<\/h3>\r\n <p>\r\n \u062a\u0642\u0627\u0631\u064a\u0631 \u0634\u0647\u0631\u064a\u0629 \u062a\u0648\u0636\u062d \u0645\u062a\u0649 \u0646\u064f\u0634\u0631\u062a \u0627\u0644\u0645\u0646\u0634\u0648\u0631\u0627\u062a\u060c \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0627\u0644\u0648\u0635\u0648\u0644\u060c \u0648\u0645\u0642\u0627\u064a\u064a\u0633 \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0623\u063a\u0631\u0627\u0636 \u0627\u0644\u062a\u062a\u0628\u0639\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83d\udcf1<\/div>\r\n <h3>\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u0635\u0627\u062a<\/h3>\r\n <p>\r\n \u0627\u0644\u062a\u0639\u0627\u0645\u0644 \u0645\u0639 \u0627\u0644\u062c\u0648\u0627\u0646\u0628 \u0627\u0644\u062a\u0642\u0646\u064a\u0629 \u0644\u0644\u0646\u0634\u0631 \u0628\u0645\u0627 \u0641\u064a \u0630\u0644\u0643 \u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0635\u0648\u0631\u060c \u062a\u062d\u0633\u064a\u0646 \u0637\u0648\u0644 \u0627\u0644\u062a\u0639\u0644\u064a\u0642\u0627\u062a\u060c \u0648\u0645\u062a\u0637\u0644\u0628\u0627\u062a \u0643\u0644 \u0645\u0646\u0635\u0629 \u0645\u062d\u062f\u062f\u0629\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Stats Section -->\r\n <section class=\"stats-section\">\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" data-target=\"1000\">0<\/span>\r\n <span class=\"stat-label\">+ \u0645\u0646\u0634\u0648\u0631 \u062a\u0645 \u0646\u0634\u0631\u0647<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" data-target=\"50\">0<\/span>\r\n <span class=\"stat-label\">+ \u0639\u0645\u064a\u0644 \u0646\u0634\u0637<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" data-target=\"10\">0<\/span>\r\n <span class=\"stat-label\">\u0633\u0646\u0648\u0627\u062a \u062e\u0628\u0631\u0629<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\" data-target=\"98\">0<\/span>\r\n <span class=\"stat-label\">% \u0631\u0636\u0627 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Content Types Section -->\r\n <section class=\"content-types-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <span class=\"section-label\">\u0645\u0627 \u062a\u0642\u062f\u0645\u0647 \u0623\u0646\u062a<\/span>\r\n <h2 class=\"section-title\">\u0623\u0646\u0648\u0627\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0630\u064a \u0646\u0646\u0634\u0631\u0647 \u0639\u0644\u0649 \u062d\u0633\u0627\u0628\u0627\u062a\u0643<\/h2>\r\n <p class=\"section-description\">\r\n \u0646\u0642\u062f\u0631 \u0646\u0646\u0634\u0631 \u0623\u064a \u0646\u0648\u0639 \u0645\u0646 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u0644\u064a \u0628\u062a\u062c\u0647\u0632\u0647 - \u0627\u0628\u0639\u062a\u0647 \u0644\u0646\u0627 \u0648\u0627\u062d\u0646\u0627 \u0647\u0646\u0646\u0634\u0631\u0647 \u0641\u064a \u0627\u0644\u0648\u0642\u062a \u0627\u0644\u0645\u0646\u0627\u0633\u0628\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"content-grid\">\r\n <div class=\"content-card\">\r\n <div class=\"content-icon\">\ud83c\udfa8<\/div>\r\n <h4>\u0635\u0648\u0631 \u0648\u062a\u0635\u0627\u0645\u064a\u0645<\/h4>\r\n <p>\u0645\u0644\u0641\u0627\u062a JPG, PNG<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-card\">\r\n <div class=\"content-icon\">\ud83c\udfac<\/div>\r\n <h4>\u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a<\/h4>\r\n <p>\u0645\u0644\u0641\u0627\u062a MP4, MOV<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-card\">\r\n <div class=\"content-icon\">\ud83d\udcf8<\/div>\r\n <h4>\u0635\u0648\u0631 \u0641\u0648\u062a\u0648\u063a\u0631\u0627\u0641\u064a\u0629<\/h4>\r\n <p>\u0645\u0646\u062a\u062c\u0627\u062a \u0648\u0646\u0645\u0637 \u062d\u064a\u0627\u0629<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-card\">\r\n <div class=\"content-icon\">\u270d\ufe0f<\/div>\r\n <h4>\u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0646\u0635\u064a\u0629<\/h4>\r\n <p>\u062a\u0639\u0644\u064a\u0642\u0627\u062a \u0648\u062a\u062d\u062f\u064a\u062b\u0627\u062a<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-card\">\r\n <div class=\"content-icon\">\ud83d\udd17<\/div>\r\n <h4>\u0631\u0648\u0627\u0628\u0637 \u0648\u0645\u0642\u0627\u0644\u0627\u062a<\/h4>\r\n <p>\u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0627\u0644\u0645\u062f\u0648\u0646\u0629 \u0648\u0627\u0644\u0623\u062e\u0628\u0627\u0631<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-card\">\r\n <div class=\"content-icon\">\ud83c\udfaf<\/div>\r\n <h4>\u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0643\u0627\u0631\u0648\u0633\u064a\u0644<\/h4>\r\n <p>\u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0635\u0648\u0631 \u0645\u062a\u0639\u062f\u062f\u0629<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-card\">\r\n <div class=\"content-icon\">\ud83d\udce2<\/div>\r\n <h4>\u0625\u0639\u0644\u0627\u0646\u0627\u062a<\/h4>\r\n <p>\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0627\u0644\u0634\u0631\u0643\u0629<\/p>\r\n <\/div>\r\n\r\n <div class=\"content-card\">\r\n <div class=\"content-icon\">\ud83c\udf89<\/div>\r\n <h4>\u0639\u0631\u0648\u0636 \u062a\u0631\u0648\u064a\u062c\u064a\u0629<\/h4>\r\n <p>\u0645\u0628\u064a\u0639\u0627\u062a \u0648\u0641\u0639\u0627\u0644\u064a\u0627\u062a<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Process Section -->\r\n <section class=\"process-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <span class=\"section-label\">\u0645\u0646\u0647\u062c\u064a\u062a\u0646\u0627<\/span>\r\n <h2 class=\"section-title\">\u0627\u0632\u0627\u064a \u0628\u062a\u0634\u062a\u063a\u0644 \u062e\u062f\u0645\u0629 \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627<\/h2>\r\n <p class=\"section-description\">\r\n \u062e\u0637\u0648\u0627\u062a \u0628\u0633\u064a\u0637\u0629 \u0639\u0644\u0634\u0627\u0646 \u0646\u0648\u0635\u0644 \u0645\u062d\u062a\u0648\u0627\u0643 \u0644\u062c\u0645\u0647\u0648\u0631\u0643 \u0628\u0634\u0643\u0644 \u0645\u0646\u062a\u0638\u0645 \u0639\u0644\u0649 \u0643\u0644 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"process-timeline\">\r\n <div class=\"process-step\">\r\n <div class=\"process-number\">01<\/div>\r\n <div class=\"process-content\">\r\n <h3>\u0648\u0635\u0648\u0644 \u0644\u0644\u062d\u0633\u0627\u0628\u0627\u062a<\/h3>\r\n <p>\r\n \u062a\u062f\u064a\u0646\u0627 \u0627\u0644\u0648\u0635\u0648\u0644 \u0644\u062d\u0633\u0627\u0628\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0628\u062a\u0627\u0639\u062a\u0643 \u0623\u0648 \u062a\u0636\u064a\u0641\u0646\u0627 \u0643\u0645\u0633\u0624\u0648\u0644. \u0647\u0646\u0639\u0645\u0644 \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0622\u0645\u0646\u0629 \u0644\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0643\u0644 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"process-step\">\r\n <div class=\"process-number\">02<\/div>\r\n <div class=\"process-content\">\r\n <h3>\u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0628\u0631\u0648\u0641\u0627\u064a\u0644<\/h3>\r\n <p>\r\n \u0646\u0639\u0645\u0644 \u0625\u0639\u062f\u0627\u062f \u0643\u0627\u0645\u0644 \u0648\u062a\u062d\u0633\u064a\u0646 \u0644\u0644\u0628\u0631\u0648\u0641\u0627\u064a\u0644\u0627\u062a \u0628\u062a\u0627\u0639\u062a\u0643 - \u0627\u0644\u0628\u0627\u064a\u0648\u060c \u0635\u0648\u0631 \u0627\u0644\u0628\u0631\u0648\u0641\u0627\u064a\u0644\u060c \u0635\u0648\u0631 \u0627\u0644\u0643\u0641\u0631\u060c \u0648\u0643\u0644 \u0627\u0644\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"process-step\">\r\n <div class=\"process-number\">03<\/div>\r\n <div class=\"process-content\">\r\n <h3>\u0627\u0628\u0639\u062a \u0645\u062d\u062a\u0648\u0627\u0643<\/h3>\r\n <p>\r\n \u0627\u0628\u0639\u062a\u0644\u0646\u0627 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0628\u062a\u0627\u0639\u0643 (\u0635\u0648\u0631\u060c \u0641\u064a\u062f\u064a\u0648\u0647\u0627\u062a\u060c \u0643\u0627\u0628\u0634\u0646) \u0639\u0644\u0649 \u0627\u0644\u0625\u064a\u0645\u064a\u0644 \u0623\u0648 \u0641\u0648\u0644\u062f\u0631 \u0645\u0634\u062a\u0631\u0643. \u0642\u0648\u0644\u0646\u0627 \u0627\u0645\u062a\u0649 \u0648\u0641\u064a\u0646 \u0639\u0627\u064a\u0632 \u0643\u0644 \u0628\u0648\u0633\u062a \u064a\u0646\u0632\u0644\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"process-step\">\r\n <div class=\"process-number\">04<\/div>\r\n <div class=\"process-content\">\r\n <h3>\u0627\u0644\u062c\u062f\u0648\u0644\u0629 \u0648\u0627\u0644\u0646\u0634\u0631<\/h3>\r\n <p>\r\n \u0628\u0646\u062c\u062f\u0648\u0644 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0646\u0646\u0634\u0631\u0647 \u0641\u064a \u0627\u0644\u062a\u0648\u0642\u064a\u062a \u0627\u0644\u0644\u064a \u0627\u0646\u062a \u0639\u0627\u064a\u0632\u0647. \u0628\u0646\u0636\u064a\u0641 \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0648\u0646\u062a\u0623\u0643\u062f \u0645\u0646 \u0627\u0644\u062a\u0646\u0633\u064a\u0642 \u0627\u0644\u0635\u062d \u0644\u0643\u0644 \u0645\u0646\u0635\u0629\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"process-step\">\r\n <div class=\"process-number\">05<\/div>\r\n <div class=\"process-content\">\r\n <h3>\u0627\u0644\u062a\u0623\u0643\u064a\u062f<\/h3>\r\n <p>\r\n \u0647\u062a\u0633\u062a\u0644\u0645 \u062a\u0623\u0643\u064a\u062f \u0644\u0645\u0627 \u0627\u0644\u0628\u0648\u0633\u062a\u0627\u062a \u062a\u0646\u0632\u0644. \u0648\u062a\u0642\u062f\u0631 \u062a\u0634\u0648\u0641 \u0627\u0644\u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0639\u0644\u0649 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u0639\u0644\u0649 \u0637\u0648\u0644\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"process-step\">\r\n <div class=\"process-number\">06<\/div>\r\n <div class=\"process-content\">\r\n <h3>\u062a\u0642\u0631\u064a\u0631 \u0634\u0647\u0631\u064a<\/h3>\r\n <p>\r\n \u0643\u0644 \u0634\u0647\u0631 \u0647\u062a\u0627\u062e\u062f \u0645\u0644\u062e\u0635 \u0628\u0643\u0644 \u0627\u0644\u0628\u0648\u0633\u062a\u0627\u062a \u0627\u0644\u0644\u064a \u0646\u0632\u0644\u062a\u060c \u0627\u0644\u0645\u0648\u0627\u0639\u064a\u062f\u060c \u0648\u0623\u0631\u0642\u0627\u0645 \u0627\u0644\u0648\u0635\u0648\u0644 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Benefits Section -->\r\n <section class=\"benefits-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <span class=\"section-label\">\u0644\u0645\u0627\u0630\u0627 \u062a\u062e\u062a\u0627\u0631\u0646\u0627<\/span>\r\n <h2 class=\"section-title\">\u0645\u0632\u0627\u064a\u0627 \u062e\u062f\u0645\u0629 \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627<\/h2>\r\n <p class=\"section-description\">\r\n \u062e\u062f\u0645\u0629 \u0646\u0634\u0631 \u0645\u0648\u062b\u0648\u0642\u0629 \u0648\u0645\u062a\u0633\u0642\u0629 \u0645\u0646 \u0634\u0631\u0643\u0629 \u0645\u0635\u0631\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0645\u062d\u0644\u064a \u0645\u0646\u0630 2015\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"benefits-grid\">\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\u23f0<\/div>\r\n <h4>\u0648\u0641\u0631 \u0648\u0642\u062a\u0643<\/h4>\r\n <p>\u0644\u0627 \u062d\u0627\u062c\u0629 \u0644\u062a\u0633\u062c\u064a\u0644 \u0627\u0644\u062f\u062e\u0648\u0644 \u064a\u0648\u0645\u064a\u0627\u064b \u0639\u0644\u0649 \u0643\u0644 \u0645\u0646\u0635\u0629<\/p>\r\n <\/div>\r\n\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\ud83d\udcc5<\/div>\r\n <h4>\u0646\u0634\u0631 \u0645\u0646\u062a\u0638\u0645 \u0648\u0645\u062a\u0633\u0642<\/h4>\r\n <p>\u0627\u062d\u0646\u0627 \u0628\u0646\u0646\u0634\u0631 \u0645\u062d\u062a\u0648\u0627\u0643 \u0641\u064a \u0627\u0644\u0645\u0648\u0627\u0639\u064a\u062f \u0627\u0644\u0645\u062d\u062f\u062f\u0629 \u0628\u062f\u0648\u0646 \u062a\u0623\u062e\u064a\u0631<\/p>\r\n <\/div>\r\n\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\ud83c\udf10<\/div>\r\n <h4>\u0646\u0634\u0631 \u0645\u062a\u0639\u062f\u062f \u0627\u0644\u0645\u0646\u0635\u0627\u062a<\/h4>\r\n <p>\u0627\u0646\u0634\u0631 \u0639\u0644\u0649 \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0627\u0646\u0633\u062a\u062c\u0631\u0627\u0645\u060c \u062a\u0648\u064a\u062a\u0631 \u0648\u0644\u064a\u0646\u0643\u062f \u0627\u0646 \u0645\u0631\u0629 \u0648\u0627\u062d\u062f\u0629<\/p>\r\n <\/div>\r\n\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\ud83c\uddea\ud83c\uddec<\/div>\r\n <h4>\u062e\u0628\u0631\u0629 \u0627\u0644\u0633\u0648\u0642 \u0627\u0644\u0645\u0635\u0631\u064a<\/h4>\r\n <p>\u0641\u0647\u0645 \u0639\u0645\u064a\u0642 \u0644\u062a\u0648\u0642\u064a\u062a\u0627\u062a \u0648\u0637\u0628\u064a\u0639\u0629 \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0635\u0631\u064a<\/p>\r\n <\/div>\r\n\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\u26a1<\/div>\r\n <h4>\u062e\u062f\u0645\u0629 \u0633\u0631\u064a\u0639\u0629<\/h4>\r\n <p>\u0646\u0634\u0631 \u0645\u062d\u062a\u0648\u0627\u0643 \u062e\u0644\u0627\u0644 24 \u0633\u0627\u0639\u0629 \u0645\u0646 \u0627\u0644\u0627\u0633\u062a\u0644\u0627\u0645<\/p>\r\n <\/div>\r\n\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\ud83d\udcb0<\/div>\r\n <h4>\u0623\u0633\u0639\u0627\u0631 \u062a\u0646\u0627\u0641\u0633\u064a\u0629<\/h4>\r\n <p>\u0628\u0627\u0642\u0627\u062a \u0628\u0623\u0633\u0639\u0627\u0631 \u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0644\u0633\u0648\u0642 \u0627\u0644\u0645\u0635\u0631\u064a<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Pricing Section -->\r\n <section class=\"pricing-section\" id=\"pricing\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <span class=\"section-label\">\u0627\u0644\u0628\u0627\u0642\u0627\u062a \u0627\u0644\u0633\u0639\u0631\u064a\u0629<\/span>\r\n <h2 class=\"section-title\">\u0628\u0627\u0642\u0627\u062a \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0641\u064a \u0645\u0635\u0631<\/h2>\r\n <p class=\"section-description\">\r\n \u0628\u0627\u0642\u0627\u062a \u0645\u0631\u0646\u0629 \u0628\u0623\u0633\u0639\u0627\u0631 \u062a\u0646\u0627\u0641\u0633\u064a\u0629 \u062a\u0646\u0627\u0633\u0628 \u0627\u0644\u0634\u0631\u0643\u0627\u062a \u0648\u0627\u0644\u0623\u0646\u0634\u0637\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0641\u064a \u0645\u0635\u0631. \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0633\u0639\u0627\u0631 \u0628\u0627\u0644\u062f\u0648\u0644\u0627\u0631 \u0627\u0644\u0623\u0645\u0631\u064a\u0643\u064a\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"pricing-grid\">\r\n <!-- Starter Plan -->\r\n <div class=\"pricing-card\">\r\n <div class=\"pricing-header\">\r\n <div class=\"pricing-name\">\u0627\u0644\u0645\u0628\u062a\u062f\u0626<\/div>\r\n <div class=\"pricing-price\">$100<\/div>\r\n <div class=\"pricing-period\">\u0634\u0647\u0631\u064a\u0627\u064b<\/div>\r\n <\/div>\r\n <ul class=\"pricing-features\">\r\n <li>\u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u062c\u0631\u0627\u0645 \u0648\u062a\u0648\u064a\u062a\u0631<\/li>\r\n <li>3 \u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0623\u0633\u0628\u0648\u0639\u064a\u0627\u064b (12 \u0634\u0647\u0631\u064a\u0627\u064b)<\/li>\r\n <li>\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0644\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0638\u0647\u0648\u0631<\/li>\r\n <li>\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0628\u0631\u0648\u0641\u0627\u064a\u0644<\/li>\r\n <li>\u0639\u0642\u062f \u0644\u0645\u062f\u0629 3 \u0623\u0634\u0647\u0631 \u0643\u062d\u062f \u0623\u062f\u0646\u0649<\/li>\r\n <\/ul>\r\n <a href=\"https:\/\/webbingstone.com\/contact-us\/\" class=\"pricing-button\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646<\/a>\r\n <\/div>\r\n\r\n <!-- Plus Plan - Featured -->\r\n <div class=\"pricing-card featured\">\r\n <div class=\"pricing-header\">\r\n <div class=\"pricing-name\">\u0628\u0644\u0633<\/div>\r\n <div class=\"pricing-price\">$150<\/div>\r\n <div class=\"pricing-period\">\u0634\u0647\u0631\u064a\u0627\u064b<\/div>\r\n <\/div>\r\n <ul class=\"pricing-features\">\r\n <li>\u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0625\u0646\u0633\u062a\u062c\u0631\u0627\u0645\u060c \u062a\u0648\u064a\u062a\u0631 \u0648\u0644\u064a\u0646\u0643\u062f \u0625\u0646<\/li>\r\n <li>4 \u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0623\u0633\u0628\u0648\u0639\u064a\u0627\u064b (16 \u0634\u0647\u0631\u064a\u0627\u064b)<\/li>\r\n <li>\u0644\u0648\u062d\u0629 \u062a\u062d\u0644\u064a\u0644\u0627\u062a 24\/7<\/li>\r\n <li>\u0645\u062f\u064a\u0631 \u062d\u0633\u0627\u0628 \u0645\u062e\u0635\u0635<\/li>\r\n <li>\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0647\u0627\u0634\u062a\u0627\u062c\u0627\u062a \u0644\u0644\u0646\u0645\u0648<\/li>\r\n <li>\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0628\u0631\u0648\u0641\u0627\u064a\u0644<\/li>\r\n <\/ul>\r\n <a href=\"https:\/\/webbingstone.com\/contact-us\/\" class=\"pricing-button\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646<\/a>\r\n <\/div>\r\n\r\n <!-- Advanced Plan -->\r\n <div class=\"pricing-card\">\r\n <div class=\"pricing-header\">\r\n <div class=\"pricing-name\">\u0627\u0644\u0645\u062a\u0642\u062f\u0645<\/div>\r\n <div class=\"pricing-price\">$200<\/div>\r\n <div class=\"pricing-period\">\u0634\u0647\u0631\u064a\u0627\u064b<\/div>\r\n <\/div>\r\n <ul class=\"pricing-features\">\r\n <li>\u0639\u062f\u062f \u063a\u064a\u0631 \u0645\u062d\u062f\u0648\u062f \u0645\u0646 \u0642\u0646\u0648\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627<\/li>\r\n <li>7 \u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0623\u0633\u0628\u0648\u0639\u064a\u0627\u064b (28 \u0634\u0647\u0631\u064a\u0627\u064b)<\/li>\r\n <li>\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u062d\u0633\u0627\u0628\u0627\u062a \u0645\u062a\u0636\u0645\u0646<\/li>\r\n <li>\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0645\u062a\u0636\u0645\u0646<\/li>\r\n <li>\u0644\u0648\u062d\u0629 \u062a\u062d\u0644\u064a\u0644\u0627\u062a 24\/7<\/li>\r\n <li>\u0645\u062f\u064a\u0631 \u062d\u0633\u0627\u0628 \u0645\u062e\u0635\u0635<\/li>\r\n <li>\u062f\u0639\u0645 \u0630\u0648 \u0623\u0648\u0644\u0648\u064a\u0629<\/li>\r\n <\/ul>\r\n <a href=\"https:\/\/webbingstone.com\/contact-us\/\" class=\"pricing-button\">\u0627\u0628\u062f\u0623 \u0627\u0644\u0622\u0646<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div style=\"text-align: center; margin-top: 60px; color: rgba(255, 255, 255, 0.7);\">\r\n <p style=\"font-size: 1.1rem; margin-bottom: 15px;\">\u26a0\ufe0f \u0643\u0644 \u0627\u0644\u0628\u0627\u0642\u0627\u062a \u062f\u064a \u0628\u062a\u0634\u0645\u0644 \u0627\u0644\u0646\u0634\u0631 \u0648\u0627\u0644\u062c\u062f\u0648\u0644\u0629 \u0628\u0633 - \u0627\u0646\u062a \u0628\u062a\u062c\u0647\u0632 \u0627\u0644\u0645\u062d\u062a\u0648\u0649<\/p>\r\n <p style=\"font-size: 0.95rem;\">\ud83d\udca1 \u0645\u062d\u062a\u0627\u062c \u062e\u062f\u0645\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0648\u0625\u0646\u0634\u0627\u0621 \u0645\u062d\u062a\u0648\u0649\u061f \u0643\u0644\u0645\u0646\u0627 \u0648\u0627\u062d\u0646\u0627 \u0646\u0639\u0645\u0644\u0643 \u0628\u0627\u0642\u0629 \u062e\u0627\u0635\u0629 \u0644\u064a\u0643<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- CTA Section -->\r\n <section class=\"cta-section\" id=\"contact\">\r\n <div class=\"container\">\r\n <div class=\"cta-content\">\r\n <h2>\u0627\u0628\u062f\u0623 \u062e\u062f\u0645\u0629 \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0641\u064a \u0645\u0635\u0631<\/h2>\r\n <p>\r\n \u0627\u0646\u0636\u0645 \u0644\u0623\u0643\u062b\u0631 \u0645\u0646 50 \u0639\u0645\u064a\u0644 \u0641\u064a \u0645\u0635\u0631 \u0648\u0627\u0644\u0634\u0631\u0642 \u0627\u0644\u0623\u0648\u0633\u0637 \u064a\u062b\u0642\u0648\u0646 \u0641\u064a \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0646\u0634\u0631 \u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u062f\u064a\u0646\u0627. \u0646\u062a\u0648\u0644\u0649 \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u062d\u0633\u0627\u0628\u0627\u062a\u0643 \u062d\u062a\u0649 \u062a\u062a\u0645\u0643\u0646 \u0645\u0646 \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u0649 \u0625\u062f\u0627\u0631\u0629 \u0648\u062a\u0637\u0648\u064a\u0631 \u0639\u0645\u0644\u0643\r\n <\/p>\r\n <a href=\"https:\/\/webbingstone.com\/contact-us\/\" class=\"btn btn-primary\">\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0645\u062c\u0627\u0646\u064a\u0629<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/div>\r\n\r\n<script>\r\n\/**\r\n * GSAP Animation System - Proper Loading with Fallback\r\n *\/\r\n(function() {\r\n 'use strict';\r\n\r\n \/\/ Step 1: Define all animation functions first\r\n function initGSAPAnimations() {\r\n \/\/ Verify GSAP is loaded\r\n if (typeof gsap === 'undefined') {\r\n console.warn('GSAP not loaded');\r\n return;\r\n }\r\n\r\n \/\/ Verify ScrollTrigger is loaded\r\n if (typeof ScrollTrigger === 'undefined') {\r\n console.warn('ScrollTrigger not loaded');\r\n return;\r\n }\r\n\r\n try {\r\n \/\/ Register ScrollTrigger plugin\r\n gsap.registerPlugin(ScrollTrigger);\r\n console.log('\u2713 GSAP and ScrollTrigger initialized');\r\n\r\n \/\/ Hero section animations\r\n animateHeroSection();\r\n\r\n \/\/ Section animations\r\n animateSectionLabels();\r\n animateSectionTitles();\r\n animateSectionDescriptions();\r\n\r\n \/\/ Card animations\r\n animateServiceCards();\r\n animateContentCards();\r\n animateProcessSteps();\r\n animateBenefitCards();\r\n animatePricingCards();\r\n\r\n \/\/ Other animations\r\n animateStatItems();\r\n animateCTASection();\r\n animateFloatingElements();\r\n \r\n \/\/ Smooth scrolling\r\n setupSmoothScroll();\r\n\r\n } catch (error) {\r\n console.error('GSAP animation error:', error);\r\n }\r\n }\r\n\r\n function animateHeroSection() {\r\n gsap.to('.social-media-page .hero h1', {\r\n opacity: 1,\r\n y: 0,\r\n duration: 1,\r\n delay: 0.3,\r\n ease: 'power3.out'\r\n });\r\n\r\n gsap.to('.social-media-page .hero-subtitle', {\r\n opacity: 1,\r\n y: 0,\r\n duration: 1,\r\n delay: 0.5,\r\n ease: 'power3.out'\r\n });\r\n\r\n gsap.to('.social-media-page .platform-icons', {\r\n opacity: 1,\r\n y: 0,\r\n duration: 1,\r\n delay: 0.7,\r\n ease: 'power3.out'\r\n });\r\n\r\n gsap.to('.social-media-page .hero-cta', {\r\n opacity: 1,\r\n y: 0,\r\n duration: 1,\r\n delay: 0.9,\r\n ease: 'power3.out'\r\n });\r\n }\r\n\r\n function animateSectionLabels() {\r\n gsap.utils.toArray('.social-media-page .section-label').forEach(label => {\r\n gsap.to(label, {\r\n opacity: 1,\r\n duration: 0.8,\r\n scrollTrigger: {\r\n trigger: label,\r\n start: 'top 80%',\r\n toggleActions: 'play none none reverse'\r\n }\r\n });\r\n });\r\n }\r\n\r\n function animateSectionTitles() {\r\n gsap.utils.toArray('.social-media-page .section-title').forEach(title => {\r\n gsap.to(title, {\r\n opacity: 1,\r\n duration: 0.8,\r\n delay: 0.2,\r\n scrollTrigger: {\r\n trigger: title,\r\n start: 'top 80%',\r\n toggleActions: 'play none none reverse'\r\n }\r\n });\r\n });\r\n }\r\n\r\n function animateSectionDescriptions() {\r\n gsap.utils.toArray('.social-media-page .section-description').forEach(desc => {\r\n gsap.to(desc, {\r\n opacity: 1,\r\n duration: 0.8,\r\n delay: 0.4,\r\n scrollTrigger: {\r\n trigger: desc,\r\n start: 'top 80%',\r\n toggleActions: 'play none none reverse'\r\n }\r\n });\r\n });\r\n }\r\n\r\n function animateServiceCards() {\r\n gsap.utils.toArray('.social-media-page .service-card').forEach((card, index) => {\r\n gsap.to(card, {\r\n opacity: 1,\r\n y: 0,\r\n duration: 0.8,\r\n delay: index * 0.1,\r\n scrollTrigger: {\r\n trigger: card,\r\n start: 'top 85%',\r\n toggleActions: 'play none none reverse'\r\n }\r\n });\r\n });\r\n }\r\n\r\n function animateContentCards() {\r\n gsap.utils.toArray('.social-media-page .content-card').forEach((card, index) => {\r\n gsap.to(card, {\r\n opacity: 1,\r\n scale: 1,\r\n duration: 0.5,\r\n delay: index * 0.05,\r\n scrollTrigger: {\r\n trigger: card,\r\n start: 'top 85%',\r\n toggleActions: 'play none none reverse'\r\n }\r\n });\r\n });\r\n }\r\n\r\n function animateProcessSteps() {\r\n gsap.utils.toArray('.social-media-page .process-step').forEach((step, index) => {\r\n gsap.to(step, {\r\n opacity: 1,\r\n x: 0,\r\n duration: 0.8,\r\n scrollTrigger: {\r\n trigger: step,\r\n start: 'top 80%',\r\n toggleActions: 'play none none reverse'\r\n }\r\n });\r\n });\r\n }\r\n\r\n function animateBenefitCards() {\r\n gsap.utils.toArray('.social-media-page .benefit-card').forEach((card, index) => {\r\n gsap.to(card, {\r\n opacity: 1,\r\n scale: 1,\r\n duration: 0.6,\r\n delay: index * 0.1,\r\n scrollTrigger: {\r\n trigger: card,\r\n start: 'top 85%',\r\n toggleActions: 'play none none reverse'\r\n }\r\n });\r\n });\r\n }\r\n\r\n function animatePricingCards() {\r\n gsap.utils.toArray('.social-media-page .pricing-card').forEach((card, index) => {\r\n gsap.to(card, {\r\n opacity: 1,\r\n y: 0,\r\n duration: 0.8,\r\n delay: index * 0.15,\r\n scrollTrigger: {\r\n trigger: card,\r\n start: 'top 85%',\r\n toggleActions: 'play none none reverse'\r\n }\r\n });\r\n });\r\n }\r\n\r\n function animateStatItems() {\r\n function animateCounter(element) {\r\n const target = parseInt(element.getAttribute('data-target'));\r\n const duration = 2000;\r\n const increment = target \/ (duration \/ 16);\r\n let current = 0;\r\n\r\n const timer = setInterval(() => {\r\n current += increment;\r\n if (current >= target) {\r\n element.textContent = target;\r\n clearInterval(timer);\r\n } else {\r\n element.textContent = Math.floor(current);\r\n }\r\n }, 16);\r\n }\r\n\r\n gsap.utils.toArray('.social-media-page .stat-item').forEach((item, index) => {\r\n gsap.to(item, {\r\n opacity: 1,\r\n y: 0,\r\n duration: 0.8,\r\n delay: index * 0.1,\r\n scrollTrigger: {\r\n trigger: item,\r\n start: 'top 85%',\r\n toggleActions: 'play none none reverse',\r\n onEnter: () => {\r\n const number = item.querySelector('.stat-number');\r\n if (number) animateCounter(number);\r\n }\r\n }\r\n });\r\n });\r\n }\r\n\r\n function animateCTASection() {\r\n gsap.to('.social-media-page .cta-content', {\r\n opacity: 1,\r\n y: 0,\r\n duration: 1,\r\n scrollTrigger: {\r\n trigger: '.social-media-page .cta-content',\r\n start: 'top 80%',\r\n toggleActions: 'play none none reverse'\r\n }\r\n });\r\n }\r\n\r\n function animateFloatingElements() {\r\n gsap.to('.social-media-page .floating-element:nth-child(1)', {\r\n y: 100,\r\n scrollTrigger: {\r\n trigger: '.social-media-page .hero',\r\n start: 'top top',\r\n end: 'bottom top',\r\n scrub: 1\r\n }\r\n });\r\n\r\n gsap.to('.social-media-page .floating-element:nth-child(2)', {\r\n y: -100,\r\n scrollTrigger: {\r\n trigger: '.social-media-page .hero',\r\n start: 'top top',\r\n end: 'bottom top',\r\n scrub: 1\r\n }\r\n });\r\n }\r\n\r\n function setupSmoothScroll() {\r\n document.querySelectorAll('.social-media-page a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function(e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) {\r\n target.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Step 2: Load GSAP and ScrollTrigger\r\n function loadGSAP() {\r\n \/\/ Create GSAP script element\r\n const gsapScript = document.createElement('script');\r\n gsapScript.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js';\r\n gsapScript.integrity = 'sha512-0gNUF1+ptdpX3q\/gOAVTnk2qL6RZp4h0aLc0KiFh81-VkBCCWwDEPIBp9xc+UWjfL+dZmWHLmJJ3JHF0KL9Cog==';\r\n gsapScript.crossOrigin = 'anonymous';\r\n gsapScript.referrerPolicy = 'no-referrer';\r\n\r\n gsapScript.onload = function() {\r\n console.log('\u2713 GSAP loaded from CDN');\r\n loadScrollTrigger();\r\n };\r\n\r\n gsapScript.onerror = function() {\r\n console.warn('\u2717 GSAP CDN failed, trying fallback...');\r\n loadGSAPFallback();\r\n };\r\n\r\n document.head.appendChild(gsapScript);\r\n }\r\n\r\n function loadScrollTrigger() {\r\n const scrollTriggerScript = document.createElement('script');\r\n scrollTriggerScript.src = 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js';\r\n scrollTriggerScript.integrity = 'sha512-tPf6yNAzdz1tqbp++B0kW55bGbMBnMWABJOZnBWPq3Q5FAhj8VZvWlh5ZVV5\/1FxmCXi+cEFqiSLSs6fN3fKKQ==';\r\n scrollTriggerScript.crossOrigin = 'anonymous';\r\n scrollTriggerScript.referrerPolicy = 'no-referrer';\r\n\r\n scrollTriggerScript.onload = function() {\r\n console.log('\u2713 ScrollTrigger loaded from CDN');\r\n initGSAPAnimations();\r\n };\r\n\r\n scrollTriggerScript.onerror = function() {\r\n console.warn('\u2717 ScrollTrigger CDN failed, trying fallback...');\r\n loadScrollTriggerFallback();\r\n };\r\n\r\n document.head.appendChild(scrollTriggerScript);\r\n }\r\n\r\n function loadGSAPFallback() {\r\n const gsapScript = document.createElement('script');\r\n gsapScript.src = 'https:\/\/unpkg.com\/gsap@3.12.5\/dist\/gsap.min.js';\r\n\r\n gsapScript.onload = function() {\r\n console.log('\u2713 GSAP loaded from fallback CDN');\r\n loadScrollTrigger();\r\n };\r\n\r\n gsapScript.onerror = function() {\r\n console.error('\u2717 Failed to load GSAP from all sources');\r\n };\r\n\r\n document.head.appendChild(gsapScript);\r\n }\r\n\r\n function loadScrollTriggerFallback() {\r\n const scrollTriggerScript = document.createElement('script');\r\n scrollTriggerScript.src = 'https:\/\/unpkg.com\/gsap@3.12.5\/dist\/ScrollTrigger.min.js';\r\n\r\n scrollTriggerScript.onload = function() {\r\n console.log('\u2713 ScrollTrigger loaded from fallback CDN');\r\n initGSAPAnimations();\r\n };\r\n\r\n scrollTriggerScript.onerror = function() {\r\n console.error('\u2717 Failed to load ScrollTrigger from all sources');\r\n };\r\n\r\n document.head.appendChild(scrollTriggerScript);\r\n }\r\n\r\n \/\/ Step 3: Start loading when DOM is ready\r\n if (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', loadGSAP);\r\n } else {\r\n loadGSAP();\r\n }\r\n})();\r\n<\/script>\r\n\r\n<!-- Structured Data for Egyptian SEO -->\r\n<script type=\"application\/ld+json\">\r\n{\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"Service\",\r\n \"name\": \"\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627\",\r\n \"description\": \"\u062e\u062f\u0645\u0627\u062a \u0646\u0634\u0631 \u0648\u062c\u062f\u0648\u0644\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0639\u0644\u0649 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 - \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0627\u0646\u0633\u062a\u062c\u0631\u0627\u0645\u060c \u062a\u0648\u064a\u062a\u0631 \u0648\u0644\u064a\u0646\u0643\u062f \u0627\u0646 \u0641\u064a \u0645\u0635\u0631\",\r\n \"provider\": {\r\n \"@type\": \"Organization\",\r\n \"name\": \"WebbingStone\",\r\n \"url\": \"https:\/\/webbingstone.com\",\r\n \"logo\": \"https:\/\/webbingstone.com\/logo.png\",\r\n \"address\": {\r\n \"@type\": \"PostalAddress\",\r\n \"addressCountry\": \"EG\",\r\n \"addressLocality\": \"Cairo\",\r\n \"addressRegion\": \"Cairo\"\r\n },\r\n \"contactPoint\": {\r\n \"@type\": \"ContactPoint\",\r\n \"contactType\": \"Customer Service\",\r\n \"availableLanguage\": [\"Arabic\", \"English\"]\r\n }\r\n },\r\n \"areaServed\": {\r\n \"@type\": \"Country\",\r\n \"name\": \"Egypt\"\r\n },\r\n \"offers\": [\r\n {\r\n \"@type\": \"Offer\",\r\n \"name\": \"\u0628\u0627\u0642\u0629 \u0627\u0644\u0645\u0628\u062a\u062f\u0626\",\r\n \"price\": \"100\",\r\n \"priceCurrency\": \"USD\",\r\n \"description\": \"3 \u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0623\u0633\u0628\u0648\u0639\u064a\u0627\u064b \u0639\u0644\u0649 \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0627\u0646\u0633\u062a\u062c\u0631\u0627\u0645 \u0648\u062a\u0648\u064a\u062a\u0631\"\r\n },\r\n {\r\n \"@type\": \"Offer\",\r\n \"name\": \"\u0628\u0627\u0642\u0629 \u0628\u0644\u0633\",\r\n \"price\": \"150\",\r\n \"priceCurrency\": \"USD\",\r\n \"description\": \"4 \u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0623\u0633\u0628\u0648\u0639\u064a\u0627\u064b \u0639\u0644\u0649 4 \u0645\u0646\u0635\u0627\u062a \u0645\u0639 \u0644\u0648\u062d\u0629 \u062a\u062d\u0644\u064a\u0644\u0627\u062a\"\r\n },\r\n {\r\n \"@type\": \"Offer\",\r\n \"name\": \"\u0628\u0627\u0642\u0629 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\",\r\n \"price\": \"200\",\r\n \"priceCurrency\": \"USD\",\r\n \"description\": \"7 \u0645\u0646\u0634\u0648\u0631\u0627\u062a \u0623\u0633\u0628\u0648\u0639\u064a\u0627\u064b \u0639\u0644\u0649 \u0639\u062f\u062f \u063a\u064a\u0631 \u0645\u062d\u062f\u0648\u062f \u0645\u0646 \u0627\u0644\u0645\u0646\u0635\u0627\u062a\"\r\n }\r\n ],\r\n \"serviceType\": \"Social Media Posting Service\",\r\n \"aggregateRating\": {\r\n \"@type\": \"AggregateRating\",\r\n \"ratingValue\": \"4.9\",\r\n \"reviewCount\": \"50\"\r\n }\r\n}\r\n<\/script>\r\n\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>\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0641\u064a \u0645\u0635\u0631 | WebbingStone \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 \u0641\u064a \u0645\u0635\u0631 \u0646\u0634\u0631 \u0648\u062c\u062f\u0648\u0644\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u0645\u062d\u062a\u0648\u0627\u0643 \u0639\u0628\u0631 \u062c\u0645\u064a\u0639 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 – \u0641\u064a\u0633\u0628\u0648\u0643\u060c \u0627\u0646\u0633\u062a\u062c\u0631\u0627\u0645\u060c \u062a\u0648\u064a\u062a\u0631 \u0648\u0644\u064a\u0646\u0643\u062f \u0627\u0646. \u062e\u062f\u0645\u0629 \u0645\u0648\u062b\u0648\u0642\u0629 \u0645\u0646 \u0627\u0644\u0642\u0627\u0647\u0631\u0629 \u0644\u062c\u0645\u064a\u0639 \u0623\u0646\u062d\u0627\u0621 \u0645\u0635\u0631 \ud83d\udcd8 \ud83d\udcf7 \ud83d\udc26 \ud83d\udcbc \u25b6\ufe0f \ud83c\udfb5 \u0627\u0628\u062f\u0623 \u0627\u0644\u064a\u0648\u0645 \u0634\u0627\u0647\u062f \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0645\u0627 \u0646\u0642\u062f\u0645\u0647 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0646\u0634\u0631 \u0639\u0644\u0649 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627 […]<\/p>\n","protected":false},"featured_media":1244,"template":"","meta":{"footnotes":""},"portfolio_cat":[],"portfolio_skills":[],"class_list":["post-9557","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio\/9557","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\/9557\/revisions"}],"predecessor-version":[{"id":21153,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio\/9557\/revisions\/21153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/media\/1244"}],"wp:attachment":[{"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/media?parent=9557"}],"wp:term":[{"taxonomy":"portfolio_cat","embeddable":true,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio_cat?post=9557"},{"taxonomy":"portfolio_skills","embeddable":true,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio_skills?post=9557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}