{"id":48,"date":"2025-02-21T10:08:47","date_gmt":"2025-02-21T10:08:47","guid":{"rendered":"https:\/\/archi2.oceanthemes.site\/electric\/?page_id=48"},"modified":"2026-05-10T22:31:27","modified_gmt":"2026-05-10T22:31:27","slug":"home","status":"publish","type":"page","link":"https:\/\/noname-co.store\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\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 Hero | NNC<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@300;400;600;700;900&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --bg-primary: #050510;\r\n --accent-primary: #00d4ff;\r\n --accent-secondary: #7b2fff;\r\n --accent-tertiary: #ff2d7b;\r\n --accent-gold: #ffd700;\r\n --text-primary: #ffffff;\r\n --text-secondary: rgba(255, 255, 255, 0.7);\r\n --text-muted: rgba(255, 255, 255, 0.4);\r\n --glass-bg: rgba(255, 255, 255, 0.03);\r\n --glass-border: rgba(255, 255, 255, 0.08);\r\n --gradient-main: linear-gradient(135deg, #00d4ff 0%, #7b2fff 50%, #ff2d7b 100%);\r\n --gradient-subtle: linear-gradient(135deg, #00d4ff 0%, #7b2fff 100%);\r\n }\r\n\r\n body {\r\n font-family: 'Tajawal', sans-serif;\r\n background: var(--bg-primary);\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Hero Section *\/\r\n .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 z-index: 1;\r\n padding: 8rem 2rem 4rem;\r\n overflow: hidden;\r\n }\r\n\r\n \/* ===== VIDEO BACKGROUND ===== *\/\r\n .hero-bg-video {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-bg-video video {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n \/* Dark overlay on top of video *\/\r\n .hero-bg-video::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(5, 5, 16, 0.65);\r\n z-index: 1;\r\n }\r\n\r\n \/* Floating orbs over video *\/\r\n .hero-bg-video .hero-orb-1 {\r\n position: absolute;\r\n width: 500px;\r\n height: 500px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(0, 212, 255, 0.15) 0%, transparent 70%);\r\n top: 10%;\r\n left: 10%;\r\n animation: heroOrb1 12s ease-in-out infinite;\r\n filter: blur(40px);\r\n z-index: 2;\r\n }\r\n\r\n .hero-bg-video .hero-orb-2 {\r\n position: absolute;\r\n width: 400px;\r\n height: 400px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(123, 47, 255, 0.15) 0%, transparent 70%);\r\n top: 20%;\r\n right: 15%;\r\n animation: heroOrb2 15s ease-in-out infinite;\r\n filter: blur(50px);\r\n z-index: 2;\r\n }\r\n\r\n .hero-bg-video .hero-orb-3 {\r\n position: absolute;\r\n width: 350px;\r\n height: 350px;\r\n border-radius: 50%;\r\n background: radial-gradient(circle, rgba(255, 45, 123, 0.1) 0%, transparent 70%);\r\n bottom: 10%;\r\n left: 40%;\r\n animation: heroOrb3 18s ease-in-out infinite;\r\n filter: blur(45px);\r\n z-index: 2;\r\n }\r\n\r\n @keyframes heroOrb1 {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(80px, 40px) scale(1.15); }\r\n 66% { transform: translate(-40px, 60px) scale(0.9); }\r\n }\r\n\r\n @keyframes heroOrb2 {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(-60px, 50px) scale(0.85); }\r\n 66% { transform: translate(50px, -30px) scale(1.1); }\r\n }\r\n\r\n @keyframes heroOrb3 {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 50% { transform: translate(60px, -40px) scale(1.2); }\r\n }\r\n\r\n \/* Hero Content *\/\r\n .hero-content {\r\n max-width: 1200px;\r\n text-align: center;\r\n position: relative;\r\n z-index: 3;\r\n }\r\n\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.6rem;\r\n padding: 0.5rem 1.5rem;\r\n background: var(--glass-bg);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 50px;\r\n font-size: 0.9rem;\r\n color: var(--accent-primary);\r\n margin-bottom: 2rem;\r\n backdrop-filter: blur(10px);\r\n animation: fadeInDown 0.8s ease forwards;\r\n }\r\n\r\n .hero-badge .dot {\r\n width: 8px;\r\n height: 8px;\r\n background: var(--accent-primary);\r\n border-radius: 50%;\r\n animation: pulse 2s infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.5; transform: scale(1.5); }\r\n }\r\n\r\n \/* ===== ANIMATED TITLE ===== *\/\r\n .hero-title {\r\n font-family: 'Cairo', sans-serif;\r\n font-size: clamp(2.5rem, 7vw, 5.5rem);\r\n font-weight: 900;\r\n line-height: 1.15;\r\n margin-bottom: 1.5rem;\r\n animation: titleReveal 1s ease 0.2s both;\r\n color: var(--text-primary);\r\n overflow: hidden;\r\n }\r\n\r\n .hero-title .line {\r\n display: block;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-title .line span {\r\n display: inline-block;\r\n animation: lineSlideUp 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;\r\n }\r\n\r\n .hero-title .line:nth-child(1) span { animation-delay: 0.3s; }\r\n .hero-title .line:nth-child(2) span { animation-delay: 0.5s; }\r\n\r\n @keyframes lineSlideUp {\r\n from {\r\n transform: translateY(110%);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n \/* Glitch effect on gradient text *\/\r\n .gradient-text {\r\n background: var(--gradient-main);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n position: relative;\r\n display: inline-block;\r\n animation: gradientShift 4s ease infinite, textGlow 2s ease-in-out infinite alternate;\r\n }\r\n\r\n @keyframes gradientShift {\r\n 0%, 100% {\r\n background-position: 0% 50%;\r\n }\r\n 50% {\r\n background-position: 100% 50%;\r\n }\r\n }\r\n\r\n .gradient-text {\r\n background-size: 200% 200%;\r\n }\r\n\r\n @keyframes textGlow {\r\n 0% {\r\n filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.4));\r\n }\r\n 50% {\r\n filter: drop-shadow(0 0 20px rgba(123, 47, 255, 0.6));\r\n }\r\n 100% {\r\n filter: drop-shadow(0 0 12px rgba(255, 45, 123, 0.4));\r\n }\r\n }\r\n\r\n \/* Letter by letter stagger *\/\r\n .gradient-text .char {\r\n display: inline-block;\r\n animation: charPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;\r\n background: var(--gradient-main);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .gradient-text .char:nth-child(1) { animation-delay: 0.7s; }\r\n .gradient-text .char:nth-child(2) { animation-delay: 0.75s; }\r\n .gradient-text .char:nth-child(3) { animation-delay: 0.8s; }\r\n .gradient-text .char:nth-child(4) { animation-delay: 0.85s; }\r\n .gradient-text .char:nth-child(5) { animation-delay: 0.9s; }\r\n .gradient-text .char:nth-child(6) { animation-delay: 0.95s; }\r\n .gradient-text .char:nth-child(7) { animation-delay: 1.0s; }\r\n .gradient-text .char:nth-child(8) { animation-delay: 1.05s; }\r\n .gradient-text .char:nth-child(9) { animation-delay: 1.1s; }\r\n .gradient-text .char:nth-child(10) { animation-delay: 1.15s; }\r\n .gradient-text .char:nth-child(11) { animation-delay: 1.2s; }\r\n .gradient-text .char:nth-child(12) { animation-delay: 1.25s; }\r\n .gradient-text .char:nth-child(13) { animation-delay: 1.3s; }\r\n .gradient-text .char:nth-child(14) { animation-delay: 1.35s; }\r\n .gradient-text .char:nth-child(15) { animation-delay: 1.4s; }\r\n\r\n @keyframes charPop {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(40px) rotateX(-90deg) scale(0.5);\r\n }\r\n 60% {\r\n transform: translateY(-5px) rotateX(10deg) scale(1.05);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0) rotateX(0deg) scale(1);\r\n }\r\n }\r\n\r\n @keyframes titleReveal {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n .hero-subtitle {\r\n font-size: clamp(1rem, 2vw, 1.3rem);\r\n color: var(--text-secondary);\r\n max-width: 700px;\r\n margin: 0 auto 3rem;\r\n font-weight: 400;\r\n animation: fadeInUp 0.8s ease 1.5s both;\r\n }\r\n\r\n .hero-buttons {\r\n display: flex;\r\n justify-content: center;\r\n gap: 1rem;\r\n flex-wrap: wrap;\r\n animation: fadeInUp 0.8s ease 1.7s both;\r\n }\r\n\r\n .btn-primary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n padding: 1rem 2.5rem;\r\n background: var(--gradient-subtle);\r\n color: #fff;\r\n text-decoration: none;\r\n border-radius: 16px;\r\n font-weight: 700;\r\n font-size: 1.05rem;\r\n transition: transform 0.3s, box-shadow 0.3s;\r\n box-shadow: 0 4px 30px rgba(0, 212, 255, 0.3);\r\n }\r\n\r\n .btn-primary:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 40px rgba(0, 212, 255, 0.4);\r\n }\r\n\r\n .btn-secondary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n padding: 1rem 2.5rem;\r\n background: transparent;\r\n color: var(--text-primary);\r\n text-decoration: none;\r\n border-radius: 16px;\r\n font-weight: 600;\r\n font-size: 1.05rem;\r\n border: 1px solid var(--glass-border);\r\n transition: all 0.3s;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: rgba(255, 255, 255, 0.05);\r\n border-color: var(--accent-primary);\r\n transform: translateY(-3px);\r\n }\r\n\r\n .stats-bar {\r\n display: flex;\r\n justify-content: center;\r\n gap: 3rem;\r\n margin-top: 5rem;\r\n flex-wrap: wrap;\r\n animation: fadeInUp 0.8s ease 1.9s both;\r\n }\r\n\r\n .stat-item {\r\n text-align: center;\r\n position: relative;\r\n }\r\n\r\n .stat-item:not(:last-child)::after {\r\n content: '';\r\n position: absolute;\r\n left: -1.5rem;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 1px;\r\n height: 40px;\r\n background: var(--glass-border);\r\n }\r\n\r\n .stat-number {\r\n font-family: 'Cairo', sans-serif;\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n background: var(--gradient-main);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .stat-label {\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n margin-top: 0.3rem;\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 @keyframes fadeInDown {\r\n from { opacity: 0; transform: translateY(-20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero { padding: 7rem 1.5rem 3rem; }\r\n .stats-bar { gap: 1.5rem; }\r\n .stat-item:not(:last-child)::after { display: none; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"hero\">\r\n\r\n <!-- ===== VIDEO BACKGROUND ===== -->\r\n <div class=\"hero-bg-video\">\r\n <video autoplay muted loop playsinline>\r\n <source src=\"https:\/\/noname-co.store\/wp-content\/uploads\/2025\/11\/Rotating_Cubes_Video_Generation.mp4\" type=\"video\/mp4\">\r\n <\/video>\r\n <div class=\"hero-orb-1\"><\/div>\r\n <div class=\"hero-orb-2\"><\/div>\r\n <div class=\"hero-orb-3\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-content\">\r\n <div class=\"hero-badge\">\r\n <span class=\"dot\"><\/span>\r\n \u062d\u0644\u0648\u0644 \u0631\u0642\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0646\u062c\u0627\u062d \u0623\u0639\u0645\u0627\u0644\u0643\r\n <\/div>\r\n\r\n <h1 class=\"hero-title\">\r\n <span class=\"line\"><span>\u062d\u0648\u0651\u0644 \u0623\u0641\u0643\u0627\u0631\u0643 \u0625\u0644\u0649<\/span><\/span>\r\n <span class=\"line\"><span class=\"gradient-text\">\u0648\u0627\u0642\u0639 \u0631\u0642\u0645\u064a \u0645\u0628\u0647\u0631<\/span><\/span>\r\n <\/h1>\r\n\r\n <p class=\"hero-subtitle\">\r\n \u0646\u0642\u062f\u0645 \u0644\u0643 \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647 \u0644\u0628\u0646\u0627\u0621 \u062d\u0636\u0648\u0631 \u0631\u0642\u0645\u064a \u0642\u0648\u064a \u2014 \u0645\u0646 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0623\u062a\u0645\u062a\u0629 \u0648\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u062d\u0645\u0644\u0627\u062a \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u0627\u0644\u0645\u0628\u062a\u0643\u0631\u0629\r\n <\/p>\r\n <div class=\"hero-buttons\">\r\n <a href=\"#contact\" class=\"btn-primary\">\r\n <span class=\"material-symbols-outlined\">rocket_launch<\/span>\r\n \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0644\u0622\u0646\r\n <\/a>\r\n <a href=\"#services\" class=\"btn-secondary\">\r\n <span class=\"material-symbols-outlined\">visibility<\/span>\r\n \u0627\u0633\u062a\u0643\u0634\u0641 \u062e\u062f\u0645\u0627\u062a\u0646\u0627\r\n <\/a>\r\n <\/div>\r\n <div class=\"stats-bar\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\">150+<\/div>\r\n <div class=\"stat-label\">\u0645\u0634\u0631\u0648\u0639 \u0645\u0643\u062a\u0645\u0644<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\">80+<\/div>\r\n <div class=\"stat-label\">\u0639\u0645\u064a\u0644 \u0633\u0639\u064a\u062f<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\">5+<\/div>\r\n <div class=\"stat-label\">\u0633\u0646\u0648\u0627\u062a \u062e\u0628\u0631\u0629<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-number\">24\/7<\/div>\r\n <div class=\"stat-label\">\u062f\u0639\u0645 \u0645\u0633\u062a\u0645\u0631<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e68f58b e-con-full e-flex e-con e-parent\" data-id=\"e68f58b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4526848 elementor-widget elementor-widget-html\" data-id=\"4526848\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <link rel=\"icon\" href=\"https:\/\/public-frontend-cos.metadl.com\/mgx\/img\/favicon_atoms.ico\" type=\"image\/x-icon\">\r\n <title>\u062e\u062f\u0645\u0627\u062a\u0646\u0627 \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Cairo', sans-serif;\r\n background: linear-gradient(135deg, #0a0a0f 0%, #12121a 100%);\r\n color: #fff;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* Service Section *\/\r\n .service-section {\r\n padding: 80px 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .service-container {\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n padding: 0 40px;\r\n display: flex;\r\n align-items: center;\r\n gap: 60px;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .service-container.reverse {\r\n flex-direction: row-reverse;\r\n }\r\n\r\n \/* Image Wrapper *\/\r\n .service-image-wrapper {\r\n flex: 1;\r\n position: relative;\r\n border-radius: 30px;\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateX(-30px);\r\n transition: all 0.8s ease;\r\n }\r\n\r\n .service-image-wrapper.reveal-left {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .service-image-wrapper.reveal-right {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .image-glow {\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n border-radius: 50%;\r\n z-index: -1;\r\n }\r\n\r\n .glow-purple {\r\n background: radial-gradient(circle, rgba(108, 99, 255, 0.3) 0%, transparent 70%);\r\n }\r\n\r\n .glow-red {\r\n background: radial-gradient(circle, rgba(255, 107, 107, 0.3) 0%, transparent 70%);\r\n }\r\n\r\n .glow-teal {\r\n background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);\r\n }\r\n\r\n .glow-gold {\r\n background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);\r\n }\r\n\r\n .glow-green {\r\n background: radial-gradient(circle, rgba(0, 255, 136, 0.3) 0%, transparent 70%);\r\n }\r\n\r\n .service-image {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 30px;\r\n transition: transform 0.5s ease;\r\n }\r\n\r\n .service-image-wrapper:hover .service-image {\r\n transform: scale(1.05);\r\n }\r\n\r\n .image-overlay {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n border-radius: 20px;\r\n padding: 12px 16px;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .overlay-icon {\r\n font-size: 24px;\r\n }\r\n\r\n \/* Content *\/\r\n .service-content {\r\n flex: 1;\r\n text-align: center;\r\n opacity: 0;\r\n transform: translateX(30px);\r\n transition: all 0.8s ease;\r\n }\r\n\r\n .service-content.reveal-left {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .service-content.reveal-right {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .service-number {\r\n font-size: 80px;\r\n font-weight: 900;\r\n background: linear-gradient(135deg, #6C63FF, #00D4FF);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n margin-bottom: 16px;\r\n opacity: 0.5;\r\n }\r\n\r\n .service-tag {\r\n display: inline-block;\r\n padding: 6px 18px;\r\n border-radius: 50px;\r\n font-size: 14px;\r\n font-weight: 700;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .tag-purple {\r\n background: rgba(108, 99, 255, 0.15);\r\n color: #6C63FF;\r\n border: 1px solid rgba(108, 99, 255, 0.4);\r\n }\r\n\r\n .tag-red {\r\n background: rgba(255, 107, 107, 0.15);\r\n color: #FF6B6B;\r\n border: 1px solid rgba(255, 107, 107, 0.4);\r\n }\r\n\r\n .tag-teal {\r\n background: rgba(0, 212, 255, 0.15);\r\n color: #00D4FF;\r\n border: 1px solid rgba(0, 212, 255, 0.4);\r\n }\r\n\r\n .tag-gold {\r\n background: rgba(255, 215, 0, 0.15);\r\n color: #FFD700;\r\n border: 1px solid rgba(255, 215, 0, 0.4);\r\n }\r\n\r\n .tag-green {\r\n background: rgba(0, 255, 136, 0.15);\r\n color: #00FF88;\r\n border: 1px solid rgba(0, 255, 136, 0.4);\r\n }\r\n\r\n .service-title {\r\n font-size: 36px;\r\n font-weight: 800;\r\n margin-bottom: 20px;\r\n line-height: 1.3;\r\n }\r\n\r\n .service-desc {\r\n color: #8888AA;\r\n font-size: 16px;\r\n line-height: 1.7;\r\n margin-bottom: 40px;\r\n max-width: 500px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n \/* Carousel Styles *\/\r\n .features-carousel {\r\n position: relative;\r\n max-width: 500px;\r\n margin: 0 auto;\r\n overflow: hidden;\r\n border-radius: 20px;\r\n }\r\n\r\n .carousel-container {\r\n overflow: hidden;\r\n border-radius: 20px;\r\n }\r\n\r\n .carousel-track {\r\n display: flex;\r\n transition: transform 0.5s ease-in-out;\r\n }\r\n\r\n .carousel-slide {\r\n min-width: 100%;\r\n padding: 0 10px;\r\n }\r\n\r\n .feature-item {\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid rgba(255, 255, 255, 0.08);\r\n border-radius: 16px;\r\n padding: 30px 20px;\r\n transition: all 0.3s ease;\r\n text-align: center;\r\n }\r\n\r\n .feature-item:hover {\r\n transform: translateY(-5px);\r\n background: rgba(108, 99, 255, 0.1);\r\n border-color: rgba(108, 99, 255, 0.3);\r\n }\r\n\r\n .feature-icon {\r\n font-size: 48px;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .feature-text h4 {\r\n font-size: 18px;\r\n font-weight: 700;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .feature-text p {\r\n font-size: 14px;\r\n color: #8888AA;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Carousel Navigation *\/\r\n .carousel-nav {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 15px;\r\n margin-top: 25px;\r\n }\r\n\r\n .carousel-button {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 50%;\r\n background: rgba(108, 99, 255, 0.2);\r\n border: 1px solid rgba(108, 99, 255, 0.4);\r\n color: #fff;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n font-size: 18px;\r\n }\r\n\r\n .carousel-button:hover {\r\n background: rgba(108, 99, 255, 0.5);\r\n transform: scale(1.1);\r\n }\r\n\r\n .carousel-dots {\r\n display: flex;\r\n gap: 10px;\r\n }\r\n\r\n .dot {\r\n width: 8px;\r\n height: 8px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.3);\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .dot.active {\r\n width: 25px;\r\n border-radius: 4px;\r\n background: linear-gradient(135deg, #6C63FF, #00D4FF);\r\n }\r\n\r\n \/* CTA Section *\/\r\n .cta-section {\r\n padding: 80px 20px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .cta-container {\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background: linear-gradient(135deg, rgba(108, 99, 255, 0.15), rgba(0, 212, 255, 0.1));\r\n border: 1px solid rgba(108, 99, 255, 0.3);\r\n border-radius: 40px;\r\n padding: 60px 40px;\r\n text-align: center;\r\n position: relative;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 0.8s ease;\r\n }\r\n\r\n .cta-container.reveal-up {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\r\n .cta-glow {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n width: 400px;\r\n height: 200px;\r\n background: radial-gradient(ellipse, rgba(108, 99, 255, 0.3) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .cta-container h2 {\r\n font-size: 36px;\r\n font-weight: 800;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .cta-container p {\r\n color: #8888AA;\r\n font-size: 18px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n .cta-button {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n background: linear-gradient(135deg, #6C63FF, #00D4FF);\r\n color: #fff;\r\n text-decoration: none;\r\n padding: 16px 40px;\r\n border-radius: 50px;\r\n font-weight: 700;\r\n font-size: 18px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 8px 32px rgba(108, 99, 255, 0.4);\r\n }\r\n\r\n .cta-button:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 48px rgba(108, 99, 255, 0.6);\r\n }\r\n\r\n .cta-button svg {\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .cta-button:hover svg {\r\n transform: translateX(-5px);\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 1024px) {\r\n .service-container {\r\n flex-direction: column;\r\n gap: 40px;\r\n }\r\n .service-container.reverse {\r\n flex-direction: column;\r\n }\r\n .service-content {\r\n text-align: center;\r\n }\r\n .service-title {\r\n font-size: 32px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .service-container {\r\n padding: 0 20px;\r\n }\r\n .service-title {\r\n font-size: 28px;\r\n }\r\n .cta-container {\r\n padding: 40px 24px;\r\n }\r\n .cta-container h2 {\r\n font-size: 28px;\r\n }\r\n .feature-icon {\r\n font-size: 36px;\r\n }\r\n .feature-text h4 {\r\n font-size: 16px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .service-section {\r\n padding: 50px 0;\r\n }\r\n .service-title {\r\n font-size: 24px;\r\n }\r\n .service-number {\r\n font-size: 60px;\r\n }\r\n .cta-button {\r\n padding: 12px 28px;\r\n font-size: 16px;\r\n }\r\n .carousel-button {\r\n width: 35px;\r\n height: 35px;\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n \/* Scroll Reveal *\/\r\n .reveal-left {\r\n opacity: 0;\r\n transform: translateX(-30px);\r\n transition: all 0.8s ease;\r\n }\r\n\r\n .reveal-left.visible {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .reveal-right {\r\n opacity: 0;\r\n transform: translateX(30px);\r\n transition: all 0.8s ease;\r\n }\r\n\r\n .reveal-right.visible {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n\r\n .reveal-up {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n transition: all 0.8s ease;\r\n }\r\n\r\n .reveal-up.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"service-section\" id=\"web-design\">\r\n <div class=\"service-container\">\r\n <div class=\"service-image-wrapper reveal-left\">\r\n <div class=\"image-glow glow-purple\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/mgx-backend-cdn.metadl.com\/generate\/images\/1109337\/2026-04-11\/38bc6fe3-4164-4d62-abdb-9ceaeb684846.png\" alt=\"\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631\" class=\"service-image\">\r\n <div class=\"image-overlay\">\r\n <span class=\"overlay-icon\">\ud83c\udfa8<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-content reveal-right\">\r\n <div class=\"service-number\">01<\/div>\r\n <div class=\"service-tag tag-purple\">\u062a\u0635\u0645\u064a\u0645 & \u062a\u0637\u0648\u064a\u0631<\/div>\r\n <h2 class=\"service-title\">\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639<br>\u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/h2>\r\n <p class=\"service-desc\">\u0646\u0635\u0645\u0645 \u0644\u0643 \u0645\u0648\u0627\u0642\u0639 \u0648\u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u062a\u062c\u0630\u0628 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0648\u062a\u062d\u0642\u0642 \u0627\u0644\u0645\u0628\u064a\u0639\u0627\u062a \u0628\u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0648\u0623\u0641\u0636\u0644 \u062a\u062c\u0631\u0628\u0629 \u0645\u0633\u062a\u062e\u062f\u0645.<\/p>\r\n \r\n <!-- Carousel -->\r\n <div class=\"features-carousel\" id=\"carousel1\">\r\n <div class=\"carousel-container\">\r\n <div class=\"carousel-track\">\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83c\udfe2<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u0645\u0648\u0627\u0642\u0639 \u0634\u0631\u0643\u0627\u062a<\/h4>\r\n <p>\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0627\u0642\u0639 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u062a\u0639\u0643\u0633 \u0647\u0648\u064a\u0629 \u0634\u0631\u0643\u062a\u0643<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\uded2<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u0645\u062a\u0627\u062c\u0631 WooCommerce<\/h4>\r\n <p>\u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0645\u0639 \u0628\u0648\u0627\u0628\u0627\u062a \u0627\u0644\u062f\u0641\u0639<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\u2728<\/div>\r\n <div class=\"feature-text\">\r\n <h4>UI\/UX \u0627\u062d\u062a\u0631\u0627\u0641\u064a<\/h4>\r\n <p>\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u062c\u0647\u0627\u062a \u0645\u0633\u062a\u062e\u062f\u0645 \u062c\u0630\u0627\u0628\u0629 \u0648\u0633\u0647\u0644\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\u26a1<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u0633\u0631\u0639\u0629 + SEO<\/h4>\r\n <p>\u0645\u0648\u0627\u0642\u0639 \u0633\u0631\u064a\u0639\u0629 \u0648\u0645\u062a\u0648\u0627\u0641\u0642\u0629 \u0645\u0639 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-nav\">\r\n <button class=\"carousel-button prev\">\u276e<\/button>\r\n <div class=\"carousel-dots\"><\/div>\r\n <button class=\"carousel-button next\">\u276f<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"service-section\" id=\"media-buying\">\r\n <div class=\"service-container reverse\">\r\n <div class=\"service-image-wrapper reveal-right\">\r\n <div class=\"image-glow glow-red\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/mgx-backend-cdn.metadl.com\/generate\/images\/1109337\/2026-04-11\/db03dfbb-f079-4e9e-a2c6-1138847aa123.png\" alt=\"\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0627\u0644\u0631\u0642\u0645\u064a\u0629\" class=\"service-image\">\r\n <div class=\"image-overlay\">\r\n <span class=\"overlay-icon\">\ud83d\udce2<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-content reveal-left\">\r\n <div class=\"service-number\">02<\/div>\r\n <div class=\"service-tag tag-red\">\u0625\u0639\u0644\u0627\u0646\u0627\u062a & \u062a\u0633\u0648\u064a\u0642<\/div>\r\n <h2 class=\"service-title\">Media Buying<br>\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0627\u0644\u0631\u0642\u0645\u064a\u0629<\/h2>\r\n <p class=\"service-desc\">\u0646\u062f\u064a\u0631 \u062d\u0645\u0644\u0627\u062a\u0643 \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u0639\u0644\u0649 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0628\u0630\u0643\u0627\u0621 \u0648\u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0639\u0644\u0649 \u0639\u0627\u0626\u062f \u0639\u0644\u0649 \u0627\u0644\u0627\u0633\u062a\u062b\u0645\u0627\u0631.<\/p>\r\n \r\n <!-- Carousel -->\r\n <div class=\"features-carousel\" id=\"carousel2\">\r\n <div class=\"carousel-container\">\r\n <div class=\"carousel-track\">\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udcd8<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u0641\u064a\u0633\u0628\u0648\u0643 & \u0625\u0646\u0633\u062a\u062c\u0631\u0627\u0645 Ads<\/h4>\r\n <p>\u062d\u0645\u0644\u0627\u062a \u0645\u0633\u062a\u0647\u062f\u0641\u0629 \u0639\u0644\u0649 \u0623\u0643\u0628\u0631 \u0645\u0646\u0635\u0627\u062a \u0627\u0644\u062a\u0648\u0627\u0635\u0644<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udd0d<\/div>\r\n <div class=\"feature-text\">\r\n <h4>Google Ads<\/h4>\r\n <p>\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0628\u062d\u062b \u0648\u0639\u0631\u0636 \u062a\u0635\u0644 \u0644\u0639\u0645\u0644\u0627\u0626\u0643 \u0627\u0644\u0645\u062d\u062a\u0645\u0644\u064a\u0646<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83c\udfb5<\/div>\r\n <div class=\"feature-text\">\r\n <h4>TikTok Ads<\/h4>\r\n <p>\u062d\u0645\u0644\u0627\u062a \u0625\u0628\u062f\u0627\u0639\u064a\u0629 \u0639\u0644\u0649 \u0623\u0633\u0631\u0639 \u0627\u0644\u0645\u0646\u0635\u0627\u062a \u0646\u0645\u0648\u0627\u064b<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udcca<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u062a\u062d\u0644\u064a\u0644 \u0648\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u062d\u0645\u0644\u0627\u062a<\/h4>\r\n <p>\u062a\u0642\u0627\u0631\u064a\u0631 \u0645\u0641\u0635\u0644\u0629 \u0648\u062a\u062d\u0633\u064a\u0646 \u0645\u0633\u062a\u0645\u0631 \u0644\u0644\u0623\u062f\u0627\u0621<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-nav\">\r\n <button class=\"carousel-button prev\">\u276e<\/button>\r\n <div class=\"carousel-dots\"><\/div>\r\n <button class=\"carousel-button next\">\u276f<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"service-section\" id=\"automation\">\r\n <div class=\"service-container\">\r\n <div class=\"service-image-wrapper reveal-left\">\r\n <div class=\"image-glow glow-teal\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/mgx-backend-cdn.metadl.com\/generate\/images\/1109337\/2026-04-11\/d96fec6b-38fd-443a-9151-74cee7e7c187.png\" alt=\"\u0627\u0644\u0623\u062a\u0645\u062a\u0629\" class=\"service-image\">\r\n <div class=\"image-overlay\">\r\n <span class=\"overlay-icon\">\ud83e\udd16<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-content reveal-right\">\r\n <div class=\"service-number\">03<\/div>\r\n <div class=\"service-tag tag-teal\">\u0623\u062a\u0645\u062a\u0629 & \u0630\u0643\u0627\u0621<\/div>\r\n <h2 class=\"service-title\">\u0627\u0644\u0623\u062a\u0645\u062a\u0629<br>Automation<\/h2>\r\n <p class=\"service-desc\">\u0646\u0624\u062a\u0645\u062a \u0639\u0645\u0644\u064a\u0627\u062a\u0643 \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0644\u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u0648\u0642\u062a \u0648\u0627\u0644\u062c\u0647\u062f \u0648\u0632\u064a\u0627\u062f\u0629 \u0627\u0644\u0643\u0641\u0627\u0621\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062d\u062f\u062b \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0623\u062a\u0645\u062a\u0629 \u0648\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a.<\/p>\r\n \r\n <!-- Carousel -->\r\n <div class=\"features-carousel\" id=\"carousel3\">\r\n <div class=\"carousel-container\">\r\n <div class=\"carousel-track\">\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udcac<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u0628\u0648\u062a \u0648\u0627\u062a\u0633\u0627\u0628 \u0630\u0643\u064a<\/h4>\r\n <p>\u0631\u062f\u0648\u062f \u062a\u0644\u0642\u0627\u0626\u064a\u0629 \u0630\u0643\u064a\u0629 \u0639\u0644\u0649 \u0627\u0633\u062a\u0641\u0633\u0627\u0631\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udccb<\/div>\r\n <div class=\"feature-text\">\r\n <h4>CRM \u0628\u0633\u064a\u0637<\/h4>\r\n <p>\u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0639\u0644\u0627\u0642\u0627\u062a \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0644\u062a\u0646\u0638\u064a\u0645 \u0628\u064a\u0627\u0646\u0627\u062a\u0643<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udce7<\/div>\r\n <div class=\"feature-text\">\r\n <h4>Email Marketing<\/h4>\r\n <p>\u062d\u0645\u0644\u0627\u062a \u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u0624\u062a\u0645\u062a\u0629 \u0648\u0641\u0639\u0651\u0627\u0644\u0629<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udd04<\/div>\r\n <div class=\"feature-text\">\r\n <h4>Funnels (\u0631\u062d\u0644\u0629 \u0627\u0644\u0639\u0645\u064a\u0644)<\/h4>\r\n <p>\u0642\u0645\u0639 \u0645\u0628\u064a\u0639\u0627\u062a \u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0646 \u0627\u0644\u0648\u0639\u064a \u062d\u062a\u0649 \u0627\u0644\u0634\u0631\u0627\u0621<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-nav\">\r\n <button class=\"carousel-button prev\">\u276e<\/button>\r\n <div class=\"carousel-dots\"><\/div>\r\n <button class=\"carousel-button next\">\u276f<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"service-section\" id=\"geofencing\">\r\n <div class=\"service-container reverse\">\r\n <div class=\"service-image-wrapper reveal-right\">\r\n <div class=\"image-glow glow-green\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/mgx-backend-cdn.metadl.com\/generate\/images\/1109337\/2026-04-11\/86d70a76-aa06-4e6b-bba4-ca32b1eaf505.png\" alt=\"\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062d\u0633\u0628 \u0627\u0644\u0645\u0648\u0642\u0639\" class=\"service-image\">\r\n <div class=\"image-overlay\">\r\n <span class=\"overlay-icon\">\ud83d\udccd<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-content reveal-left\">\r\n <div class=\"service-number\">04<\/div>\r\n <div class=\"service-tag tag-green\">\u0627\u0633\u062a\u0647\u062f\u0627\u0641 & \u062c\u063a\u0631\u0627\u0641\u064a\u0627<\/div>\r\n <h2 class=\"service-title\">\u0627\u0644\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u062d\u0633\u0628 \u0627\u0644\u0645\u0648\u0642\u0639<br>Geofencing Ads<\/h2>\r\n <p class=\"service-desc\">\u0646\u0633\u062a\u0647\u062f\u0641 \u0639\u0645\u0644\u0627\u0626\u0643 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0645\u0648\u0642\u0639\u0647\u0645 \u0627\u0644\u062c\u063a\u0631\u0627\u0641\u064a \u0628\u062f\u0642\u0629 \u0645\u062a\u0646\u0627\u0647\u064a\u0629\u060c \u0644\u0639\u0631\u0636 \u0625\u0639\u0644\u0627\u0646\u0627\u062a\u0643 \u0641\u0642\u0637 \u0644\u0644\u062c\u0645\u0647\u0648\u0631 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641 \u0641\u064a \u0646\u0637\u0627\u0642 \u0645\u062d\u062f\u062f.<\/p>\r\n \r\n <!-- Carousel -->\r\n <div class=\"features-carousel\" id=\"carousel4\">\r\n <div class=\"carousel-container\">\r\n <div class=\"carousel-track\">\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udccd<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u0627\u0633\u062a\u0647\u062f\u0627\u0641 \u062c\u063a\u0631\u0627\u0641\u064a \u062f\u0642\u064a\u0642<\/h4>\r\n <p>\u0627\u0633\u062a\u0647\u062f\u0627\u0641 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0641\u064a \u0646\u0637\u0627\u0642 \u0645\u062d\u062f\u062f \u064a\u0635\u0644 \u0625\u0644\u0649 100 \u0645\u062a\u0631<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83c\udfea<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u0633\u064a\u0627\u062c \u062d\u0648\u0644 \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u064a\u0646<\/h4>\r\n <p>\u0627\u0633\u062a\u0647\u062f\u0627\u0641 \u0632\u0648\u0627\u0631 \u0645\u0646\u0627\u0641\u0633\u064a\u0643 \u0648\u0639\u0631\u0636 \u0625\u0639\u0644\u0627\u0646\u0627\u062a\u0643 \u0644\u0647\u0645<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udcf1<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0627\u0644\u062c\u0648\u0627\u0644<\/h4>\r\n <p>\u0639\u0631\u0636 \u0625\u0639\u0644\u0627\u0646\u0627\u062a \u0641\u0648\u0631\u064a\u0629 \u0639\u0644\u0649 \u0647\u0648\u0627\u062a\u0641 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0627\u0644\u0645\u0633\u062a\u0647\u062f\u0641\u064a\u0646<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udcca<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u062a\u0642\u0627\u0631\u064a\u0631 \u062a\u062d\u0644\u064a\u0644\u064a\u0629<\/h4>\r\n <p>\u062a\u0642\u0627\u0631\u064a\u0631 \u062a\u0641\u0635\u064a\u0644\u064a\u0629 \u0639\u0646 \u0623\u062f\u0627\u0621 \u0627\u0644\u062d\u0645\u0644\u0627\u062a \u0627\u0644\u062c\u063a\u0631\u0627\u0641\u064a\u0629<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-nav\">\r\n <button class=\"carousel-button prev\">\u276e<\/button>\r\n <div class=\"carousel-dots\"><\/div>\r\n <button class=\"carousel-button next\">\u276f<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"service-section\" id=\"usa-company\">\r\n <div class=\"service-container\">\r\n <div class=\"service-image-wrapper reveal-left\">\r\n <div class=\"image-glow glow-gold\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/mgx-backend-cdn.metadl.com\/generate\/images\/1109337\/2026-04-11\/86d70a76-aa06-4e6b-bba4-ca32b1eaf505.png\" alt=\"\u062a\u0623\u0633\u064a\u0633 \u0634\u0631\u0643\u0629 \u0641\u064a \u0623\u0645\u0631\u064a\u0643\u0627\" class=\"service-image\">\r\n <div class=\"image-overlay\">\r\n <span class=\"overlay-icon\">\ud83c\uddfa\ud83c\uddf8<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"service-content reveal-right\">\r\n <div class=\"service-number\">05<\/div>\r\n <div class=\"service-tag tag-gold\">\u062a\u0623\u0633\u064a\u0633 & \u0642\u0627\u0646\u0648\u0646\u064a<\/div>\r\n <h2 class=\"service-title\">\u062a\u0623\u0633\u064a\u0633 \u0634\u0631\u0643\u0629<br>\u0641\u064a \u0623\u0645\u0631\u064a\u0643\u0627 \ud83c\uddfa\ud83c\uddf8<\/h2>\r\n <p class=\"service-desc\">\u0646\u0633\u0627\u0639\u062f\u0643 \u0641\u064a \u062a\u0623\u0633\u064a\u0633 \u0634\u0631\u0643\u062a\u0643 \u0641\u064a \u0627\u0644\u0648\u0644\u0627\u064a\u0627\u062a \u0627\u0644\u0645\u062a\u062d\u062f\u0629 \u0628\u0634\u0643\u0644 \u0642\u0627\u0646\u0648\u0646\u064a \u0648\u0645\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u062c\u0645\u064a\u0639 \u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0645\u0627\u0644\u064a\u0629 \u0648\u0627\u0644\u0628\u0646\u0643\u064a\u0629.<\/p>\r\n \r\n <!-- Carousel -->\r\n <div class=\"features-carousel\" id=\"carousel5\">\r\n <div class=\"carousel-container\">\r\n <div class=\"carousel-track\">\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udcc4<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u0641\u062a\u062d LLC<\/h4>\r\n <p>\u062a\u0623\u0633\u064a\u0633 \u0634\u0631\u0643\u0629 \u0630\u0627\u062a \u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0645\u062d\u062f\u0648\u062f\u0629 \u0641\u064a \u0623\u0645\u0631\u064a\u0643\u0627<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83d\udcb3<\/div>\r\n <div class=\"feature-text\">\r\n <h4>Stripe + \u062d\u0633\u0627\u0628 \u0628\u0646\u0643\u064a<\/h4>\r\n <p>\u0631\u0628\u0637 \u0628\u0648\u0627\u0628\u0629 \u062f\u0641\u0639 Stripe \u0645\u0639 \u062d\u0633\u0627\u0628 \u0628\u0646\u0643\u064a \u0623\u0645\u0631\u064a\u0643\u064a<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\ud83c\udd7f\ufe0f<\/div>\r\n <div class=\"feature-text\">\r\n <h4>PayPal Business<\/h4>\r\n <p>\u0625\u0646\u0634\u0627\u0621 \u062d\u0633\u0627\u0628 PayPal \u062a\u062c\u0627\u0631\u064a \u0644\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0627\u0644\u0645\u062f\u0641\u0648\u0639\u0627\u062a<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <div class=\"feature-item\">\r\n <div class=\"feature-icon\">\u2696\ufe0f<\/div>\r\n <div class=\"feature-text\">\r\n <h4>\u062a\u062c\u0647\u064a\u0632 \u0642\u0627\u0646\u0648\u0646\u064a \u0643\u0627\u0645\u0644<\/h4>\r\n <p>\u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0648\u0631\u0627\u0642 \u0648\u0627\u0644\u062a\u0631\u0627\u062e\u064a\u0635 \u0627\u0644\u0642\u0627\u0646\u0648\u0646\u064a\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-nav\">\r\n <button class=\"carousel-button prev\">\u276e<\/button>\r\n <div class=\"carousel-dots\"><\/div>\r\n <button class=\"carousel-button next\">\u276f<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"cta-section\">\r\n <div class=\"cta-container reveal-up\">\r\n <div class=\"cta-glow\"><\/div>\r\n <h2>\u062c\u0627\u0647\u0632 \u062a\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0644\u0631\u0642\u0645\u064a\u061f<\/h2>\r\n <p>\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627 \u0627\u0644\u0622\u0646 \u0648\u0627\u062d\u0635\u0644 \u0639\u0644\u0649 \u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0645\u062c\u0627\u0646\u064a\u0629<\/p>\r\n <a href=\"#\" class=\"cta-button\">\r\n <span>\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/span>\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n \/\/ Carousel Functionality\r\n class FeatureCarousel {\r\n constructor(containerId) {\r\n this.container = document.getElementById(containerId);\r\n if (!this.container) return;\r\n \r\n this.track = this.container.querySelector('.carousel-track');\r\n this.slides = Array.from(this.track.children);\r\n this.prevButton = this.container.querySelector('.prev');\r\n this.nextButton = this.container.querySelector('.next');\r\n this.dotsContainer = this.container.querySelector('.carousel-dots');\r\n \r\n this.currentIndex = 0;\r\n this.slideCount = this.slides.length;\r\n \r\n this.createDots();\r\n this.updateCarousel();\r\n \r\n \/\/ Add event listeners\r\n this.prevButton.addEventListener('click', () => this.prevSlide());\r\n this.nextButton.addEventListener('click', () => this.nextSlide());\r\n \r\n \/\/ Auto-play (optional)\r\n this.startAutoPlay();\r\n }\r\n \r\n createDots() {\r\n for (let i = 0; i < this.slideCount; i++) {\r\n const dot = document.createElement('div');\r\n dot.classList.add('dot');\r\n dot.addEventListener('click', () => this.goToSlide(i));\r\n this.dotsContainer.appendChild(dot);\r\n }\r\n }\r\n \r\n updateDots() {\r\n const dots = this.dotsContainer.querySelectorAll('.dot');\r\n dots.forEach((dot, index) => {\r\n if (index === this.currentIndex) {\r\n dot.classList.add('active');\r\n } else {\r\n dot.classList.remove('active');\r\n }\r\n });\r\n }\r\n \r\n updateCarousel() {\r\n const slideWidth = this.slides[0].getBoundingClientRect().width;\r\n this.track.style.transform = `translateX(-${this.currentIndex * slideWidth}px)`;\r\n this.updateDots();\r\n }\r\n \r\n goToSlide(index) {\r\n if (index < 0) index = 0;\r\n if (index >= this.slideCount) index = this.slideCount - 1;\r\n this.currentIndex = index;\r\n this.updateCarousel();\r\n this.resetAutoPlay();\r\n }\r\n \r\n prevSlide() {\r\n this.goToSlide(this.currentIndex - 1);\r\n }\r\n \r\n nextSlide() {\r\n this.goToSlide(this.currentIndex + 1);\r\n }\r\n \r\n startAutoPlay() {\r\n this.autoPlayInterval = setInterval(() => {\r\n if (this.currentIndex < this.slideCount - 1) {\r\n this.nextSlide();\r\n } else {\r\n this.goToSlide(0);\r\n }\r\n }, 5000);\r\n }\r\n \r\n resetAutoPlay() {\r\n clearInterval(this.autoPlayInterval);\r\n this.startAutoPlay();\r\n }\r\n }\r\n \r\n \/\/ Initialize all carousels\r\n const carousel1 = new FeatureCarousel('carousel1');\r\n const carousel2 = new FeatureCarousel('carousel2');\r\n const carousel3 = new FeatureCarousel('carousel3');\r\n const carousel4 = new FeatureCarousel('carousel4');\r\n const carousel5 = new FeatureCarousel('carousel5');\r\n \r\n \/\/ Handle window resize\r\n let resizeTimeout;\r\n window.addEventListener('resize', () => {\r\n clearTimeout(resizeTimeout);\r\n resizeTimeout = setTimeout(() => {\r\n carousel1.updateCarousel();\r\n carousel2.updateCarousel();\r\n carousel3.updateCarousel();\r\n carousel4.updateCarousel();\r\n carousel5.updateCarousel();\r\n }, 100);\r\n });\r\n \r\n \/\/ Scroll Reveal Functionality\r\n const revealElements = document.querySelectorAll('.reveal-left, .reveal-right, .reveal-up');\r\n \r\n function checkReveal() {\r\n revealElements.forEach(element => {\r\n const elementTop = element.getBoundingClientRect().top;\r\n const windowHeight = window.innerHeight;\r\n \r\n if (elementTop < windowHeight - 100) {\r\n element.classList.add('visible');\r\n }\r\n });\r\n }\r\n \r\n window.addEventListener('scroll', checkReveal);\r\n window.addEventListener('load', checkReveal);\r\n <\/script>\r\n\r\n <script src=\"https:\/\/public-frontend-cos.metadl.com\/commonfile\/downloader-20260203.js\" \r\n crossorigin=\"anonymous\" \r\n referrerpolicy=\"no-referrer\"><\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-62c2f12 e-con-full e-flex e-con e-parent\" data-id=\"62c2f12\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9813f0d elementor-widget elementor-widget-html\" data-id=\"9813f0d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"ar\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Process Slider | NNC<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Cairo:wght@300;400;600;700;900&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\" rel=\"stylesheet\">\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n :root {\r\n --bg-primary: #050510;\r\n --bg-card: rgba(255, 255, 255, 0.03);\r\n --accent-primary: #00d4ff;\r\n --accent-secondary: #7b2fff;\r\n --accent-tertiary: #ff2d7b;\r\n --accent-gold: #ffd700;\r\n --text-primary: #ffffff;\r\n --text-secondary: rgba(255, 255, 255, 0.7);\r\n --text-muted: rgba(255, 255, 255, 0.4);\r\n --glass-border: rgba(255, 255, 255, 0.08);\r\n --gradient-main: linear-gradient(135deg, #00d4ff 0%, #7b2fff 50%, #ff2d7b 100%);\r\n }\r\n\r\n body {\r\n font-family: 'Tajawal', sans-serif;\r\n background: var(--bg-primary);\r\n margin: 0;\r\n padding: 0;\r\n color: var(--text-primary);\r\n }\r\n\r\n .section {\r\n position: relative;\r\n z-index: 1;\r\n padding: 7rem 2rem;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Background *\/\r\n .process-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n overflow: hidden;\r\n }\r\n\r\n .process-bg .diagonal-lines {\r\n position: absolute;\r\n inset: 0;\r\n background-image: repeating-linear-gradient(135deg, transparent, transparent 40px, rgba(0, 212, 255, 0.02) 40px, rgba(0, 212, 255, 0.02) 41px);\r\n animation: diagScroll 30s linear infinite;\r\n }\r\n\r\n @keyframes diagScroll {\r\n 0% { background-position: 0 0; }\r\n 100% { background-position: 56px 56px; }\r\n }\r\n\r\n .process-bg .process-orb {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(60px);\r\n }\r\n\r\n .process-bg .process-orb:nth-child(2) {\r\n width: 300px; height: 300px;\r\n background: rgba(0, 212, 255, 0.07);\r\n top: 20%; left: 5%;\r\n animation: processOrb 10s ease-in-out infinite;\r\n }\r\n\r\n .process-bg .process-orb:nth-child(3) {\r\n width: 250px; height: 250px;\r\n background: rgba(123, 47, 255, 0.07);\r\n top: 50%; right: 10%;\r\n animation: processOrb 12s ease-in-out infinite reverse;\r\n }\r\n\r\n @keyframes processOrb {\r\n 0%, 100% { transform: translate(0, 0) scale(1); }\r\n 33% { transform: translate(30px, -20px) scale(1.1); }\r\n 66% { transform: translate(-20px, 30px) scale(0.9); }\r\n }\r\n\r\n \/* Header *\/\r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 3rem;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .section-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n padding: 0.4rem 1.2rem;\r\n background: rgba(0, 212, 255, 0.08);\r\n border: 1px solid rgba(0, 212, 255, 0.15);\r\n border-radius: 50px;\r\n font-size: 0.85rem;\r\n color: var(--accent-primary);\r\n margin-bottom: 1.2rem;\r\n font-weight: 600;\r\n }\r\n\r\n .section-title {\r\n font-family: 'Cairo', sans-serif;\r\n font-size: clamp(2rem, 4vw, 3rem);\r\n font-weight: 900;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .gradient-text {\r\n background: var(--gradient-main);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n }\r\n\r\n .section-desc {\r\n font-size: 1.1rem;\r\n color: var(--text-secondary);\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ===== SLIDER - POSITION ABSOLUTE ===== *\/\r\n .slider-wrapper {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .slider-track {\r\n position: relative;\r\n width: 100%;\r\n overflow: hidden;\r\n border-radius: 24px;\r\n \/* \u0646\u062d\u062f\u062f \u0627\u0644\u0627\u0631\u062a\u0641\u0627\u0639 \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0623\u0648\u0644 \u0633\u0644\u0627\u064a\u062f *\/\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 100%;\r\n padding: 3rem;\r\n background: var(--bg-card);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 24px;\r\n backdrop-filter: blur(20px);\r\n display: flex;\r\n align-items: center;\r\n gap: 3rem;\r\n overflow: hidden;\r\n opacity: 0;\r\n transform: translateX(100px);\r\n transition: opacity 0.5s ease, transform 0.5s ease;\r\n pointer-events: none;\r\n }\r\n\r\n \/* \u0623\u0648\u0644 \u0633\u0644\u0627\u064a\u062f \u064a\u0643\u0648\u0646 \u0638\u0627\u0647\u0631 \u0648\u0645\u062b\u0628\u062a \u0644\u0644\u0627\u0631\u062a\u0641\u0627\u0639 *\/\r\n .slide.visible {\r\n opacity: 1;\r\n transform: translateX(0);\r\n pointer-events: auto;\r\n position: relative;\r\n }\r\n\r\n .slide.exit-left {\r\n opacity: 0;\r\n transform: translateX(-100px);\r\n pointer-events: none;\r\n }\r\n\r\n .slide.exit-right {\r\n opacity: 0;\r\n transform: translateX(100px);\r\n pointer-events: none;\r\n }\r\n\r\n .slide::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 200px;\r\n height: 200px;\r\n border-radius: 50%;\r\n filter: blur(80px);\r\n opacity: 0.3;\r\n z-index: 0;\r\n }\r\n\r\n .slide:nth-child(1)::before { background: var(--accent-primary); }\r\n .slide:nth-child(2)::before { background: var(--accent-secondary); }\r\n .slide:nth-child(3)::before { background: var(--accent-tertiary); }\r\n .slide:nth-child(4)::before { background: var(--accent-gold); }\r\n\r\n .slide-number {\r\n min-width: 120px;\r\n height: 120px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: 'Cairo', sans-serif;\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n position: relative;\r\n z-index: 1;\r\n flex-shrink: 0;\r\n }\r\n\r\n .slide:nth-child(1) .slide-number {\r\n background: rgba(0, 212, 255, 0.1);\r\n border: 2px solid rgba(0, 212, 255, 0.3);\r\n color: var(--accent-primary);\r\n box-shadow: 0 0 40px rgba(0, 212, 255, 0.15);\r\n }\r\n\r\n .slide:nth-child(2) .slide-number {\r\n background: rgba(123, 47, 255, 0.1);\r\n border: 2px solid rgba(123, 47, 255, 0.3);\r\n color: var(--accent-secondary);\r\n box-shadow: 0 0 40px rgba(123, 47, 255, 0.15);\r\n }\r\n\r\n .slide:nth-child(3) .slide-number {\r\n background: rgba(255, 45, 123, 0.1);\r\n border: 2px solid rgba(255, 45, 123, 0.3);\r\n color: var(--accent-tertiary);\r\n box-shadow: 0 0 40px rgba(255, 45, 123, 0.15);\r\n }\r\n\r\n .slide:nth-child(4) .slide-number {\r\n background: rgba(255, 215, 0, 0.1);\r\n border: 2px solid rgba(255, 215, 0, 0.3);\r\n color: var(--accent-gold);\r\n box-shadow: 0 0 40px rgba(255, 215, 0, 0.15);\r\n }\r\n\r\n .slide-content {\r\n position: relative;\r\n z-index: 1;\r\n flex: 1;\r\n }\r\n\r\n .slide-icon {\r\n font-size: 2rem;\r\n margin-bottom: 0.8rem;\r\n display: block;\r\n }\r\n\r\n .slide:nth-child(1) .slide-icon { color: var(--accent-primary); }\r\n .slide:nth-child(2) .slide-icon { color: var(--accent-secondary); }\r\n .slide:nth-child(3) .slide-icon { color: var(--accent-tertiary); }\r\n .slide:nth-child(4) .slide-icon { color: var(--accent-gold); }\r\n\r\n .slide-title {\r\n font-family: 'Cairo', sans-serif;\r\n font-weight: 800;\r\n font-size: 1.6rem;\r\n margin-bottom: 0.8rem;\r\n color: var(--text-primary);\r\n }\r\n\r\n .slide-desc {\r\n color: var(--text-secondary);\r\n font-size: 1rem;\r\n line-height: 1.8;\r\n }\r\n\r\n .slide-features {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 0.5rem;\r\n margin-top: 1.2rem;\r\n }\r\n\r\n .slide-feature {\r\n padding: 0.35rem 1rem;\r\n border-radius: 50px;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n background: rgba(255, 255, 255, 0.05);\r\n border: 1px solid var(--glass-border);\r\n color: var(--text-secondary);\r\n }\r\n\r\n .slide:nth-child(1) .slide-feature { border-color: rgba(0, 212, 255, 0.2); color: var(--accent-primary); }\r\n .slide:nth-child(2) .slide-feature { border-color: rgba(123, 47, 255, 0.2); color: var(--accent-secondary); }\r\n .slide:nth-child(3) .slide-feature { border-color: rgba(255, 45, 123, 0.2); color: var(--accent-tertiary); }\r\n .slide:nth-child(4) .slide-feature { border-color: rgba(255, 215, 0, 0.2); color: var(--accent-gold); }\r\n\r\n \/* Controls *\/\r\n .slider-controls {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 1.5rem;\r\n margin-top: 2.5rem;\r\n }\r\n\r\n .slider-btn {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n border: 1px solid var(--glass-border);\r\n background: var(--bg-card);\r\n color: var(--text-primary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .slider-btn:hover {\r\n background: rgba(0, 212, 255, 0.1);\r\n border-color: var(--accent-primary);\r\n transform: scale(1.1);\r\n }\r\n\r\n .slider-dots {\r\n display: flex;\r\n gap: 0.6rem;\r\n align-items: center;\r\n }\r\n\r\n .slider-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.15);\r\n cursor: pointer;\r\n transition: all 0.4s ease;\r\n border: none;\r\n }\r\n\r\n .slider-dot.active {\r\n width: 40px;\r\n border-radius: 10px;\r\n background: var(--gradient-main);\r\n box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);\r\n }\r\n\r\n .slider-progress {\r\n max-width: 900px;\r\n margin: 1.5rem auto 0;\r\n height: 3px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 10px;\r\n overflow: hidden;\r\n }\r\n\r\n .slider-progress-bar {\r\n height: 100%;\r\n background: var(--gradient-main);\r\n border-radius: 10px;\r\n transition: width 0.6s ease;\r\n width: 25%;\r\n }\r\n\r\n .slider-counter {\r\n font-family: 'Cairo', sans-serif;\r\n font-weight: 700;\r\n font-size: 0.95rem;\r\n color: var(--text-muted);\r\n min-width: 60px;\r\n text-align: center;\r\n }\r\n\r\n .slider-counter .current {\r\n color: var(--accent-primary);\r\n font-size: 1.2rem;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .section { padding: 4rem 1.5rem; }\r\n\r\n .slide {\r\n flex-direction: column;\r\n padding: 2rem;\r\n gap: 1.5rem;\r\n text-align: center;\r\n }\r\n\r\n .slide-number {\r\n min-width: 80px;\r\n height: 80px;\r\n font-size: 1.8rem;\r\n }\r\n\r\n .slide-features {\r\n justify-content: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"section\" id=\"process\">\r\n <div class=\"process-bg\">\r\n <div class=\"diagonal-lines\"><\/div>\r\n <div class=\"process-orb\"><\/div>\r\n <div class=\"process-orb\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"section-header\">\r\n <div class=\"section-tag\">\r\n <span class=\"material-symbols-outlined\" style=\"font-size:1rem\">route<\/span>\r\n \u0643\u064a\u0641 \u0646\u0639\u0645\u0644\r\n <\/div>\r\n <h2 class=\"section-title\">\u062e\u0637\u0648\u0627\u062a \u0628\u0633\u064a\u0637\u0629 <span class=\"gradient-text\">\u0644\u0646\u062a\u0627\u0626\u062c \u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629<\/span><\/h2>\r\n <p class=\"section-desc\">\u0646\u0638\u0627\u0645 \u0639\u0645\u0644 \u0645\u0645\u0646\u0647\u062c \u064a\u0636\u0645\u0646 \u0644\u0643 \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0623\u0641\u0636\u0644 \u0627\u0644\u0646\u062a\u0627\u0626\u062c \u0641\u064a \u0623\u0642\u0644 \u0648\u0642\u062a<\/p>\r\n <\/div>\r\n\r\n <div class=\"slider-wrapper\">\r\n <div class=\"slider-track\" id=\"sliderTrack\">\r\n\r\n <div class=\"slide visible\" data-index=\"0\">\r\n <div class=\"slide-number\">01<\/div>\r\n <div class=\"slide-content\">\r\n <span class=\"material-symbols-outlined slide-icon\">search<\/span>\r\n <h3 class=\"slide-title\">\u0627\u0644\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0648\u0627\u0644\u062a\u062d\u0644\u064a\u0644<\/h3>\r\n <p class=\"slide-desc\">\u0646\u0641\u0647\u0645 \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a\u0643 \u0648\u0623\u0647\u062f\u0627\u0641\u0643 \u0628\u0639\u0645\u0642 \u0648\u0646\u062d\u0644\u0644 \u0627\u0644\u0633\u0648\u0642 \u0648\u0627\u0644\u0645\u0646\u0627\u0641\u0633\u064a\u0646 \u0644\u0648\u0636\u0639 \u062e\u0637\u0629 \u0630\u0643\u064a\u0629 \u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0628\u064a\u0627\u0646\u0627\u062a \u062d\u0642\u064a\u0642\u064a\u0629<\/p>\r\n <div class=\"slide-features\">\r\n <span class=\"slide-feature\">\u062a\u062d\u0644\u064a\u0644 \u0627\u0644\u0633\u0648\u0642<\/span>\r\n <span class=\"slide-feature\">\u062f\u0631\u0627\u0633\u0629 \u0627\u0644\u0645\u0646\u0627\u0641\u0633\u064a\u0646<\/span>\r\n <span class=\"slide-feature\">\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0623\u0647\u062f\u0627\u0641<\/span>\r\n <span class=\"slide-feature\">\u062e\u0637\u0629 \u0627\u0644\u0639\u0645\u0644<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"slide\" data-index=\"1\">\r\n <div class=\"slide-number\">02<\/div>\r\n <div class=\"slide-content\">\r\n <span class=\"material-symbols-outlined slide-icon\">draw<\/span>\r\n <h3 class=\"slide-title\">\u0627\u0644\u062a\u062e\u0637\u064a\u0637 \u0648\u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/h3>\r\n <p class=\"slide-desc\">\u0646\u0636\u0639 \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0648\u0646\u0635\u0645\u0645 \u0648\u0627\u062c\u0647\u0627\u062a \u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u0628\u0647\u0631\u0629 \u062a\u062c\u0645\u0639 \u0628\u064a\u0646 \u0627\u0644\u062c\u0645\u0627\u0644 \u0648\u0627\u0644\u0648\u0638\u064a\u0641\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0623\u0642\u0635\u0649 \u062a\u0623\u062b\u064a\u0631<\/p>\r\n <div class=\"slide-features\">\r\n <span class=\"slide-feature\">UX\/UI \u062a\u0635\u0645\u064a\u0645<\/span>\r\n <span class=\"slide-feature\">\u0647\u0648\u064a\u0629 \u0628\u0635\u0631\u064a\u0629<\/span>\r\n <span class=\"slide-feature\">\u0646\u0645\u0627\u0630\u062c \u0623\u0648\u0644\u064a\u0629<\/span>\r\n <span class=\"slide-feature\">\u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0645\u062d\u062a\u0648\u0649<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"slide\" data-index=\"2\">\r\n <div class=\"slide-number\">03<\/div>\r\n <div class=\"slide-content\">\r\n <span class=\"material-symbols-outlined slide-icon\">code<\/span>\r\n <h3 class=\"slide-title\">\u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0648\u0627\u0644\u062a\u0646\u0641\u064a\u0630<\/h3>\r\n <p class=\"slide-desc\">\u0646\u062d\u0648\u0644 \u0627\u0644\u062a\u0635\u0627\u0645\u064a\u0645 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639 \u0631\u0642\u0645\u064a \u0628\u0623\u0639\u0644\u0649 \u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u062c\u0648\u062f\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0648\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629<\/p>\r\n <div class=\"slide-features\">\r\n <span class=\"slide-feature\">\u062a\u0637\u0648\u064a\u0631 \u0645\u062e\u0635\u0635<\/span>\r\n <span class=\"slide-feature\">\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a \u062c\u0648\u062f\u0629<\/span>\r\n <span class=\"slide-feature\">\u0623\u062f\u0627\u0621 \u0639\u0627\u0644\u064a<\/span>\r\n <span class=\"slide-feature\">\u0623\u0645\u0627\u0646 \u0645\u062a\u0642\u062f\u0645<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"slide\" data-index=\"3\">\r\n <div class=\"slide-number\">04<\/div>\r\n <div class=\"slide-content\">\r\n <span class=\"material-symbols-outlined slide-icon\">rocket_launch<\/span>\r\n <h3 class=\"slide-title\">\u0627\u0644\u0625\u0637\u0644\u0627\u0642 \u0648\u0627\u0644\u062f\u0639\u0645<\/h3>\r\n <p class=\"slide-desc\">\u0646\u0637\u0644\u0642 \u0645\u0634\u0631\u0648\u0639\u0643 \u0645\u0639 \u0645\u062a\u0627\u0628\u0639\u0629 \u0645\u0633\u062a\u0645\u0631\u0629 \u0648\u062f\u0639\u0645 \u0641\u0646\u064a \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 \u0644\u0636\u0645\u0627\u0646 \u0646\u062c\u0627\u062d \u0645\u0633\u062a\u0645\u0631 \u0648\u0646\u0645\u0648 \u062f\u0627\u0626\u0645<\/p>\r\n <div class=\"slide-features\">\r\n <span class=\"slide-feature\">\u0625\u0637\u0644\u0627\u0642 \u0627\u062d\u062a\u0631\u0627\u0641\u064a<\/span>\r\n <span class=\"slide-feature\">\u062f\u0639\u0645 24\/7<\/span>\r\n <span class=\"slide-feature\">\u062a\u0642\u0627\u0631\u064a\u0631 \u0623\u062f\u0627\u0621<\/span>\r\n <span class=\"slide-feature\">\u062a\u062d\u062f\u064a\u062b\u0627\u062a \u0645\u0633\u062a\u0645\u0631\u0629<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"slider-controls\">\r\n <button class=\"slider-btn\" id=\"prevBtn\" aria-label=\"\u0627\u0644\u0633\u0627\u0628\u0642\">\r\n <span class=\"material-symbols-outlined\">arrow_forward<\/span>\r\n <\/button>\r\n\r\n <div class=\"slider-dots\" id=\"sliderDots\">\r\n <button class=\"slider-dot active\" data-index=\"0\"><\/button>\r\n <button class=\"slider-dot\" data-index=\"1\"><\/button>\r\n <button class=\"slider-dot\" data-index=\"2\"><\/button>\r\n <button class=\"slider-dot\" data-index=\"3\"><\/button>\r\n <\/div>\r\n\r\n <div class=\"slider-counter\">\r\n <span class=\"current\" id=\"currentSlide\">1<\/span> \/ <span id=\"totalSlides\">4<\/span>\r\n <\/div>\r\n\r\n <button class=\"slider-btn\" id=\"nextBtn\" aria-label=\"\u0627\u0644\u062a\u0627\u0644\u064a\">\r\n <span class=\"material-symbols-outlined\">arrow_back<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"slider-progress\">\r\n <div class=\"slider-progress-bar\" id=\"progressBar\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <script>\r\n const slides = document.querySelectorAll('.slide');\r\n const dots = document.querySelectorAll('.slider-dot');\r\n const nextBtn = document.getElementById('nextBtn');\r\n const prevBtn = document.getElementById('prevBtn');\r\n const currentSlideEl = document.getElementById('currentSlide');\r\n const progressBar = document.getElementById('progressBar');\r\n\r\n let currentIndex = 0;\r\n const total = slides.length;\r\n let autoPlayInterval;\r\n let isAnimating = false;\r\n\r\n function goToSlide(index, direction) {\r\n if (isAnimating || index === currentIndex) return;\r\n isAnimating = true;\r\n\r\n const oldIndex = currentIndex;\r\n currentIndex = index;\r\n\r\n \/\/ \u0627\u062a\u062c\u0627\u0647 \u0627\u0644\u062e\u0631\u0648\u062c\r\n const exitDir = direction === 'next' ? 'exit-left' : 'exit-right';\r\n const enterDir = direction === 'next' ? 'exit-right' : 'exit-left';\r\n\r\n \/\/ \u0625\u062e\u0631\u0627\u062c \u0627\u0644\u0633\u0644\u0627\u064a\u062f \u0627\u0644\u0642\u062f\u064a\u0645\r\n const oldSlide = slides[oldIndex];\r\n oldSlide.classList.remove('visible');\r\n oldSlide.classList.add(exitDir);\r\n\r\n \/\/ \u0625\u062f\u062e\u0627\u0644 \u0627\u0644\u0633\u0644\u0627\u064a\u062f \u0627\u0644\u062c\u062f\u064a\u062f\r\n const newSlide = slides[currentIndex];\r\n newSlide.classList.remove('exit-left', 'exit-right');\r\n newSlide.classList.add(enterDir);\r\n\r\n \/\/ \u062a\u0623\u062e\u064a\u0631 \u0628\u0633\u064a\u0637 \u0644\u0644\u062d\u0631\u0643\u0629\r\n requestAnimationFrame(() => {\r\n requestAnimationFrame(() => {\r\n newSlide.classList.remove(enterDir);\r\n newSlide.classList.add('visible');\r\n });\r\n });\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0646\u0642\u0627\u0637\r\n dots.forEach((d, i) => d.classList.toggle('active', i === currentIndex));\r\n currentSlideEl.textContent = currentIndex + 1;\r\n progressBar.style.width = `${((currentIndex + 1) \/ total) * 100}%`;\r\n\r\n setTimeout(() => {\r\n oldSlide.classList.remove(exitDir);\r\n isAnimating = false;\r\n }, 500);\r\n }\r\n\r\n function nextSlide() {\r\n const next = (currentIndex + 1) % total;\r\n goToSlide(next, 'next');\r\n }\r\n\r\n function prevSlide() {\r\n const prev = (currentIndex - 1 + total) % total;\r\n goToSlide(prev, 'prev');\r\n }\r\n\r\n nextBtn.addEventListener('click', () => {\r\n nextSlide();\r\n resetAutoPlay();\r\n });\r\n\r\n prevBtn.addEventListener('click', () => {\r\n prevSlide();\r\n resetAutoPlay();\r\n });\r\n\r\n dots.forEach(dot => {\r\n dot.addEventListener('click', () => {\r\n const target = parseInt(dot.dataset.index);\r\n const dir = target > currentIndex ? 'next' : 'prev';\r\n goToSlide(target, dir);\r\n resetAutoPlay();\r\n });\r\n });\r\n\r\n function startAutoPlay() {\r\n autoPlayInterval = setInterval(nextSlide, 4000);\r\n }\r\n\r\n function resetAutoPlay() {\r\n clearInterval(autoPlayInterval);\r\n startAutoPlay();\r\n }\r\n\r\n startAutoPlay();\r\n\r\n const sliderWrapper = document.querySelector('.slider-wrapper');\r\n sliderWrapper.addEventListener('mouseenter', () => clearInterval(autoPlayInterval));\r\n sliderWrapper.addEventListener('mouseleave', startAutoPlay);\r\n\r\n \/\/ Touch\r\n let touchStartX = 0;\r\n sliderWrapper.addEventListener('touchstart', e => {\r\n touchStartX = e.changedTouches[0].screenX;\r\n }, { passive: true });\r\n\r\n sliderWrapper.addEventListener('touchend', e => {\r\n const diff = touchStartX - e.changedTouches[0].screenX;\r\n if (Math.abs(diff) > 50) {\r\n if (diff > 0) nextSlide();\r\n else prevSlide();\r\n resetAutoPlay();\r\n }\r\n }, { passive: true });\r\n\r\n \/\/ Keyboard\r\n document.addEventListener('keydown', e => {\r\n if (e.key === 'ArrowLeft') { nextSlide(); resetAutoPlay(); }\r\n else if (e.key === 'ArrowRight') { prevSlide(); resetAutoPlay(); }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-72c8ee8 e-con-full e-flex e-con e-parent\" data-id=\"72c8ee8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hero | NNC \u062d\u0644\u0648\u0644 \u0631\u0642\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0646\u062c\u0627\u062d \u0623\u0639\u0645\u0627\u0644\u0643 \u062d\u0648\u0651\u0644 \u0623\u0641\u0643\u0627\u0631\u0643 \u0625\u0644\u0649 \u0648\u0627\u0642\u0639 \u0631\u0642\u0645\u064a \u0645\u0628\u0647\u0631 \u0646\u0642\u062f\u0645 \u0644\u0643 \u0643\u0644 \u0645\u0627 \u062a\u062d\u062a\u0627\u062c\u0647 \u0644\u0628\u0646\u0627\u0621 \u062d\u0636\u0648\u0631 \u0631\u0642\u0645\u064a \u0642\u0648\u064a \u2014 \u0645\u0646 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0625\u0644\u0649 \u0627\u0644\u0623\u062a\u0645\u062a\u0629 \u0648\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u0627\u0644\u062d\u0645\u0644\u0627\u062a \u0627\u0644\u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u0627\u0644\u0645\u0628\u062a\u0643\u0631\u0629 rocket_launch \u0627\u0628\u062f\u0623 \u0645\u0634\u0631\u0648\u0639\u0643 \u0627\u0644\u0622\u0646 visibility \u0627\u0633\u062a\u0643\u0634\u0641 \u062e\u062f\u0645\u0627\u062a\u0646\u0627 150+ \u0645\u0634\u0631\u0648\u0639 \u0645\u0643\u062a\u0645\u0644 80+ \u0639\u0645\u064a\u0644 \u0633\u0639\u064a\u062f 5+ \u0633\u0646\u0648\u0627\u062a \u062e\u0628\u0631\u0629 24\/7 \u062f\u0639\u0645 \u0645\u0633\u062a\u0645\u0631 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-48","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/noname-co.store\/index.php?rest_route=\/wp\/v2\/pages\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/noname-co.store\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/noname-co.store\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/noname-co.store\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/noname-co.store\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=48"}],"version-history":[{"count":5,"href":"https:\/\/noname-co.store\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions"}],"predecessor-version":[{"id":1090,"href":"https:\/\/noname-co.store\/index.php?rest_route=\/wp\/v2\/pages\/48\/revisions\/1090"}],"wp:attachment":[{"href":"https:\/\/noname-co.store\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}