{"id":1696,"date":"2021-06-13T15:45:55","date_gmt":"2021-06-13T13:45:55","guid":{"rendered":"https:\/\/webbingstone.com\/service\/video-animation\/"},"modified":"2026-01-28T15:25:01","modified_gmt":"2026-01-28T13:25:01","slug":"%d9%81%d9%8a%d8%af%d9%8a%d9%88-%d8%aa%d8%b1%d9%88%d9%8a%d8%ac%d9%8a","status":"publish","type":"portfolio","link":"https:\/\/webbingstone.com\/ar\/service\/%d9%81%d9%8a%d8%af%d9%8a%d9%88-%d8%aa%d8%b1%d9%88%d9%8a%d8%ac%d9%8a\/","title":{"rendered":"\u0641\u064a\u062f\u064a\u0648 \u062a\u0631\u0648\u064a\u062c\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 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\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 --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: 'Segoe UI', 'Arial', 'Tahoma', sans-serif;\r\n background: #000;\r\n color: #fff;\r\n overflow-x: hidden;\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 left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: \r\n radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 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) { left: 10%; animation-delay: 0s; animation-duration: 12s; }\r\n .particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 14s; }\r\n .particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 16s; }\r\n .particle:nth-child(4) { left: 40%; animation-delay: 1s; animation-duration: 13s; }\r\n .particle:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 15s; }\r\n .particle:nth-child(6) { left: 60%; animation-delay: 5s; animation-duration: 17s; }\r\n .particle:nth-child(7) { left: 70%; animation-delay: 2s; animation-duration: 14s; }\r\n .particle:nth-child(8) { left: 80%; animation-delay: 4s; animation-duration: 16s; }\r\n .particle:nth-child(9) { left: 90%; animation-delay: 1s; animation-duration: 13s; }\r\n .particle:nth-child(10) { left: 15%; animation-delay: 6s; animation-duration: 18s; }\r\n .particle:nth-child(11) { left: 25%; animation-delay: 3s; animation-duration: 11s; }\r\n .particle:nth-child(12) { left: 35%; animation-delay: 5s; animation-duration: 19s; }\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 animation: fadeInDown 0.8s ease;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n @keyframes fadeInDown {\r\n from { opacity: 0; transform: translateY(-30px); }\r\n to { opacity: 1; transform: translateY(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 .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 animation: fadeInUp 0.8s ease 0.2s both;\r\n line-height: 1.4;\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 animation: fadeInUp 0.8s ease 0.4s both;\r\n line-height: 2;\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.6s both;\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 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 left: 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 backdrop-filter: blur(10px);\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 \/* 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: 60px;\r\n animation: fadeInUp 0.8s ease 0.8s both;\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 left: 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 left: 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 width: 100%;\r\n }\r\n\r\n .btn {\r\n width: 100%;\r\n }\r\n\r\n .hero-stats {\r\n gap: 40px;\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 <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Hero Section -->\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 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\">\ud83c\udfac \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u0627\u0644\u0645\u062a\u0645\u064a\u0632\u0629<\/div>\r\n \r\n <h1>\u0627\u062c\u0639\u0644 \u0623\u0641\u0643\u0627\u0631\u0643 \u062a\u0646\u0628\u0636 \u0628\u0627\u0644\u062d\u064a\u0627\u0629 \u0645\u0639 \u0631\u0633\u0648\u0645 \u0645\u062a\u062d\u0631\u0643\u0629 \u0645\u0630\u0647\u0644\u0629<\/h1>\r\n \r\n <p>\u062d\u0648\u0651\u0644 \u0642\u0635\u0629 \u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0625\u0644\u0649 \u0645\u0642\u0627\u0637\u0639 \u0641\u064a\u062f\u064a\u0648 \u0645\u062a\u062d\u0631\u0643\u0629 \u062c\u0630\u0627\u0628\u0629 \u062a\u0634\u0631\u0643 \u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0648\u062a\u0644\u0647\u0645\u0647 \u0648\u062a\u062d\u0642\u0642 \u0646\u062a\u0627\u0626\u062c \u0645\u0628\u0647\u0631\u0629. \u062c\u0648\u062f\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0628\u0623\u0633\u0639\u0627\u0631 \u0645\u0639\u0642\u0648\u0644\u0629.<\/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\u0622\u0646<\/span>\r\n <\/a>\r\n <a href=\"#services\" class=\"btn btn-secondary\">\r\n <span>\u0634\u0627\u0647\u062f \u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/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\">+500<\/span>\r\n <span class=\"stat-label\">\u0641\u064a\u062f\u064a\u0648 \u0645\u0646\u062a\u062c<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">98%<\/span>\r\n <span class=\"stat-label\">\u0631\u0636\u0627 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/span>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <span class=\"stat-number\">+50<\/span>\r\n <span class=\"stat-label\">\u0642\u0637\u0627\u0639 \u0645\u062e\u062f\u0648\u0645<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"scroll-indicator\"><\/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<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b070537 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b070537\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"gradient"}\">\r\n\t\t\r\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-1605262\" data-id=\"1605262\" data-element_type=\"column\" data-e-type=\"column\">\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-07d573c elementor-widget elementor-widget-video\" data-id=\"07d573c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"vimeo"}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo \u0645\u0634\u063a\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\" src=\"https:\/\/player.vimeo.com\/video\/1158625426?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-7174e45\" data-id=\"7174e45\" data-element_type=\"column\" data-e-type=\"column\">\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3c144d8 elementor-widget elementor-widget-video\" data-id=\"3c144d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"vimeo","start":0}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo \u0645\u0634\u063a\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\" src=\"https:\/\/player.vimeo.com\/video\/1158794908?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-87b4086\" data-id=\"87b4086\" data-element_type=\"column\" data-e-type=\"column\">\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3bcbb58 elementor-widget elementor-widget-video\" data-id=\"3bcbb58\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"vimeo"}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo \u0645\u0634\u063a\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\" src=\"https:\/\/player.vimeo.com\/video\/1158625111?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-177a52b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"177a52b\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"gradient"}\">\r\n\t\t\r\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-1463b63\" data-id=\"1463b63\" data-element_type=\"column\" data-e-type=\"column\">\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-da4b60c elementor-widget elementor-widget-video\" data-id=\"da4b60c\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"vimeo"}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo \u0645\u0634\u063a\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\" src=\"https:\/\/player.vimeo.com\/video\/641539873?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-2cd5f92\" data-id=\"2cd5f92\" data-element_type=\"column\" data-e-type=\"column\">\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b53e1fb elementor-widget elementor-widget-video\" data-id=\"b53e1fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"vimeo"}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo \u0645\u0634\u063a\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\" src=\"https:\/\/player.vimeo.com\/video\/227833176?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-bb0bf1f\" data-id=\"bb0bf1f\" data-element_type=\"column\" data-e-type=\"column\">\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0998d71 elementor-widget elementor-widget-video\" data-id=\"0998d71\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"vimeo"}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo \u0645\u0634\u063a\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\" src=\"https:\/\/player.vimeo.com\/video\/444567423?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ac6be1b elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"ac6be1b\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"gradient"}\">\r\n\t\t\r\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\r\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-bd048ed\" data-id=\"bd048ed\" data-element_type=\"column\" data-e-type=\"column\">\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d1ec7ad elementor-widget elementor-widget-video\" data-id=\"d1ec7ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"vimeo"}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo \u0645\u0634\u063a\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\" src=\"https:\/\/player.vimeo.com\/video\/1158794969?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-a67b179\" data-id=\"a67b179\" data-element_type=\"column\" data-e-type=\"column\">\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-68780a3 elementor-widget elementor-widget-video\" data-id=\"68780a3\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"vimeo"}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo \u0645\u0634\u063a\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\" src=\"https:\/\/player.vimeo.com\/video\/1158796613?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-bb2edee\" data-id=\"bb2edee\" data-element_type=\"column\" data-e-type=\"column\">\r\n\t\t\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\r\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f2334a4 elementor-widget elementor-widget-video\" data-id=\"f2334a4\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{"video_type":"vimeo"}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<iframe class=\"elementor-video-iframe\" allowfullscreen allow=\"clipboard-write\" title=\"vimeo \u0645\u0634\u063a\u0644 \u0627\u0644\u0641\u064a\u062f\u064a\u0648\" src=\"https:\/\/player.vimeo.com\/video\/1158796451?color&autopause=0&loop=0&muted=0&title=0&portrait=0&byline=0#t=\"><\/iframe>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/section>\r\n\t\t<div class=\"elementor-element elementor-element-f657545 e-con-full e-flex e-con e-parent\" data-id=\"f657545\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-0ffedcb elementor-widget elementor-widget-html\" data-id=\"0ffedcb\" 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=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Services Section - 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: 'Segoe UI', 'Arial', 'Tahoma', 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, #24243e 0%, #0f0c29 100%);\r\n overflow: hidden;\r\n }\r\n\r\n \/* Animated background overlay *\/\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 30% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 70% 80%, rgba(238, 89, 70, 0.1) 0%, transparent 50%);\r\n animation: pulseBackground 8s ease infinite;\r\n }\r\n\r\n @keyframes pulseBackground {\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 animation: fadeInDown 0.8s ease;\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 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: 600px;\r\n margin: 0 auto;\r\n line-height: 2;\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 animation: fadeInUp 0.8s ease both;\r\n }\r\n\r\n .service-card:nth-child(1) { animation-delay: 0.6s; }\r\n .service-card:nth-child(2) { animation-delay: 0.7s; }\r\n .service-card:nth-child(3) { animation-delay: 0.8s; }\r\n .service-card:nth-child(4) { animation-delay: 0.9s; }\r\n .service-card:nth-child(5) { animation-delay: 1s; }\r\n .service-card:nth-child(6) { animation-delay: 1.1s; }\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: right;\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 text-align: right;\r\n }\r\n\r\n .service-card p {\r\n color: rgba(255, 255, 255, 0.7);\r\n line-height: 2;\r\n margin-bottom: 25px;\r\n text-align: right;\r\n }\r\n\r\n .service-features {\r\n list-style: none;\r\n text-align: right;\r\n }\r\n\r\n .service-features li {\r\n padding: 10px 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 flex-direction: row;\r\n justify-content: flex-end;\r\n }\r\n\r\n .service-card:hover .service-features li {\r\n color: rgba(255, 255, 255, 0.8);\r\n }\r\n\r\n .service-features li::after {\r\n content: '\u2713';\r\n color: var(--color-coral);\r\n font-weight: bold;\r\n margin-right: 12px;\r\n font-size: 1.2rem;\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<\/head>\r\n<body>\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 <div class=\"section-badge\">\u062e\u062f\u0645\u0627\u062a\u0646\u0627<\/div>\r\n <h2>\u0645\u0627 \u0646\u0642\u062f\u0645\u0647<\/h2>\r\n <p>\u0645\u0646 \u0645\u0642\u0627\u0637\u0639 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629 \u0625\u0644\u0649 \u0631\u0633\u0648\u0645 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629\u060c \u0646\u0642\u062f\u0645 \u0631\u0633\u0648\u0645\u0627\u062a \u0645\u062a\u062d\u0631\u0643\u0629 \u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062c\u0648\u062f\u0629 \u062a\u062c\u0639\u0644 \u0631\u0633\u0627\u0644\u062a\u0643 \u0644\u0627 \u062a\u064f\u0646\u0633\u0649.<\/p>\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83c\udfaf<\/div>\r\n <h3>\u0645\u0642\u0627\u0637\u0639 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629<\/h3>\r\n <p>\u0628\u0633\u0651\u0637 \u0627\u0644\u0623\u0641\u0643\u0627\u0631 \u0627\u0644\u0645\u0639\u0642\u062f\u0629 \u0648\u0639\u0632\u0632 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\u0627\u062a \u0645\u0639 \u0645\u0642\u0627\u0637\u0639 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u0627\u0644\u062c\u0630\u0627\u0628\u0629.<\/p>\r\n <ul class=\"service-features\">\r\n <li>\u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0646\u0635\u0648\u0635 \u0648\u0627\u0644\u0642\u0635\u0635 \u0627\u0644\u0645\u0635\u0648\u0631\u0629<\/li>\r\n <li>\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0634\u062e\u0635\u064a\u0627\u062a \u0627\u0644\u0645\u062e\u0635\u0635\u0629<\/li>\r\n <li>\u062a\u0639\u0644\u064a\u0642 \u0635\u0648\u062a\u064a \u0627\u062d\u062a\u0631\u0627\u0641\u064a<\/li>\r\n <li>\u0645\u0648\u0633\u064a\u0642\u0649 \u062e\u0644\u0641\u064a\u0629 \u0648\u0645\u0624\u062b\u0631\u0627\u062a \u0635\u0648\u062a\u064a\u0629<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83c\udfa8<\/div>\r\n <h3>\u0631\u0633\u0648\u0645 \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629<\/h3>\r\n <p>\u0627\u0631\u0641\u0639 \u0647\u0648\u064a\u0629 \u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0645\u0639 \u0631\u0633\u0648\u0645 \u0627\u0644\u0634\u0639\u0627\u0631 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u0648\u0627\u0644\u0645\u0648\u0634\u0646 \u062c\u0631\u0627\u0641\u064a\u0643 \u0627\u0644\u062c\u0630\u0627\u0628\u0629.<\/p>\r\n <ul class=\"service-features\">\r\n <li>\u0631\u0633\u0648\u0645 \u0627\u0644\u0634\u0639\u0627\u0631 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629<\/li>\r\n <li>\u0645\u0642\u0627\u0637\u0639 \u0641\u064a\u062f\u064a\u0648 \u0642\u0635\u0629 \u0627\u0644\u0639\u0644\u0627\u0645\u0629 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629<\/li>\r\n <li>\u0645\u062d\u062a\u0648\u0649 \u0648\u0633\u0627\u0626\u0644 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a<\/li>\r\n <li>\u0645\u0642\u062f\u0645\u0627\u062a \u0648\u062e\u0648\u0627\u062a\u0645 \u0627\u0644\u0641\u064a\u062f\u064a\u0648<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83d\udcf1<\/div>\r\n <h3>\u0645\u0642\u0627\u0637\u0639 \u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u0633\u0648\u0634\u064a\u0627\u0644 \u0645\u064a\u062f\u064a\u0627<\/h3>\r\n <p>\u0623\u0646\u0634\u0626 \u0645\u062d\u062a\u0648\u0649 \u062c\u0630\u0627\u0628 \u0645\u062d\u0633\u0651\u0646 \u0644\u062c\u0645\u064a\u0639 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0627\u062c\u062a\u0645\u0627\u0639\u064a.<\/p>\r\n <ul class=\"service-features\">\r\n <li>\u0631\u064a\u0644\u0632 \u0648\u0633\u062a\u0648\u0631\u064a\u0632 \u0627\u0646\u0633\u062a\u062c\u0631\u0627\u0645<\/li>\r\n <li>\u0645\u062d\u062a\u0648\u0649 \u062a\u064a\u0643 \u062a\u0648\u0643<\/li>\r\n <li>\u0645\u0642\u062f\u0645\u0627\u062a \u064a\u0648\u062a\u064a\u0648\u0628<\/li>\r\n <li>\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0641\u064a\u062f\u064a\u0648 \u0641\u064a\u0633\u0628\u0648\u0643<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83c\udf93<\/div>\r\n <h3>\u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a<\/h3>\r\n <p>\u0627\u062c\u0639\u0644 \u0627\u0644\u062a\u0639\u0644\u0645 \u062c\u0630\u0627\u0628\u0627\u064b \u0645\u0639 \u0645\u0642\u0627\u0637\u0639 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u0648\u0627\u0644\u062f\u0631\u0648\u0633 \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629.<\/p>\r\n <ul class=\"service-features\">\r\n <li>\u0645\u0642\u0627\u0637\u0639 \u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u062a\u062f\u0631\u064a\u0628<\/li>\r\n <li>\u0645\u062d\u062a\u0648\u0649 \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/li>\r\n <li>\u0631\u0633\u0648\u0645 \u062a\u0648\u0636\u064a\u062d\u064a\u0629 \u0645\u062a\u062d\u0631\u0643\u0629<\/li>\r\n <li>\u0645\u0642\u0627\u0637\u0639 \u0641\u064a\u062f\u064a\u0648 \u0625\u0646\u0641\u0648\u062c\u0631\u0627\u0641\u064a\u0643<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83d\udcbc<\/div>\r\n <h3>\u0645\u0642\u0627\u0637\u0639 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u0645\u0624\u0633\u0633\u064a\u0629<\/h3>\r\n <p>\u0631\u0633\u0648\u0645 \u0645\u062a\u062d\u0631\u0643\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u0644\u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629 \u0648\u0627\u0644\u0639\u0631\u0648\u0636 \u0627\u0644\u062a\u0642\u062f\u064a\u0645\u064a\u0629.<\/p>\r\n <ul class=\"service-features\">\r\n <li>\u0639\u0631\u0648\u0636 \u0627\u0644\u0634\u0631\u0643\u0629 \u0627\u0644\u062a\u0642\u062f\u064a\u0645\u064a\u0629<\/li>\r\n <li>\u0639\u0631\u0648\u0636 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629<\/li>\r\n <li>\u0627\u0644\u062a\u0642\u0627\u0631\u064a\u0631 \u0627\u0644\u0633\u0646\u0648\u064a\u0629<\/li>\r\n <li>\u0645\u0642\u0627\u0637\u0639 \u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u0641\u0639\u0627\u0644\u064a\u0627\u062a<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\ud83d\udecd\ufe0f<\/div>\r\n <h3>\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629<\/h3>\r\n <p>\u0627\u0639\u0631\u0636 \u0645\u0646\u062a\u062c\u0627\u062a\u0643 \u0628\u0631\u0633\u0648\u0645 \u0645\u062a\u062d\u0631\u0643\u0629 \u062b\u0646\u0627\u0626\u064a\u0629 \u0627\u0644\u0623\u0628\u0639\u0627\u062f \u062a\u0628\u0631\u0632 \u0627\u0644\u0645\u0645\u064a\u0632\u0627\u062a.<\/p>\r\n <ul class=\"service-features\">\r\n <li>\u0639\u0631\u0648\u0636 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0627\u0644\u062a\u0648\u0636\u064a\u062d\u064a\u0629<\/li>\r\n <li>\u0625\u0628\u0631\u0627\u0632 \u0627\u0644\u0645\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/li>\r\n <li>\u062c\u0648\u0644\u0627\u062a \u0648\u0627\u062c\u0647\u0629 \u0627\u0644\u062a\u0637\u0628\u064a\u0642\u0627\u062a<\/li>\r\n <li>\u0645\u0642\u0627\u0637\u0639 \u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u062a\u062c\u0627\u0631\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/li>\r\n <\/ul>\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<div class=\"elementor-element elementor-element-ad12ac8 e-con-full e-flex e-con e-parent\" data-id=\"ad12ac8\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-7d76fa5 elementor-widget elementor-widget-html\" data-id=\"7d76fa5\" 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=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Process Section - 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: 'Segoe UI', 'Arial', 'Tahoma', sans-serif;\r\n background: #000;\r\n color: #fff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Process Section *\/\r\n .process-section {\r\n padding: 120px 20px;\r\n background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Animated background *\/\r\n .process-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 animation: fadeInDown 0.8s ease;\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 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: 600px;\r\n margin: 0 auto;\r\n line-height: 2;\r\n animation: fadeInUp 0.8s ease 0.4s both;\r\n }\r\n\r\n .process-timeline {\r\n position: relative;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Connecting line *\/\r\n .process-timeline::before {\r\n content: '';\r\n position: absolute;\r\n right: 40px;\r\n top: 50px;\r\n bottom: 50px;\r\n width: 2px;\r\n background: linear-gradient(180deg, var(--color-purple) 0%, var(--color-coral) 100%);\r\n opacity: 0.3;\r\n }\r\n\r\n .process-step {\r\n position: relative;\r\n padding: 40px 100px 40px 40px;\r\n margin-bottom: 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 animation: slideInLeft 0.8s ease both;\r\n }\r\n\r\n .process-step:nth-child(1) { animation-delay: 0.6s; }\r\n .process-step:nth-child(2) { animation-delay: 0.7s; }\r\n .process-step:nth-child(3) { animation-delay: 0.8s; }\r\n .process-step:nth-child(4) { animation-delay: 0.9s; }\r\n .process-step:nth-child(5) { animation-delay: 1s; }\r\n\r\n @keyframes slideInLeft {\r\n from { opacity: 0; transform: translateX(30px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n\r\n .process-step:hover {\r\n border-color: rgba(102, 126, 234, 0.3);\r\n transform: translateX(-10px);\r\n box-shadow: 0 10px 40px rgba(102, 126, 234, 0.15);\r\n }\r\n\r\n .step-number {\r\n position: absolute;\r\n top: 40px;\r\n right: 15px;\r\n width: 50px;\r\n height: 50px;\r\n background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-coral) 100%);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);\r\n z-index: 2;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .process-step:hover .step-number {\r\n transform: scale(1.15) rotate(360deg);\r\n }\r\n\r\n .process-step h3 {\r\n font-size: 1.6rem;\r\n margin-bottom: 15px;\r\n font-weight: 600;\r\n color: #fff;\r\n text-align: right;\r\n }\r\n\r\n .process-step p {\r\n color: rgba(255, 255, 255, 0.7);\r\n line-height: 2;\r\n font-size: 1rem;\r\n text-align: right;\r\n }\r\n\r\n .step-icon {\r\n position: absolute;\r\n top: 40px;\r\n left: 40px;\r\n font-size: 2.5rem;\r\n opacity: 0.1;\r\n transition: all 0.4s ease;\r\n }\r\n\r\n .process-step:hover .step-icon {\r\n opacity: 0.3;\r\n transform: scale(1.2) rotate(10deg);\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .process-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 .process-timeline::before {\r\n right: 20px;\r\n }\r\n\r\n .process-step {\r\n padding: 30px 80px 30px 20px;\r\n }\r\n\r\n .step-number {\r\n right: 5px;\r\n top: 30px;\r\n width: 45px;\r\n height: 45px;\r\n font-size: 1.1rem;\r\n }\r\n\r\n .step-icon {\r\n display: none;\r\n }\r\n\r\n .process-step h3 {\r\n font-size: 1.3rem;\r\n }\r\n\r\n .process-step p {\r\n font-size: 0.95rem;\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 .process-step {\r\n padding: 25px 70px 25px 15px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .step-number {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 1rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Process Section -->\r\n <section class=\"process-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\u0639\u0645\u0644\u064a\u062a\u0646\u0627<\/div>\r\n <h2>\u0643\u064a\u0641 \u0646\u0639\u0645\u0644<\/h2>\r\n <p>\u0639\u0645\u0644\u064a\u0629 \u0645\u0628\u0633\u0637\u0629 \u062a\u0636\u0645\u0646 \u062a\u062d\u0648\u064a\u0644 \u0631\u0624\u064a\u062a\u0643 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639 \u062a\u0645\u0627\u0645\u0627\u064b \u0643\u0645\u0627 \u062a\u0635\u0648\u0631\u062a\u0647\u0627.<\/p>\r\n <\/div>\r\n\r\n <div class=\"process-timeline\">\r\n <div class=\"process-step\">\r\n <div class=\"step-number\">1<\/div>\r\n <div class=\"step-icon\">\ud83d\udca1<\/div>\r\n <h3>\u0627\u0644\u0627\u0643\u062a\u0634\u0627\u0641 \u0648\u0627\u0644\u062a\u062e\u0637\u064a\u0637<\/h3>\r\n <p>\u0646\u0628\u062f\u0623 \u0628\u0641\u0647\u0645 \u0623\u0647\u062f\u0627\u0641\u0643 \u0648\u0627\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641 \u0648\u0631\u0633\u0627\u0644\u062a\u0643. \u0645\u0639\u0627\u064b\u060c \u0646\u062d\u062f\u062f \u0623\u0633\u0644\u0648\u0628 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0648\u0646\u0628\u0631\u062a\u0647 \u0648\u0627\u0644\u0623\u0647\u062f\u0627\u0641 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0636\u0645\u0627\u0646 \u0627\u0644\u062a\u0648\u0627\u0641\u0642 \u0627\u0644\u062a\u0627\u0645 \u0645\u0639 \u0631\u0624\u064a\u062a\u0643.<\/p>\r\n <\/div>\r\n\r\n <div class=\"process-step\">\r\n <div class=\"step-number\">2<\/div>\r\n <div class=\"step-icon\">\ud83d\udcdd<\/div>\r\n <h3>\u0627\u0644\u0646\u0635 \u0648\u0627\u0644\u0642\u0635\u0629 \u0627\u0644\u0645\u0635\u0648\u0631\u0629<\/h3>\r\n <p>\u064a\u0642\u0648\u0645 \u0641\u0631\u064a\u0642\u0646\u0627 \u0627\u0644\u0625\u0628\u062f\u0627\u0639\u064a \u0628\u0635\u064a\u0627\u063a\u0629 \u0646\u0635 \u0645\u0642\u0646\u0639 \u0648\u0642\u0635\u0629 \u0645\u0635\u0648\u0631\u0629 \u0645\u0641\u0635\u0644\u0629 \u062a\u062d\u0648\u0644 \u0645\u0641\u0647\u0648\u0645\u0643 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639 \u0639\u0644\u0649 \u0627\u0644\u0648\u0631\u0642 \u0642\u0628\u0644 \u0628\u062f\u0621 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629. \u0648\u0647\u0630\u0627 \u064a\u0636\u0645\u0646 \u0623\u0646 \u0643\u0644 \u0625\u0637\u0627\u0631 \u064a\u062e\u062f\u0645 \u0631\u0633\u0627\u0644\u062a\u0643.<\/p>\r\n <\/div>\r\n\r\n <div class=\"process-step\">\r\n <div class=\"step-number\">3<\/div>\r\n <div class=\"step-icon\">\ud83c\udfa8<\/div>\r\n <h3>\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629<\/h3>\r\n <p>\u0646\u0642\u0648\u0645 \u0628\u0625\u0646\u0634\u0627\u0621 \u0631\u0633\u0648\u0645 \u062a\u0648\u0636\u064a\u062d\u064a\u0629 \u0645\u062e\u0635\u0635\u0629 \u0648\u0646\u062d\u0631\u0643 \u0643\u0644 \u0625\u0637\u0627\u0631 \u0628\u062f\u0642\u0629\u060c \u0645\u0645\u0627 \u064a\u0636\u0645\u0646 \u0627\u0644\u062d\u0631\u0643\u0629 \u0627\u0644\u0633\u0644\u0633\u0629 \u0648\u0627\u0644\u062c\u0627\u0630\u0628\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629 \u0641\u064a \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0648\u0642\u0627\u062a. \u062a\u062a\u0623\u0644\u0642 \u0634\u062e\u0635\u064a\u0629 \u0639\u0644\u0627\u0645\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0641\u064a \u0643\u0644 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644.<\/p>\r\n <\/div>\r\n\r\n <div class=\"process-step\">\r\n <div class=\"step-number\">4<\/div>\r\n <div class=\"step-icon\">\ud83d\udd04<\/div>\r\n <h3>\u0627\u0644\u0645\u0631\u0627\u062c\u0639\u0629 \u0648\u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a<\/h3>\r\n <p>\u062a\u0642\u0648\u0645 \u0628\u0645\u0631\u0627\u062c\u0639\u0629 \u0627\u0644\u0631\u0633\u0648\u0645 \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629 \u0648\u062a\u0642\u062f\u064a\u0645 \u0645\u0644\u0627\u062d\u0638\u0627\u062a\u0643. \u0646\u0642\u0648\u0645 \u0628\u0625\u062c\u0631\u0627\u0621 \u0627\u0644\u062a\u0639\u062f\u064a\u0644\u0627\u062a \u062d\u062a\u0649 \u062a\u062a\u0637\u0627\u0628\u0642 \u0643\u0644 \u0627\u0644\u062a\u0641\u0627\u0635\u064a\u0644 \u0645\u0639 \u0631\u0624\u064a\u062a\u0643 \u0628\u0634\u0643\u0644 \u0645\u062b\u0627\u0644\u064a. \u0631\u0636\u0627\u0643 \u0647\u0648 \u0623\u0648\u0644\u0648\u064a\u062a\u0646\u0627.<\/p>\r\n <\/div>\r\n\r\n <div class=\"process-step\">\r\n <div class=\"step-number\">5<\/div>\r\n <div class=\"step-icon\">\ud83d\ude80<\/div>\r\n <h3>\u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u0627\u0644\u0646\u0647\u0627\u0626\u064a<\/h3>\r\n <p>\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0627\u0644\u0641\u064a\u062f\u064a\u0648 \u0627\u0644\u0646\u0647\u0627\u0626\u064a \u0628\u062a\u0646\u0633\u064a\u0642\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629\u060c \u0645\u062d\u0633\u0651\u0646 \u0644\u0644\u0645\u0646\u0635\u0627\u062a \u0627\u0644\u0645\u062d\u062f\u062f\u0629 \u0648\u062c\u0627\u0647\u0632 \u0644\u0644\u0646\u0634\u0631 \u0641\u0648\u0631\u0627\u064b. \u062a\u062a\u0636\u0645\u0646 \u0627\u0644\u0628\u0627\u0642\u0627\u062a \u0627\u0644\u0645\u0645\u064a\u0632\u0629 \u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0645\u0635\u062f\u0631 \u0627\u0644\u0643\u0627\u0645\u0644\u0629.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\r\n\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-5ef0931 e-con-full e-flex e-con e-parent\" data-id=\"5ef0931\" data-element_type=\"container\" data-e-type=\"container\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-f66e84b elementor-widget elementor-widget-html\" data-id=\"f66e84b\" 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=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Pricing Section - 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: 'Segoe UI', 'Arial', 'Tahoma', sans-serif;\r\n background: #000;\r\n color: #fff;\r\n overflow-x: hidden;\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 \/* Animated background *\/\r\n .pricing-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 20% 30%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 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 animation: fadeInDown 0.8s ease;\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 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: 600px;\r\n margin: 0 auto;\r\n line-height: 2;\r\n animation: fadeInUp 0.8s ease 0.4s both;\r\n }\r\n\r\n .pricing-cards {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n max-width: 1100px;\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: right;\r\n transition: all 0.4s ease;\r\n animation: fadeInUp 0.8s ease both;\r\n }\r\n\r\n .pricing-card:nth-child(1) { animation-delay: 0.6s; }\r\n .pricing-card:nth-child(2) { animation-delay: 0.7s; }\r\n .pricing-card:nth-child(3) { animation-delay: 0.8s; }\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: 20px;\r\n left: 20px;\r\n padding: 6px 16px;\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 }\r\n\r\n .pricing-card:hover {\r\n transform: translateY(-10px) scale(1.02);\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 transform: translateY(-10px) scale(1.07);\r\n }\r\n\r\n .pricing-card h3 {\r\n font-size: 1.8rem;\r\n margin-bottom: 15px;\r\n font-weight: 600;\r\n color: #fff;\r\n text-align: right;\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 text-align: center;\r\n width: 100%;\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 flex-direction: row;\r\n justify-content: flex-end;\r\n text-align: right;\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::after {\r\n content: '\u2713';\r\n color: var(--color-coral);\r\n font-weight: bold;\r\n margin-right: 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 text-align: center;\r\n }\r\n\r\n .btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 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: 968px) {\r\n .pricing-card.featured {\r\n transform: scale(1);\r\n }\r\n\r\n .pricing-card.featured:hover {\r\n transform: translateY(-10px) scale(1.02);\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 {\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 <!-- Pricing Section -->\r\n <section class=\"pricing-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <div class=\"section-badge\">\u0627\u0644\u0623\u0633\u0639\u0627\u0631<\/div>\r\n <h2>\u0628\u0627\u0642\u0627\u062a \u0628\u0623\u0633\u0639\u0627\u0631 \u0645\u0639\u0642\u0648\u0644\u0629<\/h2>\r\n <p>\u062e\u062f\u0645\u0627\u062a \u0631\u0633\u0648\u0645 \u0645\u062a\u062d\u0631\u0643\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0628\u0623\u0633\u0639\u0627\u0631 \u0644\u0627 \u062a\u064f\u062b\u0642\u0644 \u0645\u064a\u0632\u0627\u0646\u064a\u062a\u0643. \u0627\u062e\u062a\u0631 \u0627\u0644\u0628\u0627\u0642\u0629 \u0627\u0644\u062a\u064a \u062a\u0646\u0627\u0633\u0628 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pricing-cards\">\r\n <div class=\"pricing-card\">\r\n <h3>\u0627\u0644\u0645\u0628\u062a\u062f\u0626<\/h3>\r\n <div class=\"price\">$300<span>\/\u0641\u064a\u062f\u064a\u0648<\/span><\/div>\r\n <ul class=\"pricing-features\">\r\n <li>\u0631\u0633\u0648\u0645 \u0645\u062a\u062d\u0631\u0643\u0629 \u0644\u0645\u062f\u0629 30 \u062b\u0627\u0646\u064a\u0629<\/li>\r\n <li>\u0642\u0635\u0629 \u0645\u0635\u0648\u0631\u0629 \u0623\u0633\u0627\u0633\u064a\u0629<\/li>\r\n <li>\u062a\u0639\u062f\u064a\u0644\u0627\u0646<\/li>\r\n <li>\u062a\u0635\u062f\u064a\u0631 \u0628\u062c\u0648\u062f\u0629 \u0639\u0627\u0644\u064a\u0629 HD<\/li>\r\n <li>\u0645\u0648\u0633\u064a\u0642\u0649 \u062e\u0644\u0641\u064a\u0629<\/li>\r\n <li>\u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u0641\u064a 7 \u0623\u064a\u0627\u0645<\/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 <div class=\"pricing-card featured\">\r\n <h3>\u0627\u0644\u0627\u062d\u062a\u0631\u0627\u0641\u064a<\/h3>\r\n <div class=\"price\">$600<span>\/\u0641\u064a\u062f\u064a\u0648<\/span><\/div>\r\n <ul class=\"pricing-features\">\r\n <li>\u0631\u0633\u0648\u0645 \u0645\u062a\u062d\u0631\u0643\u0629 \u0644\u0645\u062f\u0629 60 \u062b\u0627\u0646\u064a\u0629<\/li>\r\n <li>\u0642\u0635\u0629 \u0645\u0635\u0648\u0631\u0629 \u0645\u0641\u0635\u0644\u0629<\/li>\r\n <li>\u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0646\u0635 \u0645\u0634\u0645\u0648\u0644\u0629<\/li>\r\n <li>4 \u062a\u0639\u062f\u064a\u0644\u0627\u062a<\/li>\r\n <li>\u062a\u0639\u0644\u064a\u0642 \u0635\u0648\u062a\u064a \u0627\u062d\u062a\u0631\u0627\u0641\u064a<\/li>\r\n <li>\u062a\u0635\u0645\u064a\u0645 \u0635\u0648\u062a\u064a \u0645\u062e\u0635\u0635<\/li>\r\n <li>\u0627\u0644\u062a\u0633\u0644\u064a\u0645 \u0641\u064a 5 \u0623\u064a\u0627\u0645<\/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 <div class=\"pricing-card\">\r\n <h3>\u0627\u0644\u0645\u0645\u064a\u0632<\/h3>\r\n <div class=\"price\">$900<span>\/\u0641\u064a\u062f\u064a\u0648<\/span><\/div>\r\n <ul class=\"pricing-features\">\r\n <li>\u0631\u0633\u0648\u0645 \u0645\u062a\u062d\u0631\u0643\u0629 \u0644\u0645\u062f\u0629 90 \u062b\u0627\u0646\u064a\u0629<\/li>\r\n <li>\u0642\u0635\u0629 \u0645\u0635\u0648\u0631\u0629 \u0645\u062a\u0642\u062f\u0645\u0629<\/li>\r\n <li>\u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0646\u0635 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0641\u0647\u0648\u0645<\/li>\r\n <li>\u062a\u0639\u062f\u064a\u0644\u0627\u062a \u063a\u064a\u0631 \u0645\u062d\u062f\u0648\u062f\u0629<\/li>\r\n <li>\u062e\u064a\u0627\u0631 \u062a\u0639\u0644\u064a\u0642 \u0635\u0648\u062a\u064a \u0645\u0634\u0647\u0648\u0631<\/li>\r\n <li>\u062a\u0635\u0645\u064a\u0645 \u0635\u0648\u062a\u064a \u0643\u0627\u0645\u0644<\/li>\r\n <li>\u062a\u0633\u0644\u064a\u0645 \u0630\u0648 \u0623\u0648\u0644\u0648\u064a\u0629 \u0641\u064a 3 \u0623\u064a\u0627\u0645<\/li>\r\n <li>\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0645\u0635\u062f\u0631 \u0645\u0634\u0645\u0648\u0644\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 <\/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>\u0625\u0646\u0634\u0627\u0621 \u0645\u0642\u0627\u0637\u0639 \u0641\u064a\u062f\u064a\u0648 \u0645\u062a\u062d\u0631\u0643\u0629 \u0647\u0648 \u0637\u0631\u064a\u0642\u0629 \u0633\u0631\u064a\u0639\u0629 \u0648\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u062a\u0648\u0635\u064a\u0644 \u0623\u0641\u0643\u0627\u0631\u0643 \u0623\u0648 \u0627\u0644\u062a\u0631\u0648\u064a\u062c \u0644\u0639\u0645\u0644\u0643 \u0625\u0644\u0649 \u062c\u0645\u0647\u0648\u0631\u0643.<\/p>\n","protected":false},"featured_media":1234,"template":"","meta":{"footnotes":""},"portfolio_cat":[],"portfolio_skills":[],"class_list":["post-1696","portfolio","type-portfolio","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio\/1696","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\/1696\/revisions"}],"predecessor-version":[{"id":21367,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio\/1696\/revisions\/21367"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/media\/1234"}],"wp:attachment":[{"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/media?parent=1696"}],"wp:term":[{"taxonomy":"portfolio_cat","embeddable":true,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio_cat?post=1696"},{"taxonomy":"portfolio_skills","embeddable":true,"href":"https:\/\/webbingstone.com\/ar\/wp-json\/wp\/v2\/portfolio_skills?post=1696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}