\u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc | \u062e\u062f\u0645\u0627\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a\u060c \u0633\u0626\u0648 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/title>\r\n\r\n \r\n <link href=\"https:\/\/cdn.jsdelivr.net\/gh\/rastikerdar\/vazirmatn@v33.003\/Vazirmatn-font-face.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Vazirmatn', 'sans-serif'],\r\n },\r\n colors: {\r\n primary: '#152a36', \/\/ Indigo 600\r\n secondary: '#ffa541', \/\/ Cyan 500\r\n dark: '#0F172A', \/\/ Slate 900\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n \/* Custom Styles for smooth transitions and specific UI elements *\/\r\n html { scroll-behavior: smooth; }\r\n body { font-family: 'Vazirmatn', sans-serif; -webkit-font-smoothing: antialiased; }\r\n .page-section { display: none; animation: fadeIn 0.5s ease-in-out; }\r\n .page-section.active { display: block; }\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n \r\n .gradient-text {\r\n background: linear-gradient(to left, #152a36, #06B6D4);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n \r\n .gradient-bg {\r\n background: linear-gradient(135deg, #152a36 0%, #06B6D4 100%);\r\n }\r\n\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.9);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* Hide scrollbar for clean look in filter row *\/\r\n .no-scrollbar::-webkit-scrollbar { display: none; }\r\n .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800\">\r\n\r\n \r\n <header class=\"fixed top-0 left-0 right-0 z-50 bg-white\/90 backdrop-blur-md shadow-sm border-b border-slate-200 transition-all duration-300\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-20\">\r\n \r\n <div class=\"flex-shrink-0 cursor-pointer\" onclick=\"navigate('home')\">\r\n <h1 class=\"text-2xl font-black text-dark flex items-center gap-2\">\r\n <i class=\"fa-solid fa-code text-primary\"><\/i>\r\n \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 <span class=\"gradient-text\">\u0645\u062e\u062f\u0648\u0645\u06cc<\/span>\r\n <\/h1>\r\n <\/div>\r\n\r\n \r\n <nav class=\"hidden md:flex space-x-8 space-x-reverse items-center\">\r\n <button onclick=\"navigate('home')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u062e\u0627\u0646\u0647<\/button>\r\n <button onclick=\"navigate('about')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/button>\r\n <button onclick=\"navigate('services')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u062e\u062f\u0645\u0627\u062a<\/button>\r\n <button onclick=\"navigate('portfolio')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627<\/button>\r\n <button onclick=\"navigate('contact')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/button>\r\n <\/nav>\r\n\r\n \r\n <div class=\"hidden md:block\">\r\n <button onclick=\"navigate('contact')\" class=\"gradient-bg text-white px-6 py-2.5 rounded-full font-semibold shadow-lg shadow-primary\/30 hover:shadow-primary\/50 transform hover:-translate-y-0.5 transition-all\">\r\n \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"md:hidden flex items-center\">\r\n <button id=\"mobile-menu-btn\" class=\"text-slate-600 hover:text-primary focus:outline-none p-2\">\r\n <i class=\"fa-solid fa-bars text-2xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-white border-t border-slate-100 shadow-lg absolute w-full left-0\">\r\n <div class=\"px-4 pt-2 pb-6 space-y-1\">\r\n <button onclick=\"navigate('home'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u062e\u0627\u0646\u0647<\/button>\r\n <button onclick=\"navigate('about'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/button>\r\n <button onclick=\"navigate('services'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u062e\u062f\u0645\u0627\u062a<\/button>\r\n <button onclick=\"navigate('portfolio'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627<\/button>\r\n <button onclick=\"navigate('contact'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/button>\r\n <button onclick=\"navigate('contact'); closeMobileMenu()\" class=\"mt-4 w-full gradient-bg text-white px-4 py-3 rounded-xl font-semibold shadow-md text-center\">\u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <main class=\"pt-20 min-h-screen\">\r\n\r\n \r\n <section id=\"home\" class=\"page-section active\">\r\n \r\n <div class=\"relative bg-white overflow-hidden\">\r\n <div class=\"absolute inset-y-0 right-0 w-1\/2 bg-slate-50 rounded-l-full opacity-50\"><\/div>\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center py-20 lg:py-32\">\r\n <div>\r\n <span class=\"inline-block py-1 px-3 rounded-full bg-primary\/10 text-primary font-semibold text-sm mb-6 border border-primary\/20\">\ud83d\ude80 \u062a\u062d\u0648\u0644\u06cc \u0646\u0648\u06cc\u0646 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644<\/span>\r\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-black text-dark leading-tight mb-6\">\r\n \u0622\u06cc\u0646\u062f\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627 \u0628\u0627 <br \/>\r\n <span class=\"gradient-text\">\u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/span>\r\n <\/h2>\r\n <p class=\"text-lg text-slate-600 mb-8 max-w-lg leading-relaxed\">\r\n \u0645\u0627 \u0628\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0648 \u0628\u0632\u0631\u06af\u060c \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0648 \u06a9\u0627\u0631\u0622\u0641\u0631\u06cc\u0646\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0627 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0627\u062e\u062a\u0635\u0627\u0635\u06cc\u060c \u0633\u0626\u0648\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u060c \u0641\u0631\u0648\u0634 \u062e\u0648\u062f \u0631\u0627 \u0686\u0646\u062f \u0628\u0631\u0627\u0628\u0631 \u06a9\u0646\u0646\u062f.\r\n <\/p>\r\n <div class=\"flex flex-col sm:flex-row gap-4\">\r\n <button onclick=\"navigate('services')\" class=\"gradient-bg text-white px-8 py-4 rounded-xl font-bold text-lg shadow-lg shadow-primary\/30 hover:-translate-y-1 transition-transform text-center\">\r\n \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f\r\n <i class=\"fa-solid fa-arrow-left ml-2\"><\/i>\r\n <\/button>\r\n <button onclick=\"navigate('portfolio')\" class=\"bg-white border-2 border-slate-200 text-slate-700 hover:border-primary hover:text-primary px-8 py-4 rounded-xl font-bold text-lg transition-colors text-center\">\r\n \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative\">\r\n <div class=\"absolute inset-0 gradient-bg rounded-3xl transform rotate-3 scale-105 opacity-20 blur-xl\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1498050108023-c5249f4df085.webp?auto=format&fit=crop&w=800&q=80\" alt=\"\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\" class=\"relative rounded-3xl shadow-2xl object-cover h-[500px] w-full border border-white\/50\">\r\n \r\n \r\n <div class=\"absolute -bottom-6 -right-6 glass-card p-4 rounded-2xl shadow-xl flex items-center gap-4\">\r\n <div class=\"bg-green-100 p-3 rounded-full text-green-600\">\r\n <i class=\"fa-solid fa-chart-line text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"text-sm text-slate-500 font-medium\">\u0627\u0641\u0632\u0627\u06cc\u0634 \u0641\u0631\u0648\u0634<\/p>\r\n <p class=\"text-xl font-bold text-dark\">+\u06f2\u06f0\u06f0\u066a<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-dark py-10\">\r\n <div class=\"container mx-auto px-4\">\r\n <p class=\"text-center text-slate-400 text-sm font-semibold mb-6 uppercase tracking-wider\">\u0645\u0648\u0631\u062f \u0627\u0639\u062a\u0645\u0627\u062f \u0628\u06cc\u0634 \u0627\u0632 \u06f5\u06f0 \u0628\u0631\u0646\u062f \u0648 \u06a9\u0627\u0631\u0622\u0641\u0631\u06cc\u0646<\/p>\r\n <div class=\"flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-50 grayscale hover:grayscale-0 transition-all duration-500\">\r\n <i class=\"fa-brands fa-aws text-4xl text-white\"><\/i>\r\n <i class=\"fa-brands fa-google text-4xl text-white\"><\/i>\r\n <i class=\"fa-brands fa-meta text-4xl text-white\"><\/i>\r\n <i class=\"fa-brands fa-shopify text-4xl text-white\"><\/i>\r\n <i class=\"fa-brands fa-wordpress text-4xl text-white\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-slate-50\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-3xl mx-auto mb-16\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark mb-4\">\u0686\u0631\u0627 \u0645\u062e\u062f\u0648\u0645\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644\u061f<\/h2>\r\n <p class=\"text-slate-600\">\u0645\u0632\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0631\u0627 \u0627\u0632 \u0631\u0642\u0628\u0627 \u0645\u062a\u0645\u0627\u06cc\u0632 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0647 \u0631\u0634\u062f \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-primary\/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-bolt text-3xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0633\u0631\u0639\u062a \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u06cc\u200c\u0646\u0638\u06cc\u0631<\/h3>\r\n <p class=\"text-slate-600 leading-relaxed\">\u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0645\u0627 \u062f\u0631 \u06a9\u0633\u0631\u06cc \u0627\u0632 \u062b\u0627\u0646\u06cc\u0647 \u0644\u0648\u062f \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u06a9\u0647 \u0628\u0627\u0639\u062b \u0628\u0647\u0628\u0648\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0631\u062a\u0628\u0647 \u06af\u0648\u06af\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-secondary\/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-robot text-3xl text-secondary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 leading-relaxed\">\u0628\u0627 \u062e\u0648\u062f\u06a9\u0627\u0631\u0633\u0627\u0632\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc \u062a\u0648\u0633\u0637 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648 \u0647\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0646\u06cc\u0631\u0648\u06cc \u0627\u0646\u0633\u0627\u0646\u06cc \u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-purple-100 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-magnifying-glass-chart text-3xl text-purple-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0626\u0648 \u0645\u062d\u0648\u0631<\/h3>\r\n <p class=\"text-slate-600 leading-relaxed\">\u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u0628\u0647\u06cc\u0646\u0647\u060c \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0647\u062f\u0641 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0648\u0644 \u06af\u0648\u06af\u0644 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0646\u062f.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-white\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between items-end mb-12\">\r\n <div class=\"max-w-2xl\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark mb-4\">\u062e\u062f\u0645\u0627\u062a \u062a\u062e\u0635\u0635\u06cc \u0645\u0627<\/h2>\r\n <p class=\"text-slate-600\">\u0631\u0627\u0647\u06a9\u0627\u0631\u0647\u0627\u06cc \u062c\u0627\u0645\u0639 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0628\u0631\u0627\u06cc \u0631\u0647\u0628\u0631\u06cc \u062f\u0631 \u0628\u0627\u0632\u0627\u0631.<\/p>\r\n <\/div>\r\n <button onclick=\"navigate('services')\" class=\"hidden md:flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all\">\r\n \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647 \u062e\u062f\u0645\u0627\u062a\r\n <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n \r\n <div class=\"group rounded-3xl overflow-hidden bg-slate-50 border border-slate-100\">\r\n <div class=\"h-48 overflow-hidden relative\">\r\n <div class=\"absolute inset-0 bg-dark\/20 group-hover:bg-transparent transition-colors z-10\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1547658719-da2b51169166.webp\" alt=\"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\">\r\n <\/div>\r\n <div class=\"p-8\">\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/h3>\r\n <p class=\"text-slate-600 mb-6 line-clamp-2\">\u0637\u0631\u0627\u062d\u06cc \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc\u060c \u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a\u06cc \u0648 \u067e\u0648\u0631\u062a\u0627\u0644\u200c\u0647\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0628\u0627 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062f\u0631\u0646.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-semibold hover:text-dark transition-colors\">\u062b\u0628\u062a \u0633\u0641\u0627\u0631\u0634 <i class=\"fa-solid fa-chevron-left text-sm ml-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"group rounded-3xl overflow-hidden bg-slate-50 border border-slate-100\">\r\n <div class=\"h-48 overflow-hidden relative\">\r\n <div class=\"absolute inset-0 bg-dark\/20 group-hover:bg-transparent transition-colors z-10\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1460925895917-afdab827c52f.webp\" alt=\"\u0633\u0626\u0648 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\">\r\n <\/div>\r\n <div class=\"p-8\">\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0633\u0626\u0648 \u0648 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af<\/h3>\r\n <p class=\"text-slate-600 mb-6 line-clamp-2\">\u0627\u0641\u0632\u0627\u06cc\u0634 \u0628\u0627\u0632\u062f\u06cc\u062f \u0627\u0631\u06af\u0627\u0646\u06cc\u06a9 \u0633\u0627\u06cc\u062a \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0648\u0641\u0627\u062f\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u200c\u0647\u0627\u06cc \u062f\u0627\u062f\u0647\u200c\u0645\u062d\u0648\u0631.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-semibold hover:text-dark transition-colors\">\u062b\u0628\u062a \u0633\u0641\u0627\u0631\u0634 <i class=\"fa-solid fa-chevron-left text-sm ml-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"group rounded-3xl overflow-hidden bg-slate-50 border border-slate-100 md:hidden lg:block\">\r\n <div class=\"h-48 overflow-hidden relative\">\r\n <div class=\"absolute inset-0 bg-dark\/20 group-hover:bg-transparent transition-colors z-10\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1677442136019-21780ecad995.webp\" alt=\"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\">\r\n <\/div>\r\n <div class=\"p-8\">\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 mb-6 line-clamp-2\">\u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0686\u062a\u200c\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f\u060c \u067e\u0631\u062f\u0627\u0632\u0634 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 \u062e\u0648\u062f\u06a9\u0627\u0631\u0633\u0627\u0632\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-semibold hover:text-dark transition-colors\">\u062b\u0628\u062a \u0633\u0641\u0627\u0631\u0634 <i class=\"fa-solid fa-chevron-left text-sm ml-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-slate-900 text-white relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-primary\/20 rounded-full blur-3xl -translate-y-1\/2 translate-x-1\/2\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-96 h-96 bg-secondary\/20 rounded-full blur-3xl translate-y-1\/2 -translate-x-1\/2\"><\/div>\r\n \r\n <div class=\"container mx-auto px-4 relative z-10\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-16\">\u0646\u0638\u0631\u0627\u062a \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u0648\u0641\u0642 \u0645\u0627<\/h2>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n <div class=\"bg-white\/10 backdrop-blur-lg p-8 rounded-3xl border border-white\/10\">\r\n <div class=\"flex text-yellow-400 mb-4 text-sm gap-1\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"text-slate-300 mb-6 leading-relaxed\">\"\u0637\u0631\u0627\u062d\u06cc \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0645\u0627 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0627\u0646\u062a\u0638\u0627\u0631 \u0628\u0648\u062f. \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u0648 \u0633\u0631\u0639\u062a \u0639\u0627\u0644\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627\u0639\u062b \u0634\u062f \u0641\u0631\u0648\u0634 \u0645\u0627 \u062f\u0631 \u0645\u0627\u0647 \u0627\u0648\u0644 \u06f3 \u0628\u0631\u0627\u0628\u0631 \u0634\u0648\u062f.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center text-xl font-bold\">\u0639<\/div>\r\n <div>\r\n <h4 class=\"font-bold\">\u0639\u0644\u06cc \u0631\u0636\u0627\u06cc\u06cc<\/h4>\r\n <p class=\"text-sm text-slate-400\">\u0645\u062f\u06cc\u0631 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0645\u062f \u0648 \u0644\u0628\u0627\u0633<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white\/10 backdrop-blur-lg p-8 rounded-3xl border border-white\/10\">\r\n <div class=\"flex text-yellow-400 mb-4 text-sm gap-1\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"text-slate-300 mb-6 leading-relaxed\">\"\u062e\u062f\u0645\u0627\u062a \u0633\u0626\u0648 \u0633\u0627\u06cc\u062a \u0645\u062e\u062f\u0648\u0645\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0639\u0627\u0644\u06cc \u0628\u0648\u062f. \u067e\u0633 \u0627\u0632 \u06f3 \u0645\u0627\u0647\u060c \u0631\u0648\u06cc \u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0627\u0635\u0644\u06cc \u0628\u0647 \u0635\u0641\u062d\u0647 \u0627\u0648\u0644 \u06af\u0648\u06af\u0644 \u0631\u0633\u06cc\u062f\u06cc\u0645 \u0648 \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc\u0645\u0627\u0646 \u0628\u0647 \u0634\u062f\u062a \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0641\u062a.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center text-xl font-bold\">\u0645<\/div>\r\n <div>\r\n <h4 class=\"font-bold\">\u0645\u0631\u06cc\u0645 \u0627\u062d\u0645\u062f\u06cc<\/h4>\r\n <p class=\"text-sm text-slate-400\">\u0645\u062f\u06cc\u0631\u0639\u0627\u0645\u0644 \u0634\u0631\u06a9\u062a \u062e\u062f\u0645\u0627\u062a\u06cc<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white\/10 backdrop-blur-lg p-8 rounded-3xl border border-white\/10 md:hidden lg:block\">\r\n <div class=\"flex text-yellow-400 mb-4 text-sm gap-1\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"text-slate-300 mb-6 leading-relaxed\">\"\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0686\u062a\u200c\u0628\u0627\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0648\u06cc \u0633\u0627\u06cc\u062a \u0645\u0627\u060c \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0634\u06cc\u0641\u062a \u0634\u0628 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f \u0648 \u0631\u0636\u0627\u06cc\u062a \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u062f\u0627\u0634\u062a. \u06cc\u06a9 \u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0639\u0627\u0644\u06cc!\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center text-xl font-bold\">\u0633<\/div>\r\n <div>\r\n <h4 class=\"font-bold\">\u0633\u0639\u06cc\u062f \u06a9\u0631\u06cc\u0645\u06cc<\/h4>\r\n <p class=\"text-sm text-slate-400\">\u0628\u0646\u06cc\u0627\u0646\u200c\u06af\u0630\u0627\u0631 \u0627\u0633\u062a\u0627\u0631\u062a\u0627\u067e<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-white\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex flex-col md:flex-row items-center gap-16\">\r\n <div class=\"w-full md:w-1\/2\">\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1522071820081-009f0129c71c.webp\" alt=\"\u062a\u06cc\u0645 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a\" class=\"rounded-3xl shadow-xl w-full\">\r\n <\/div>\r\n <div class=\"w-full md:w-1\/2\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark mb-6\">\u062e\u0644\u0627\u0642\u06cc\u062a\u060c \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0648 \u062a\u0639\u0647\u062f<\/h2>\r\n <p class=\"text-slate-600 text-lg mb-6 leading-relaxed\">\r\n \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc\u060c \u0645\u0627 \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u06af\u0631\u0648\u0647 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc \u0646\u06cc\u0633\u062a\u06cc\u0645\u061b \u0645\u0627 \u0634\u0631\u06cc\u06a9 \u0631\u0634\u062f \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645. \u0628\u0627 \u062a\u06cc\u0645\u06cc \u0627\u0632 \u0645\u062a\u062e\u0635\u0635\u0627\u0646 \u062e\u0644\u0627\u0642 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc\u060c \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u0631\u0648\u06cc\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0648\u0627\u0642\u0639\u06cc\u062a \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\r\n <\/p>\r\n <ul class=\"space-y-4 mb-8\">\r\n <li class=\"flex items-center gap-3 text-slate-700 font-medium\"><i class=\"fa-solid fa-check text-green-500 bg-green-100 p-1 rounded-full text-sm\"><\/i> \u0628\u06cc\u0634 \u0627\u0632 \u06f5 \u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647 \u062a\u062e\u0635\u0635\u06cc<\/li>\r\n <li class=\"flex items-center gap-3 text-slate-700 font-medium\"><i class=\"fa-solid fa-check text-green-500 bg-green-100 p-1 rounded-full text-sm\"><\/i> \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06f2\u06f4 \u0633\u0627\u0639\u062a\u0647 \u0648\u0627\u0642\u0639\u06cc<\/li>\r\n <li class=\"flex items-center gap-3 text-slate-700 font-medium\"><i class=\"fa-solid fa-check text-green-500 bg-green-100 p-1 rounded-full text-sm\"><\/i> \u062a\u0636\u0645\u06cc\u0646 \u06a9\u06cc\u0641\u06cc\u062a \u0648 \u0628\u0627\u0632\u06af\u0634\u062a \u0648\u062c\u0647<\/li>\r\n <\/ul>\r\n <button onclick=\"navigate('about')\" class=\"text-primary font-bold border-b-2 border-primary pb-1 hover:text-dark hover:border-dark transition-colors\">\u0628\u06cc\u0634\u062a\u0631 \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50\">\r\n <div class=\"container mx-auto px-4\">\r\n <div class=\"gradient-bg rounded-[3rem] p-10 md:p-16 text-center text-white relative overflow-hidden shadow-2xl\">\r\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-white\/10 rounded-full blur-2xl -translate-y-1\/2 translate-x-1\/2\"><\/div>\r\n <div class=\"relative z-10 max-w-2xl mx-auto\">\r\n <h2 class=\"text-3xl md:text-5xl font-black mb-6\">\u0622\u0645\u0627\u062f\u0647 \u062a\u062d\u0648\u0644 \u062f\u0631 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u062a\u0627\u0646 \u0647\u0633\u062a\u06cc\u062f\u061f<\/h2>\r\n <p class=\"text-lg md:text-xl text-white\/90 mb-10\">\u0647\u0645\u06cc\u0646 \u062d\u0627\u0644\u0627 \u0628\u0627 \u0645\u0627 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f \u062a\u0627 \u062f\u0631 \u06cc\u06a9 \u062c\u0644\u0633\u0647 \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\u060c \u0646\u0642\u0634\u0647 \u0631\u0627\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0631\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u0645.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"bg-primary text-white px-10 py-4 rounded-xl font-bold text-lg shadow-lg hover:hover:scale-105 transition-all\">\r\n \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\" class=\"page-section\">\r\n \r\n <div class=\"bg-slate-900 text-white py-24 text-center\">\r\n <div class=\"container mx-auto px-4\">\r\n <h1 class=\"text-4xl md:text-5xl font-black mb-4\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc<\/h1>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u062a\u06cc\u0645\u06cc \u06a9\u0647 \u067e\u0634\u062a \u067e\u0631\u062f\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0634\u0645\u0627\u0633\u062a.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-white\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <span class=\"text-primary font-bold tracking-wider text-sm uppercase mb-2 block\">\u062f\u0627\u0633\u062a\u0627\u0646 \u0645\u0627<\/span>\r\n <h2 class=\"text-3xl font-bold text-dark mb-6\">\u0627\u0632 \u06cc\u06a9 \u0627\u06cc\u062f\u0647 \u06a9\u0648\u0686\u06a9 \u062a\u0627 \u06cc\u06a9 \u06af\u0631\u0648\u0647 \u062a\u0645\u0627\u0645\u200c\u0639\u06cc\u0627\u0631<\/h2>\r\n <p class=\"text-slate-600 leading-relaxed mb-4 text-justify\">\r\n \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0627\u0632 \u06cc\u06a9 \u0646\u06cc\u0627\u0632 \u0633\u0627\u062f\u0647 \u0634\u0631\u0648\u0639 \u0634\u062f\u061b \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u067e\u062a\u0627\u0646\u0633\u06cc\u0644 \u0628\u0627\u0644\u0627\u06cc\u06cc \u062f\u0627\u0634\u062a\u0646\u062f \u0627\u0645\u0627 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0622\u0646\u0644\u0627\u06cc\u0646 \u062f\u06cc\u062f\u0647 \u0646\u0645\u06cc\u200c\u0634\u062f\u0646\u062f. \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc \u0628\u0627 \u0647\u062f\u0641 \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u062e\u0644\u0627\u0621 \u0645\u062a\u0648\u0644\u062f \u0634\u062f. \u0645\u0627 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u06cc\u0645 \u06a9\u0647 \u062f\u0627\u0634\u062a\u0646 \u06cc\u06a9 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0628\u0647 \u062a\u0646\u0647\u0627\u06cc\u06cc \u06a9\u0627\u0641\u06cc \u0646\u06cc\u0633\u062a\u061b \u0628\u0644\u06a9\u0647 \u062a\u0644\u0641\u06cc\u0642 \u0637\u0631\u0627\u062d\u06cc \u0632\u06cc\u0628\u0627\u060c \u0645\u0647\u0646\u062f\u0633\u06cc \u0633\u0626\u0648 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.\r\n <\/p>\r\n <p class=\"text-slate-600 leading-relaxed text-justify\">\r\n \u0627\u0645\u0631\u0648\u0632\u060c \u0645\u0627 \u0645\u0641\u062a\u062e\u0631\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0635\u062f\u0647\u0627 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u06a9\u0648\u0686\u06a9 \u0648 \u0628\u0632\u0631\u06af\u060c \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0648 \u06a9\u0627\u0631\u0622\u0641\u0631\u06cc\u0646\u0627\u0646 \u0622\u0646\u0644\u0627\u06cc\u0646 \u06a9\u0645\u06a9 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u062a\u0627 \u0632\u06cc\u0631\u0633\u0627\u062e\u062a \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0646\u0627 \u06a9\u0646\u0646\u062f \u0648 \u0641\u0631\u0648\u0634 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0637\u0631\u0632 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u0646\u062f.\r\n <\/p>\r\n <\/div>\r\n <div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?auto=format&fit=crop&w=800&q=80\" alt=\"\u062c\u0644\u0633\u0647 \u062a\u06cc\u0645 \u06a9\u0627\u0631\u06cc\" class=\"rounded-3xl shadow-xl w-full\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl text-center\">\r\n <i class=\"fa-solid fa-bullseye text-5xl text-primary mb-6\"><\/i>\r\n <h2 class=\"text-3xl font-bold text-dark mb-6\">\u0645\u0623\u0645\u0648\u0631\u06cc\u062a \u0645\u0627<\/h2>\r\n <p class=\"text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto\">\r\n \"\u062a\u0648\u0627\u0646\u0645\u0646\u062f\u0633\u0627\u0632\u06cc \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u0647\u0627 \u062f\u0631 \u0639\u0635\u0631 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0631\u0627\u0626\u0647 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0646\u0648\u06cc\u0646 \u062a\u062d\u062a \u0648\u0628\u060c \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0648 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631 \u0631\u0642\u0627\u0628\u062a \u062c\u0647\u0627\u0646\u06cc \u067e\u06cc\u0634\u0631\u0648 \u0628\u0627\u0634\u0646\u062f.\"\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-white\">\r\n <div class=\"container mx-auto px-4\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-center text-dark mb-16\">\u0648\u062c\u0647 \u062a\u0645\u0627\u06cc\u0632 \u0645\u0627 \u0646\u0633\u0628\u062a \u0628\u0647 \u0631\u0642\u0628\u0627<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n <div class=\"text-center\">\r\n <div class=\"w-20 h-20 mx-auto bg-primary\/10 rounded-full flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-brain text-3xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-xl mb-3\">\u0646\u06af\u0627\u0647 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 text-sm\">\u0645\u0627 \u0641\u0642\u0637 \u0633\u0627\u06cc\u062a \u0646\u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u0645\u060c \u0628\u0644\u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc AI \u0628\u0631\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0648 \u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647 \u0645\u062c\u0647\u0632 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"w-20 h-20 mx-auto bg-secondary\/10 rounded-full flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-palette text-3xl text-secondary\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-xl mb-3\">\u0637\u0631\u0627\u062d\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/h3>\r\n <p class=\"text-slate-600 text-sm\">\u062e\u062f\u0627\u062d\u0627\u0641\u0638\u06cc \u0628\u0627 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u0622\u0645\u0627\u062f\u0647! \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0631\u0646\u062f \u0634\u0645\u0627 \u0627\u0632 \u0635\u0641\u0631 \u062a\u0627 \u0635\u062f \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0647\u0648\u06cc\u062a \u0634\u0645\u0627 \u0637\u0631\u0627\u062d\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"w-20 h-20 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-chart-pie text-3xl text-green-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-xl mb-3\">\u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u062f\u0627\u062f\u0647\u200c\u0645\u062d\u0648\u0631<\/h3>\r\n <p class=\"text-slate-600 text-sm\">\u062a\u0635\u0645\u06cc\u0645\u0627\u062a \u0633\u0626\u0648 \u0648 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af \u0645\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062d\u062f\u0633 \u0648 \u06af\u0645\u0627\u0646 \u0646\u06cc\u0633\u062a\u060c \u0628\u0644\u06a9\u0647 \u0628\u0631 \u067e\u0627\u06cc\u0647 \u0622\u0646\u0627\u0644\u06cc\u0632 \u062f\u0642\u06cc\u0642 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u0633\u062a.<\/p>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"w-20 h-20 mx-auto bg-orange-100 rounded-full flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-headset text-3xl text-orange-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-xl mb-3\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0648\u0627\u0642\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 text-sm\">\u0645\u0627 \u067e\u0633 \u0627\u0632 \u062a\u062d\u0648\u06cc\u0644 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0631\u0647\u0627 \u0646\u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u062a\u06cc\u0645 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0627 \u0647\u0645\u0648\u0627\u0631\u0647 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0634\u0645\u0627\u0633\u062a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-16 bg-slate-900 text-center\">\r\n <h2 class=\"text-3xl font-bold text-white mb-8\">\u0628\u0647 \u062e\u0627\u0646\u0648\u0627\u062f\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u0648\u0641\u0642 \u0645\u0627 \u0628\u067e\u06cc\u0648\u0646\u062f\u06cc\u062f<\/h2>\r\n <button onclick=\"navigate('contact')\" class=\"gradient-bg text-white px-8 py-4 rounded-xl font-bold text-lg shadow-lg hover:shadow-primary\/50 transition-all\">\r\n \u0634\u0631\u0648\u0639 \u0647\u0645\u06a9\u0627\u0631\u06cc\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"services\" class=\"page-section\">\r\n \r\n <div class=\"bg-slate-900 text-white py-24 text-center\">\r\n <div class=\"container mx-auto px-4\">\r\n <h1 class=\"text-4xl md:text-5xl font-black mb-4\">\u062e\u062f\u0645\u0627\u062a \u062a\u062e\u0635\u0635\u06cc \u0645\u0627<\/h1>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\u0631\u0627\u0647\u06a9\u0627\u0631\u0647\u0627\u06cc \u062c\u0627\u0645\u0639 \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc\u060c \u062f\u06cc\u062f\u0647 \u0634\u062f\u0646 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n \r\n \r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-200\">\r\n <i class=\"fa-solid fa-laptop-code text-5xl text-primary mb-6\"><\/i>\r\n <h3 class=\"text-2xl font-bold text-dark mb-4\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u0641\u0631\u0648\u0634\u06af\u0627\u0647<\/h3>\r\n <p class=\"text-slate-600 mb-6 leading-relaxed\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648\u060c \u0633\u0631\u06cc\u0639 \u0648 \u0628\u0627 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062c\u0630\u0627\u0628. \u0627\u0632 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a\u06cc \u062a\u0627 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc.<\/p>\r\n <ul class=\"space-y-2 mb-8 text-sm text-slate-700\">\r\n <li><i class=\"fa-solid fa-check text-primary ml-2\"><\/i> \u0637\u0631\u0627\u062d\u06cc UI\/UX \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/li>\r\n <li><i class=\"fa-solid fa-check text-primary ml-2\"><\/i> \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0648 \u0628\u06a9\u200c\u0627\u0646\u062f<\/li>\r\n <li><i class=\"fa-solid fa-check text-primary ml-2\"><\/i> \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u062f\u0631\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u067e\u0631\u062f\u0627\u062e\u062a<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-200\">\r\n <i class=\"fa-solid fa-magnifying-glass-chart text-5xl text-secondary mb-6\"><\/i>\r\n <h3 class=\"text-2xl font-bold text-dark mb-4\">\u062e\u062f\u0645\u0627\u062a \u0633\u0626\u0648 (SEO)<\/h3>\r\n <p class=\"text-slate-600 mb-6 leading-relaxed\">\u062d\u0636\u0648\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0648\u0644 \u06af\u0648\u06af\u0644 \u06a9\u0644\u06cc\u062f \u0645\u0648\u0641\u0642\u06cc\u062a \u0627\u0633\u062a. \u0645\u0627 \u0628\u0627 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u06a9\u0646\u06cc\u06a9\u0627\u0644\u060c \u0633\u0626\u0648\u06cc \u062f\u0627\u062e\u0644\u06cc \u0648 \u062e\u0627\u0631\u062c\u06cc\u060c \u062a\u0631\u0627\u0641\u06cc\u06a9 \u0647\u062f\u0641\u0645\u0646\u062f \u0631\u0627 \u0628\u0647 \u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0633\u0631\u0627\u0632\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\r\n <ul class=\"space-y-2 mb-8 text-sm text-slate-700\">\r\n <li><i class=\"fa-solid fa-check text-secondary ml-2\"><\/i> \u062a\u062d\u0642\u06cc\u0642 \u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0642\u0627\u0628\u062a\u06cc<\/li>\r\n <li><i class=\"fa-solid fa-check text-secondary ml-2\"><\/i> \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0631\u0639\u062a \u0648 \u0633\u0627\u062e\u062a\u0627\u0631<\/li>\r\n <li><i class=\"fa-solid fa-check text-secondary ml-2\"><\/i> \u0644\u06cc\u0646\u06a9\u200c\u0633\u0627\u0632\u06cc \u06a9\u0644\u0627\u0647 \u0633\u0641\u06cc\u062f \u0648 \u0645\u0639\u062a\u0628\u0631<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-200\">\r\n <i class=\"fa-solid fa-microchip text-5xl text-purple-600 mb-6\"><\/i>\r\n <h3 class=\"text-2xl font-bold text-dark mb-4\">\u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 mb-6 leading-relaxed\">\u06a9\u0627\u0647\u0634 \u0647\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0631\u0639\u062a \u0628\u0627 \u0627\u062f\u063a\u0627\u0645 AI \u062f\u0631 \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631. \u0627\u0632 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u062a\u0627 \u062a\u062d\u0644\u06cc\u0644 \u06a9\u0644\u0627\u0646\u200c\u062f\u0627\u062f\u0647\u200c\u0647\u0627.<\/p>\r\n <ul class=\"space-y-2 mb-8 text-sm text-slate-700\">\r\n <li><i class=\"fa-solid fa-check text-purple-600 ml-2\"><\/i> \u0637\u0631\u0627\u062d\u06cc \u0686\u062a\u200c\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/li>\r\n <li><i class=\"fa-solid fa-check text-purple-600 ml-2\"><\/i> \u062e\u0648\u062f\u06a9\u0627\u0631\u0633\u0627\u0632\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u0641\u0631\u0648\u0634<\/li>\r\n <li><i class=\"fa-solid fa-check text-purple-600 ml-2\"><\/i> \u062a\u062d\u0644\u06cc\u0644 \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0627 AI<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-white\">\r\n <div class=\"container mx-auto px-4\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-center text-dark mb-16\">\u0645\u0631\u0627\u062d\u0644 \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631<\/h2>\r\n <div class=\"max-w-4xl mx-auto\">\r\n <div class=\"relative border-r-4 border-slate-100 pr-8 md:pr-0 md:border-r-0\">\r\n \r\n <div class=\"hidden md:block absolute top-1\/2 left-0 right-0 h-1 bg-slate-100 -translate-y-1\/2 z-0\"><\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-4 relative z-10\">\r\n \r\n <div class=\"relative md:text-center\">\r\n <div class=\"w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-xl absolute -right-[42px] top-0 md:static md:mx-auto md:mb-4 shadow-lg shadow-primary\/30\">\u06f1<\/div>\r\n <h4 class=\"font-bold text-lg mb-2 text-dark\">\u0645\u0634\u0627\u0648\u0631\u0647 \u0648 \u0646\u06cc\u0627\u0632\u0633\u0646\u062c\u06cc<\/h4>\r\n <p class=\"text-slate-500 text-sm\">\u0628\u0631\u0631\u0633\u06cc \u0627\u0647\u062f\u0627\u0641 \u0634\u0645\u0627 \u0648 \u0627\u0631\u0627\u0626\u0647 \u067e\u0631\u0648\u067e\u0648\u0632\u0627\u0644 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc.<\/p>\r\n <\/div>\r\n <div class=\"relative md:text-center\">\r\n <div class=\"w-12 h-12 bg-white border-4 border-primary text-primary rounded-full flex items-center justify-center font-bold text-xl absolute -right-[42px] top-0 md:static md:mx-auto md:mb-4 shadow-md\">\u06f2<\/div>\r\n <h4 class=\"font-bold text-lg mb-2 text-dark\">\u0637\u0631\u0627\u062d\u06cc \u0648 \u0627\u062c\u0631\u0627<\/h4>\r\n <p class=\"text-slate-500 text-sm\">\u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u0633\u0627\u06cc\u062a.<\/p>\r\n <\/div>\r\n <div class=\"relative md:text-center\">\r\n <div class=\"w-12 h-12 bg-white border-4 border-primary text-primary rounded-full flex items-center justify-center font-bold text-xl absolute -right-[42px] top-0 md:static md:mx-auto md:mb-4 shadow-md\">\u06f3<\/div>\r\n <h4 class=\"font-bold text-lg mb-2 text-dark\">\u062a\u0633\u062a \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/h4>\r\n <p class=\"text-slate-500 text-sm\">\u062a\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u06cc\u060c \u0633\u0631\u0639\u062a \u0648 \u0633\u0626\u0648\u06cc \u0627\u0648\u0644\u06cc\u0647.<\/p>\r\n <\/div>\r\n <div class=\"relative md:text-center\">\r\n <div class=\"w-12 h-12 bg-green-500 text-white rounded-full flex items-center justify-center font-bold text-xl absolute -right-[42px] top-0 md:static md:mx-auto md:mb-4 shadow-lg shadow-green-500\/30\">\u06f4<\/div>\r\n <h4 class=\"font-bold text-lg mb-2 text-dark\">\u062a\u062d\u0648\u06cc\u0644 \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc<\/h4>\r\n <p class=\"text-slate-500 text-sm\">\u0644\u0627\u0646\u0686 \u067e\u0631\u0648\u0698\u0647 \u0648 \u0634\u0631\u0648\u0639 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u062f\u0627\u0648\u0645.<\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50\">\r\n <div class=\"container mx-auto px-4 max-w-3xl\">\r\n <h2 class=\"text-3xl font-bold text-center text-dark mb-12\">\u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/h2>\r\n <div class=\"space-y-4\">\r\n <details class=\"bg-white rounded-xl border border-slate-200 group overflow-hidden\">\r\n <summary class=\"font-bold p-6 cursor-pointer text-dark flex justify-between items-center list-none select-none\">\r\n \u0637\u0631\u0627\u062d\u06cc \u06cc\u06a9 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0686\u0642\u062f\u0631 \u0632\u0645\u0627\u0646 \u0645\u06cc\u200c\u0628\u0631\u062f\u061f\r\n <span class=\"transition group-open:rotate-180\"><i class=\"fa-solid fa-chevron-down text-slate-400\"><\/i><\/span>\r\n <\/summary>\r\n <div class=\"p-6 pt-0 text-slate-600 leading-relaxed border-t border-slate-100\">\r\n \u0632\u0645\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u067e\u0631\u0648\u0698\u0647 \u0628\u0633\u062a\u06af\u06cc \u0628\u0647 \u06af\u0633\u062a\u0631\u062f\u06af\u06cc \u0648 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0622\u0646 \u062f\u0627\u0631\u062f. \u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a\u06cc \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u06cc\u0646 \u06f2 \u062a\u0627 \u06f3 \u0647\u0641\u062a\u0647 \u0648 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u06cc\u0646 \u06f1 \u062a\u0627 \u06f2 \u0645\u0627\u0647 \u0632\u0645\u0627\u0646 \u0645\u06cc\u200c\u0628\u0631\u0646\u062f.\r\n <\/div>\r\n <\/details>\r\n <details class=\"bg-white rounded-xl border border-slate-200 group overflow-hidden\">\r\n <summary class=\"font-bold p-6 cursor-pointer text-dark flex justify-between items-center list-none select-none\">\r\n \u0622\u06cc\u0627 \u062e\u062f\u0645\u0627\u062a \u0633\u0626\u0648 \u062a\u0636\u0645\u06cc\u0646\u06cc \u0627\u0633\u062a\u061f\r\n <span class=\"transition group-open:rotate-180\"><i class=\"fa-solid fa-chevron-down text-slate-400\"><\/i><\/span>\r\n <\/summary>\r\n <div class=\"p-6 pt-0 text-slate-600 leading-relaxed border-t border-slate-100\">\r\n \u062f\u0631 \u0633\u0626\u0648 \u0647\u06cc\u0686 \u062a\u0636\u0645\u06cc\u0646 \u0635\u062f \u062f\u0631 \u0635\u062f\u06cc \u0628\u0631\u0627\u06cc \u0631\u062a\u0628\u0647 \u06f1 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u06af\u0648\u06af\u0644 \u0645\u062a\u063a\u06cc\u0631 \u0647\u0633\u062a\u0646\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0647 \u0633\u0641\u06cc\u062f \u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u060c \u062a\u0631\u0627\u0641\u06cc\u06a9 \u0627\u0631\u06af\u0627\u0646\u06cc\u06a9 \u0634\u0645\u0627 \u0631\u0634\u062f \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.\r\n <\/div>\r\n <\/details>\r\n <details class=\"bg-white rounded-xl border border-slate-200 group overflow-hidden\">\r\n <summary class=\"font-bold p-6 cursor-pointer text-dark flex justify-between items-center list-none select-none\">\r\n \u0645\u0646\u0638\u0648\u0631 \u0627\u0632 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0686\u06cc\u0633\u062a\u061f\r\n <span class=\"transition group-open:rotate-180\"><i class=\"fa-solid fa-chevron-down text-slate-400\"><\/i><\/span>\r\n <\/summary>\r\n <div class=\"p-6 pt-0 text-slate-600 leading-relaxed border-t border-slate-100\">\r\n \u06cc\u0639\u0646\u06cc \u0633\u067e\u0631\u062f\u0646 \u06a9\u0627\u0631\u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc \u0627\u0646\u0633\u0627\u0646\u06cc \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f. \u0645\u062b\u0644\u0627\u064b \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06cc\u06a9 \u0646\u0641\u0631 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc \u0633\u0648\u0627\u0644\u0627\u062a \u062a\u06a9\u0631\u0627\u0631\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u062f\u0631 \u0633\u0627\u06cc\u062a \u0628\u0627\u0634\u062f\u060c \u06cc\u06a9 \u0631\u0628\u0627\u062a \u0647\u0648\u0634\u0645\u0646\u062f (\u0686\u062a\u200c\u0628\u0627\u062a) \u0628\u0627 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a \u0634\u0645\u0627\u060c \u062f\u0631 \u06f2\u06f4 \u0633\u0627\u0639\u062a \u0634\u0628\u0627\u0646\u0647\u200c\u0631\u0648\u0632 \u062f\u0642\u06cc\u0642\u200c\u062a\u0631\u06cc\u0646 \u067e\u0627\u0633\u062e\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-16 bg-white text-center\">\r\n <button onclick=\"navigate('contact')\" class=\"gradient-bg text-white px-8 py-4 rounded-xl font-bold text-lg shadow-lg hover:shadow-primary\/50 transition-all\">\r\n \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u0634\u0627\u0648\u0631\u0647 \u062e\u062f\u0645\u0627\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"portfolio\" class=\"page-section\">\r\n \r\n <div class=\"bg-slate-900 text-white py-24 text-center\">\r\n <div class=\"container mx-auto px-4\">\r\n <h1 class=\"text-4xl md:text-5xl font-black mb-4\">\u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627 \u0648 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627<\/h1>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u062f\u0627\u0633\u062a\u0627\u0646 \u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0631\u0646\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0639\u062a\u0645\u0627\u062f \u06a9\u0631\u062f\u0646\u062f.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-16 bg-slate-50 min-h-screen\">\r\n <div class=\"container mx-auto px-4\">\r\n \r\n \r\n <div class=\"flex overflow-x-auto no-scrollbar justify-start md:justify-center gap-4 mb-12 pb-4\">\r\n <button onclick=\"filterPortfolio('all')\" class=\"filter-btn active bg-primary text-white px-6 py-2 rounded-full font-medium whitespace-nowrap transition-colors border border-primary\">\u0647\u0645\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627<\/button>\r\n <button onclick=\"filterPortfolio('web')\" class=\"filter-btn bg-white text-slate-600 hover:text-primary px-6 py-2 rounded-full font-medium whitespace-nowrap transition-colors border border-slate-200\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a<\/button>\r\n <button onclick=\"filterPortfolio('seo')\" class=\"filter-btn bg-white text-slate-600 hover:text-primary px-6 py-2 rounded-full font-medium whitespace-nowrap transition-colors border border-slate-200\">\u0633\u0626\u0648<\/button>\r\n <button onclick=\"filterPortfolio('ai')\" class=\"filter-btn bg-white text-slate-600 hover:text-primary px-6 py-2 rounded-full font-medium whitespace-nowrap transition-colors border border-slate-200\">\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\" id=\"portfolio-grid\">\r\n \r\n \r\n <div class=\"portfolio-item web bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=600&q=80\" alt=\"\u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0645\u062f\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-blue-100 text-blue-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0628\u0627 \u0628\u06cc\u0634 \u0627\u0632 \u06f1\u06f0\u06f0\u06f0 \u0645\u062d\u0635\u0648\u0644 \u0648 \u0633\u06cc\u0633\u062a\u0645 \u0641\u06cc\u0644\u062a\u0631\u06cc\u0646\u06af \u067e\u06cc\u0634\u0631\u0641\u062a\u0647.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item seo bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=600&q=80\" alt=\"\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0633\u0627\u06cc\u062a\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-green-100 text-green-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0633\u0626\u0648 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u067e\u0648\u0631\u062a\u0627\u0644 \u062e\u0628\u0631\u06cc \u0627\u0642\u062a\u0635\u0627\u062f<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u0627\u0641\u0632\u0627\u06cc\u0634 \u06f2\u06f0\u06f0 \u062f\u0631\u0635\u062f\u06cc \u062a\u0631\u0627\u0641\u06cc\u06a9 \u0627\u0631\u06af\u0627\u0646\u06cc\u06a9 \u062f\u0631 \u06f6 \u0645\u0627\u0647 \u0628\u0627 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u062d\u062a\u0648\u0627 \u0648 \u0631\u0641\u0639 \u062e\u0637\u0627\u0647\u0627\u06cc \u062a\u06a9\u0646\u06cc\u06a9\u0627\u0644 \u0633\u0627\u06cc\u062a.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item ai bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=600&q=80\" alt=\"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0686\u062a \u0628\u0627\u062a\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-purple-100 text-purple-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u062f\u0633\u062a\u06cc\u0627\u0631 \u0647\u0648\u0634\u0645\u0646\u062f \u0634\u0631\u06a9\u062a \u0628\u06cc\u0645\u0647<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0686\u062a\u200c\u0628\u0627\u062a \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0628\u0631\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0622\u0646\u06cc \u0628\u0647 \u0627\u0633\u062a\u0639\u0644\u0627\u0645 \u0628\u06cc\u0645\u0647\u200c\u06af\u0630\u0627\u0631\u0627\u0646 \u0648 \u06a9\u0627\u0647\u0634 \u06f8\u06f0 \u062f\u0631\u0635\u062f\u06cc \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item web bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1499951360447-b19be8fe80f5?auto=format&fit=crop&w=600&q=80\" alt=\"\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-blue-100 text-blue-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc \u067e\u062a\u0631\u0648 \u0635\u0646\u0639\u062a<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062f\u0648\u0632\u0628\u0627\u0646\u0647 \u0634\u0631\u06a9\u062a\u06cc \u0628\u0627 \u06a9\u0627\u062a\u0627\u0644\u0648\u06af \u0622\u0646\u0644\u0627\u06cc\u0646 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648 \u0641\u0631\u0645\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0639\u0644\u0627\u0645 \u0642\u06cc\u0645\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item web seo bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1527689368864-3a821dbccc34?auto=format&fit=crop&w=600&q=80\" alt=\"\u067e\u0644\u062a\u0641\u0631\u0645 \u0622\u0645\u0648\u0632\u0634\u06cc\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-blue-100 text-blue-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0648\u0628 \u0648 \u0633\u0626\u0648<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u067e\u0644\u062a\u0641\u0631\u0645 \u0622\u0645\u0648\u0632\u0634 \u0622\u0646\u0644\u0627\u06cc\u0646<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0627\u0645\u0627\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc (LMS) \u0648 \u0633\u0626\u0648\u06cc \u0645\u062d\u0644\u06cc \u0628\u0631\u0627\u06cc \u062c\u0630\u0628 \u062f\u0627\u0646\u0634\u062c\u0648\u06cc\u0627\u0646 \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0632\u0628\u0627\u0646.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"py-16 bg-white text-center\">\r\n <h2 class=\"text-2xl font-bold mb-6\">\u067e\u0631\u0648\u0698\u0647 \u0628\u0639\u062f\u06cc \u0645\u062a\u0639\u0644\u0642 \u0628\u0647 \u0634\u0645\u0627\u0633\u062a!<\/h2>\r\n <button onclick=\"navigate('contact')\" class=\"gradient-bg text-white px-8 py-3 rounded-full font-bold shadow-lg\">\u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0698\u0647<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\" class=\"page-section\">\r\n \r\n <div class=\"bg-slate-900 text-white py-24 text-center\">\r\n <div class=\"container mx-auto px-4\">\r\n <h1 class=\"text-4xl md:text-5xl font-black mb-4\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/h1>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\u0622\u0645\u0627\u062f\u0647 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0628\u0647 \u0633\u0648\u0627\u0644\u0627\u062a \u0634\u0645\u0627 \u0648 \u0634\u0631\u0648\u0639 \u06cc\u06a9 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u06cc\u200c\u0646\u0638\u06cc\u0631 \u0647\u0633\u062a\u06cc\u0645.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50 min-h-screen\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"bg-white rounded-[2rem] shadow-xl overflow-hidden flex flex-col lg:flex-row\">\r\n \r\n \r\n <div class=\"w-full lg:w-2\/5 gradient-bg text-white p-10 lg:p-12 relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-full h-full bg-black\/10 z-0\"><\/div>\r\n <div class=\"relative z-10\">\r\n <h3 class=\"text-2xl font-bold mb-8\">\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062a\u0645\u0627\u0633<\/h3>\r\n \r\n <div class=\"space-y-8 mb-12\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-12 h-12 bg-white\/20 rounded-full flex items-center justify-center shrink-0\">\r\n <i class=\"fa-solid fa-location-dot text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold mb-1\">\u0622\u062f\u0631\u0633 \u062f\u0641\u062a\u0631<\/h4>\r\n <p class=\"text-white\/80 text-sm leading-relaxed\">\u062a\u0647\u0631\u0627\u0646\u060c \u062e\u06cc\u0627\u0628\u0627\u0646 \u0648\u0644\u06cc\u0639\u0635\u0631\u060c \u0646\u0631\u0633\u06cc\u062f\u0647 \u0628\u0647 \u0645\u06cc\u062f\u0627\u0646 \u0648\u0646\u06a9\u060c \u062e\u06cc\u0627\u0628\u0627\u0646 \u0634\u0627\u0647\u06cc\u0646\u060c \u0628\u0631\u062c \u0634\u0627\u0647\u06cc\u0646<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-12 h-12 bg-white\/20 rounded-full flex items-center justify-center shrink-0\">\r\n <i class=\"fa-solid fa-phone text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold mb-1\">\u062a\u0644\u0641\u0646 \u062a\u0645\u0627\u0633<\/h4>\r\n <p class=\"text-white\/80 text-sm\" dir=\"ltr\">\u06f0\u06f9\u06f1\u06f2\u06f0\u06f2\u06f3\u06f5\u06f4\u06f6\u06f8<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-12 h-12 bg-white\/20 rounded-full flex items-center justify-center shrink-0\">\r\n <i class=\"fa-solid fa-envelope text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold mb-1\">\u0627\u06cc\u0645\u06cc\u0644<\/h4>\r\n <p class=\"text-white\/80 text-sm\">info@makhdoomi.ir<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-8\">\r\n <h4 class=\"font-bold mb-4\">\u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0645\u0627<\/h4>\r\n <div class=\"flex gap-4\">\r\n <a href=\"https:\/\/www.instagram.com\/mohammad_h_makhdoomi\/\" class=\"w-10 h-10 bg-white\/20 hover:bg-white hover:text-primary transition-colors rounded-full flex items-center justify-center\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"https:\/\/ir.linkedin.com\/in\/mohammad-hosein-makhdoomi-7662aa241\" class=\"w-10 h-10 bg-white\/20 hover:bg-white hover:text-primary transition-colors rounded-full flex items-center justify-center\"><i class=\"fa-brands fa-linkedin-in\"><\/i><\/a>\r\n <a href=\"https:\/\/t.me\/mohammadhm2000\" class=\"w-10 h-10 bg-white\/20 hover:bg-white hover:text-primary transition-colors rounded-full flex items-center justify-center\"><i class=\"fa-brands fa-telegram\"><\/i><\/a>\r\n <a href=\"https:\/\/wa.me\/09120235468\" class=\"w-10 h-10 bg-white\/20 hover:bg-white hover:text-primary transition-colors rounded-full flex items-center justify-center\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full lg:w-3\/5 p-10 lg:p-12\">\r\n <h3 class=\"text-2xl font-bold text-dark mb-2\">\u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0628\u0647 \u0645\u0627<\/h3>\r\n <p class=\"text-slate-500 mb-8 text-sm\">\u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u0634\u0627\u0648\u0631\u0647 \u06cc\u0627 \u0633\u0641\u0627\u0631\u0634 \u067e\u0631\u0648\u0698\u0647\u060c \u0641\u0631\u0645 \u0632\u06cc\u0631 \u0631\u0627 \u067e\u0631 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u0634\u0646\u0627\u0633\u0627\u0646 \u0645\u0627 \u062f\u0631 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631\u06cc\u0646 \u0632\u0645\u0627\u0646 \u0628\u0627 \u0634\u0645\u0627 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u0646\u062f.<\/p>\r\n \r\n <form onsubmit=\"event.preventDefault(); alert('\u067e\u06cc\u0627\u0645 \u0634\u0645\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0627\u0631\u0633\u0627\u0644 \u0634\u062f. \u0628\u0647 \u0632\u0648\u062f\u06cc \u0628\u0627 \u0634\u0645\u0627 \u062a\u0645\u0627\u0633 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06af\u0631\u0641\u062a.'); this.reset();\" class=\"space-y-6\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u0646\u0627\u0645 \u0648 \u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc *<\/label>\r\n <input type=\"text\" required class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644 *<\/label>\r\n <input type=\"tel\" required class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\" dir=\"ltr\" placeholder=\"0912...\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u0627\u06cc\u0645\u06cc\u0644 (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)<\/label>\r\n <input type=\"email\" class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\" dir=\"ltr\">\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u0646\u0648\u0639 \u062e\u062f\u0645\u0627\u062a \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 *<\/label>\r\n <select required class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\">\r\n <option value=\"\">\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f...<\/option>\r\n <option value=\"web\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \/ \u0641\u0631\u0648\u0634\u06af\u0627\u0647<\/option>\r\n <option value=\"seo\">\u0633\u0626\u0648 \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/option>\r\n <option value=\"ai\">\u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/option>\r\n <option value=\"other\">\u0633\u0627\u06cc\u0631 \u0645\u0648\u0627\u0631\u062f \/ \u0645\u0634\u0627\u0648\u0631\u0647<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u067e\u06cc\u0627\u0645 \u0634\u0645\u0627 *<\/label>\r\n <textarea required rows=\"4\" class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\" placeholder=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0645\u062e\u062a\u0635\u0631\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u06cc\u0627 \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f...\"><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"w-full gradient-bg text-white font-bold py-4 rounded-xl shadow-lg hover:shadow-primary\/50 transition-all text-lg\">\r\n \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-12 rounded-[2rem] overflow-hidden shadow-xl border border-slate-200 h-96 relative bg-slate-200\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80\" alt=\"\u0646\u0642\u0634\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a\" class=\"w-full h-full object-cover opacity-50\">\r\n <div class=\"absolute inset-0 flex items-center justify-center\">\r\n <div class=\"bg-white px-6 py-4 rounded-xl shadow-lg flex items-center gap-3\">\r\n <i class=\"fa-solid fa-map-location-dot text-primary text-2xl\"><\/i>\r\n <span class=\"font-bold text-dark\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0631\u0648\u06cc \u0646\u0642\u0634\u0647 \u06af\u0648\u06af\u0644 (\u06af\u0648\u06af\u0644 \u0645\u067e)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n \r\n <footer class=\"bg-dark text-slate-300 pt-16 pb-8 border-t border-slate-800\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12\">\r\n \r\n \r\n <div>\r\n <h2 class=\"text-2xl font-black text-white flex items-center gap-2 mb-6\">\r\n <i class=\"fa-solid fa-code text-primary\"><\/i>\r\n \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc\r\n <\/h2>\r\n <p class=\"text-sm leading-relaxed mb-6 text-slate-400\">\r\n '\u06af\u0631\u0648\u0647' \u062a\u062e\u0635\u0635\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u060c \u0633\u0626\u0648 \u0648 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af. \u0645\u0627 \u0628\u0627 \u0628\u0647\u0631\u0647\u200c\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u0631\u0648\u0632 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u0645\u0633\u06cc\u0631 \u0631\u0634\u062f \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627 \u0631\u0627 \u0647\u0645\u0648\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-white font-bold mb-6 text-lg\">\u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\u06cc \u0633\u0631\u06cc\u0639<\/h4>\r\n <ul class=\"space-y-3 text-sm\">\r\n <li><button onclick=\"navigate('home')\" class=\"hover:text-primary transition-colors\">\u062e\u0627\u0646\u0647<\/button><\/li>\r\n <li><button onclick=\"navigate('about')\" class=\"hover:text-primary transition-colors\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/button><\/li>\r\n <li><button onclick=\"navigate('services')\" class=\"hover:text-primary transition-colors\">\u062e\u062f\u0645\u0627\u062a \u062a\u062e\u0635\u0635\u06cc<\/button><\/li>\r\n <li><button onclick=\"navigate('portfolio')\" class=\"hover:text-primary transition-colors\">\u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u0627<\/button><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-white font-bold mb-6 text-lg\">\u062e\u062f\u0645\u0627\u062a \u0627\u0635\u0644\u06cc<\/h4>\r\n <ul class=\"space-y-3 text-sm\">\r\n <li><span class=\"text-slate-400 cursor-default\"><i class=\"fa-solid fa-angle-left text-xs ml-1 text-primary\"><\/i> \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc<\/span><\/li>\r\n <li><span class=\"text-slate-400 cursor-default\"><i class=\"fa-solid fa-angle-left text-xs ml-1 text-primary\"><\/i> \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc<\/span><\/li>\r\n <li><span class=\"text-slate-400 cursor-default\"><i class=\"fa-solid fa-angle-left text-xs ml-1 text-primary\"><\/i> \u0633\u0626\u0648 \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/span><\/li>\r\n <li><span class=\"text-slate-400 cursor-default\"><i class=\"fa-solid fa-angle-left text-xs ml-1 text-primary\"><\/i> \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-white font-bold mb-6 text-lg\">\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0645\u0627<\/h4>\r\n <ul class=\"space-y-4 text-sm\">\r\n <li class=\"flex items-start gap-3\">\r\n <i class=\"fa-solid fa-location-dot mt-1 text-primary\"><\/i>\r\n <span>\u062a\u0647\u0631\u0627\u0646\u060c \u062e\u06cc\u0627\u0628\u0627\u0646 \u0648\u0644\u06cc\u0639\u0635\u0631\u060c \u0628\u0631\u062c \u0634\u0627\u0647\u06cc\u0646<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <i class=\"fa-solid fa-phone text-primary\"><\/i>\r\n <span dir=\"ltr\">\u06f0\u06f9\u06f1\u06f2\u06f0\u06f2\u06f3\u06f5\u06f4\u06f6\u06f8<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <i class=\"fa-solid fa-envelope text-primary\"><\/i>\r\n <span>info@makhdoomi.ir<\/span>\r\n <\/li>\r\n <\/ul>\r\n <div class=\"flex gap-4 mt-6\">\r\n <a href=\"https:\/\/www.instagram.com\/mohammad_h_makhdoomi\/\" class=\"text-slate-400 hover:text-white transition-colors\"><i class=\"fa-brands fa-instagram text-xl\"><\/i><\/a>\r\n <a href=\"https:\/\/www.linkedin.com\/in\/mohammad-h-makhdoomi\/\" class=\"text-slate-400 hover:text-white transition-colors\"><i class=\"fa-brands fa-linkedin text-xl\"><\/i><\/a>\r\n <a href=\"https:\/\/t.me\/mohammad_h_makhdoomi\" class=\"text-slate-400 hover:text-white transition-colors\"><i class=\"fa-brands fa-telegram text-xl\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n \r\n <div class=\"border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500\">\r\n <p>© \u06f1\u06f4\u06f0\u06f5 \u062a\u0645\u0627\u0645\u06cc \u062d\u0642\u0648\u0642 \u0628\u0631\u0627\u06cc <span class=\"text-white font-medium\">\u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc<\/span> \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a.<\/p>\r\n <div class=\"flex gap-4\">\r\n <a href=\"#\" class=\"hover:text-white transition-colors\">\u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u0642\u0631\u0631\u0627\u062a<\/a>\r\n <a href=\"#\" class=\"hover:text-white transition-colors\">\u062d\u0631\u06cc\u0645 \u062e\u0635\u0648\u0635\u06cc<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <script>\r\n \/\/ --- Navigation (SPA logic) ---\r\n function navigate(pageId) {\r\n \/\/ Hide all pages\r\n const pages = document.querySelectorAll('.page-section');\r\n pages.forEach(page => {\r\n page.classList.remove('active');\r\n });\r\n \r\n \/\/ Show target page\r\n const targetPage = document.getElementById(pageId);\r\n if (targetPage) {\r\n targetPage.classList.add('active');\r\n window.scrollTo(0, 0); \/\/ Scroll to top\r\n }\r\n\r\n \/\/ Update Active Nav Link styling (desktop)\r\n const navLinks = document.querySelectorAll('.nav-link');\r\n navLinks.forEach(link => {\r\n link.classList.remove('text-primary', 'font-bold');\r\n link.classList.add('text-slate-600', 'font-medium');\r\n \/\/ Simple check if link text matches page roughly, or just rely on manual click logic.\r\n \/\/ For perfection, we check onclick attribute:\r\n if(link.getAttribute('onclick').includes(pageId)) {\r\n link.classList.remove('text-slate-600', 'font-medium');\r\n link.classList.add('text-primary', 'font-bold');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Initialize active nav link based on default active page\r\n window.addEventListener('DOMContentLoaded', () => {\r\n const defaultLink = document.querySelector('nav button[onclick=\"navigate(\\'home\\')\"]');\r\n if(defaultLink) {\r\n defaultLink.classList.remove('text-slate-600', 'font-medium');\r\n defaultLink.classList.add('text-primary', 'font-bold');\r\n }\r\n });\r\n\r\n \/\/ --- Mobile Menu Toggle ---\r\n const mobileMenuBtn = document.getElementById('mobile-menu-btn');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n\r\n mobileMenuBtn.addEventListener('click', () => {\r\n mobileMenu.classList.toggle('hidden');\r\n });\r\n\r\n function closeMobileMenu() {\r\n mobileMenu.classList.add('hidden');\r\n }\r\n\r\n \/\/ --- Portfolio Filtering ---\r\n function filterPortfolio(category) {\r\n \/\/ Update filter buttons UI\r\n const buttons = document.querySelectorAll('.filter-btn');\r\n buttons.forEach(btn => {\r\n btn.classList.remove('bg-primary', 'text-white', 'border-primary');\r\n btn.classList.add('bg-white', 'text-slate-600', 'border-slate-200');\r\n });\r\n\r\n \/\/ Find the clicked button and style it\r\n const clickedBtn = event.currentTarget;\r\n clickedBtn.classList.remove('bg-white', 'text-slate-600', 'border-slate-200');\r\n clickedBtn.classList.add('bg-primary', 'text-white', 'border-primary');\r\n\r\n \/\/ Filter the items\r\n const items = document.querySelectorAll('.portfolio-item');\r\n items.forEach(item => {\r\n if (category === 'all') {\r\n item.style.display = 'block';\r\n item.style.animation = 'fadeIn 0.5s ease-in-out';\r\n } else {\r\n if (item.classList.contains(category)) {\r\n item.style.display = 'block';\r\n item.style.animation = 'fadeIn 0.5s ease-in-out';\r\n } else {\r\n item.style.display = 'none';\r\n }\r\n }\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc | \u062e\u062f\u0645\u0627\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a\u060c \u0633\u0626\u0648 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc \u062e\u0627\u0646\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u062e\u062f\u0645\u0627\u062a \u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627 \u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646 \u062e\u0627\u0646\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u062e\u062f\u0645\u0627\u062a \u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627 \u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646 \ud83d\ude80 \u062a\u062d\u0648\u0644\u06cc \u0646\u0648\u06cc\u0646 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0622\u06cc\u0646\u062f\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627 \u0628\u0627 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0645\u0627 \u0628\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0648 \u0628\u0632\u0631\u06af\u060c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-42","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/pages\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=42"}],"version-history":[{"count":38,"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/pages\/42\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \r\n \r\n \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc | \u062e\u062f\u0645\u0627\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a\u060c \u0633\u0626\u0648 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/title>\r\n\r\n \r\n <link href=\"https:\/\/cdn.jsdelivr.net\/gh\/rastikerdar\/vazirmatn@v33.003\/Vazirmatn-font-face.css\" rel=\"stylesheet\" type=\"text\/css\" \/>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n sans: ['Vazirmatn', 'sans-serif'],\r\n },\r\n colors: {\r\n primary: '#152a36', \/\/ Indigo 600\r\n secondary: '#ffa541', \/\/ Cyan 500\r\n dark: '#0F172A', \/\/ Slate 900\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n \/* Custom Styles for smooth transitions and specific UI elements *\/\r\n html { scroll-behavior: smooth; }\r\n body { font-family: 'Vazirmatn', sans-serif; -webkit-font-smoothing: antialiased; }\r\n .page-section { display: none; animation: fadeIn 0.5s ease-in-out; }\r\n .page-section.active { display: block; }\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\r\n \r\n .gradient-text {\r\n background: linear-gradient(to left, #152a36, #06B6D4);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n \r\n .gradient-bg {\r\n background: linear-gradient(135deg, #152a36 0%, #06B6D4 100%);\r\n }\r\n\r\n .glass-card {\r\n background: rgba(255, 255, 255, 0.9);\r\n backdrop-filter: blur(10px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n \/* Hide scrollbar for clean look in filter row *\/\r\n .no-scrollbar::-webkit-scrollbar { display: none; }\r\n .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800\">\r\n\r\n \r\n <header class=\"fixed top-0 left-0 right-0 z-50 bg-white\/90 backdrop-blur-md shadow-sm border-b border-slate-200 transition-all duration-300\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-20\">\r\n \r\n <div class=\"flex-shrink-0 cursor-pointer\" onclick=\"navigate('home')\">\r\n <h1 class=\"text-2xl font-black text-dark flex items-center gap-2\">\r\n <i class=\"fa-solid fa-code text-primary\"><\/i>\r\n \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 <span class=\"gradient-text\">\u0645\u062e\u062f\u0648\u0645\u06cc<\/span>\r\n <\/h1>\r\n <\/div>\r\n\r\n \r\n <nav class=\"hidden md:flex space-x-8 space-x-reverse items-center\">\r\n <button onclick=\"navigate('home')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u062e\u0627\u0646\u0647<\/button>\r\n <button onclick=\"navigate('about')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/button>\r\n <button onclick=\"navigate('services')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u062e\u062f\u0645\u0627\u062a<\/button>\r\n <button onclick=\"navigate('portfolio')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627<\/button>\r\n <button onclick=\"navigate('contact')\" class=\"nav-link text-slate-600 hover:text-primary font-medium transition-colors\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/button>\r\n <\/nav>\r\n\r\n \r\n <div class=\"hidden md:block\">\r\n <button onclick=\"navigate('contact')\" class=\"gradient-bg text-white px-6 py-2.5 rounded-full font-semibold shadow-lg shadow-primary\/30 hover:shadow-primary\/50 transform hover:-translate-y-0.5 transition-all\">\r\n \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"md:hidden flex items-center\">\r\n <button id=\"mobile-menu-btn\" class=\"text-slate-600 hover:text-primary focus:outline-none p-2\">\r\n <i class=\"fa-solid fa-bars text-2xl\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-white border-t border-slate-100 shadow-lg absolute w-full left-0\">\r\n <div class=\"px-4 pt-2 pb-6 space-y-1\">\r\n <button onclick=\"navigate('home'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u062e\u0627\u0646\u0647<\/button>\r\n <button onclick=\"navigate('about'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/button>\r\n <button onclick=\"navigate('services'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u062e\u062f\u0645\u0627\u062a<\/button>\r\n <button onclick=\"navigate('portfolio'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627<\/button>\r\n <button onclick=\"navigate('contact'); closeMobileMenu()\" class=\"block w-full text-right px-3 py-3 rounded-md text-base font-medium text-slate-700 hover:bg-slate-50 hover:text-primary\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/button>\r\n <button onclick=\"navigate('contact'); closeMobileMenu()\" class=\"mt-4 w-full gradient-bg text-white px-4 py-3 rounded-xl font-semibold shadow-md text-center\">\u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <main class=\"pt-20 min-h-screen\">\r\n\r\n \r\n <section id=\"home\" class=\"page-section active\">\r\n \r\n <div class=\"relative bg-white overflow-hidden\">\r\n <div class=\"absolute inset-y-0 right-0 w-1\/2 bg-slate-50 rounded-l-full opacity-50\"><\/div>\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-12 items-center py-20 lg:py-32\">\r\n <div>\r\n <span class=\"inline-block py-1 px-3 rounded-full bg-primary\/10 text-primary font-semibold text-sm mb-6 border border-primary\/20\">\ud83d\ude80 \u062a\u062d\u0648\u0644\u06cc \u0646\u0648\u06cc\u0646 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644<\/span>\r\n <h2 class=\"text-4xl md:text-5xl lg:text-6xl font-black text-dark leading-tight mb-6\">\r\n \u0622\u06cc\u0646\u062f\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627 \u0628\u0627 <br \/>\r\n <span class=\"gradient-text\">\u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/span>\r\n <\/h2>\r\n <p class=\"text-lg text-slate-600 mb-8 max-w-lg leading-relaxed\">\r\n \u0645\u0627 \u0628\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0648 \u0628\u0632\u0631\u06af\u060c \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0648 \u06a9\u0627\u0631\u0622\u0641\u0631\u06cc\u0646\u0627\u0646 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u0628\u0627 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0627\u062e\u062a\u0635\u0627\u0635\u06cc\u060c \u0633\u0626\u0648\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u060c \u0641\u0631\u0648\u0634 \u062e\u0648\u062f \u0631\u0627 \u0686\u0646\u062f \u0628\u0631\u0627\u0628\u0631 \u06a9\u0646\u0646\u062f.\r\n <\/p>\r\n <div class=\"flex flex-col sm:flex-row gap-4\">\r\n <button onclick=\"navigate('services')\" class=\"gradient-bg text-white px-8 py-4 rounded-xl font-bold text-lg shadow-lg shadow-primary\/30 hover:-translate-y-1 transition-transform text-center\">\r\n \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f\r\n <i class=\"fa-solid fa-arrow-left ml-2\"><\/i>\r\n <\/button>\r\n <button onclick=\"navigate('portfolio')\" class=\"bg-white border-2 border-slate-200 text-slate-700 hover:border-primary hover:text-primary px-8 py-4 rounded-xl font-bold text-lg transition-colors text-center\">\r\n \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"relative\">\r\n <div class=\"absolute inset-0 gradient-bg rounded-3xl transform rotate-3 scale-105 opacity-20 blur-xl\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1498050108023-c5249f4df085.webp?auto=format&fit=crop&w=800&q=80\" alt=\"\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\" class=\"relative rounded-3xl shadow-2xl object-cover h-[500px] w-full border border-white\/50\">\r\n \r\n \r\n <div class=\"absolute -bottom-6 -right-6 glass-card p-4 rounded-2xl shadow-xl flex items-center gap-4\">\r\n <div class=\"bg-green-100 p-3 rounded-full text-green-600\">\r\n <i class=\"fa-solid fa-chart-line text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <p class=\"text-sm text-slate-500 font-medium\">\u0627\u0641\u0632\u0627\u06cc\u0634 \u0641\u0631\u0648\u0634<\/p>\r\n <p class=\"text-xl font-bold text-dark\">+\u06f2\u06f0\u06f0\u066a<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-dark py-10\">\r\n <div class=\"container mx-auto px-4\">\r\n <p class=\"text-center text-slate-400 text-sm font-semibold mb-6 uppercase tracking-wider\">\u0645\u0648\u0631\u062f \u0627\u0639\u062a\u0645\u0627\u062f \u0628\u06cc\u0634 \u0627\u0632 \u06f5\u06f0 \u0628\u0631\u0646\u062f \u0648 \u06a9\u0627\u0631\u0622\u0641\u0631\u06cc\u0646<\/p>\r\n <div class=\"flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-50 grayscale hover:grayscale-0 transition-all duration-500\">\r\n <i class=\"fa-brands fa-aws text-4xl text-white\"><\/i>\r\n <i class=\"fa-brands fa-google text-4xl text-white\"><\/i>\r\n <i class=\"fa-brands fa-meta text-4xl text-white\"><\/i>\r\n <i class=\"fa-brands fa-shopify text-4xl text-white\"><\/i>\r\n <i class=\"fa-brands fa-wordpress text-4xl text-white\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-slate-50\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"text-center max-w-3xl mx-auto mb-16\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark mb-4\">\u0686\u0631\u0627 \u0645\u062e\u062f\u0648\u0645\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644\u061f<\/h2>\r\n <p class=\"text-slate-600\">\u0645\u0632\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0631\u0627 \u0627\u0632 \u0631\u0642\u0628\u0627 \u0645\u062a\u0645\u0627\u06cc\u0632 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u0628\u0647 \u0631\u0634\u062f \u0633\u0631\u06cc\u0639\u200c\u062a\u0631 \u0634\u0645\u0627 \u06a9\u0645\u06a9 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\r\n <\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-primary\/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-bolt text-3xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0633\u0631\u0639\u062a \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u06cc\u200c\u0646\u0638\u06cc\u0631<\/h3>\r\n <p class=\"text-slate-600 leading-relaxed\">\u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0645\u0627 \u062f\u0631 \u06a9\u0633\u0631\u06cc \u0627\u0632 \u062b\u0627\u0646\u06cc\u0647 \u0644\u0648\u062f \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u06a9\u0647 \u0628\u0627\u0639\u062b \u0628\u0647\u0628\u0648\u062f \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0631\u062a\u0628\u0647 \u06af\u0648\u06af\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-secondary\/10 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-robot text-3xl text-secondary\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 leading-relaxed\">\u0628\u0627 \u062e\u0648\u062f\u06a9\u0627\u0631\u0633\u0627\u0632\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc \u062a\u0648\u0633\u0637 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648 \u0647\u0632\u06cc\u0646\u0647\u200c\u0647\u0627\u06cc \u0646\u06cc\u0631\u0648\u06cc \u0627\u0646\u0633\u0627\u0646\u06cc \u0635\u0631\u0641\u0647\u200c\u062c\u0648\u06cc\u06cc \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\r\n <\/div>\r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-100 hover:shadow-xl transition-shadow group\">\r\n <div class=\"w-16 h-16 rounded-2xl bg-purple-100 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform\">\r\n <i class=\"fa-solid fa-magnifying-glass-chart text-3xl text-purple-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0626\u0648 \u0645\u062d\u0648\u0631<\/h3>\r\n <p class=\"text-slate-600 leading-relaxed\">\u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u0628\u0647\u06cc\u0646\u0647\u060c \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0647\u062f\u0641 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0648\u0644 \u06af\u0648\u06af\u0644 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0646\u062f.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-white\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex justify-between items-end mb-12\">\r\n <div class=\"max-w-2xl\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark mb-4\">\u062e\u062f\u0645\u0627\u062a \u062a\u062e\u0635\u0635\u06cc \u0645\u0627<\/h2>\r\n <p class=\"text-slate-600\">\u0631\u0627\u0647\u06a9\u0627\u0631\u0647\u0627\u06cc \u062c\u0627\u0645\u0639 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0628\u0631\u0627\u06cc \u0631\u0647\u0628\u0631\u06cc \u062f\u0631 \u0628\u0627\u0632\u0627\u0631.<\/p>\r\n <\/div>\r\n <button onclick=\"navigate('services')\" class=\"hidden md:flex items-center gap-2 text-primary font-bold hover:gap-3 transition-all\">\r\n \u0645\u0634\u0627\u0647\u062f\u0647 \u0647\u0645\u0647 \u062e\u062f\u0645\u0627\u062a\r\n <i class=\"fa-solid fa-arrow-left\"><\/i>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n \r\n <div class=\"group rounded-3xl overflow-hidden bg-slate-50 border border-slate-100\">\r\n <div class=\"h-48 overflow-hidden relative\">\r\n <div class=\"absolute inset-0 bg-dark\/20 group-hover:bg-transparent transition-colors z-10\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1547658719-da2b51169166.webp\" alt=\"\u0637\u0631\u0627\u062d\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\">\r\n <\/div>\r\n <div class=\"p-8\">\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/h3>\r\n <p class=\"text-slate-600 mb-6 line-clamp-2\">\u0637\u0631\u0627\u062d\u06cc \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc\u060c \u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a\u06cc \u0648 \u067e\u0648\u0631\u062a\u0627\u0644\u200c\u0647\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0628\u0627 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0645\u062f\u0631\u0646.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-semibold hover:text-dark transition-colors\">\u062b\u0628\u062a \u0633\u0641\u0627\u0631\u0634 <i class=\"fa-solid fa-chevron-left text-sm ml-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"group rounded-3xl overflow-hidden bg-slate-50 border border-slate-100\">\r\n <div class=\"h-48 overflow-hidden relative\">\r\n <div class=\"absolute inset-0 bg-dark\/20 group-hover:bg-transparent transition-colors z-10\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1460925895917-afdab827c52f.webp\" alt=\"\u0633\u0626\u0648 \u0648 \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\">\r\n <\/div>\r\n <div class=\"p-8\">\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0633\u0626\u0648 \u0648 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af<\/h3>\r\n <p class=\"text-slate-600 mb-6 line-clamp-2\">\u0627\u0641\u0632\u0627\u06cc\u0634 \u0628\u0627\u0632\u062f\u06cc\u062f \u0627\u0631\u06af\u0627\u0646\u06cc\u06a9 \u0633\u0627\u06cc\u062a \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0648\u0631\u0648\u062f\u06cc\u200c\u0647\u0627 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0648\u0641\u0627\u062f\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u200c\u0647\u0627\u06cc \u062f\u0627\u062f\u0647\u200c\u0645\u062d\u0648\u0631.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-semibold hover:text-dark transition-colors\">\u062b\u0628\u062a \u0633\u0641\u0627\u0631\u0634 <i class=\"fa-solid fa-chevron-left text-sm ml-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"group rounded-3xl overflow-hidden bg-slate-50 border border-slate-100 md:hidden lg:block\">\r\n <div class=\"h-48 overflow-hidden relative\">\r\n <div class=\"absolute inset-0 bg-dark\/20 group-hover:bg-transparent transition-colors z-10\"><\/div>\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1677442136019-21780ecad995.webp\" alt=\"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\" class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700\">\r\n <\/div>\r\n <div class=\"p-8\">\r\n <h3 class=\"text-xl font-bold mb-3 text-dark\">\u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 mb-6 line-clamp-2\">\u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0686\u062a\u200c\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f\u060c \u067e\u0631\u062f\u0627\u0632\u0634 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0648 \u062e\u0648\u062f\u06a9\u0627\u0631\u0633\u0627\u0632\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-semibold hover:text-dark transition-colors\">\u062b\u0628\u062a \u0633\u0641\u0627\u0631\u0634 <i class=\"fa-solid fa-chevron-left text-sm ml-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-slate-900 text-white relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-96 h-96 bg-primary\/20 rounded-full blur-3xl -translate-y-1\/2 translate-x-1\/2\"><\/div>\r\n <div class=\"absolute bottom-0 left-0 w-96 h-96 bg-secondary\/20 rounded-full blur-3xl translate-y-1\/2 -translate-x-1\/2\"><\/div>\r\n \r\n <div class=\"container mx-auto px-4 relative z-10\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-center mb-16\">\u0646\u0638\u0631\u0627\u062a \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u0648\u0641\u0642 \u0645\u0627<\/h2>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n <div class=\"bg-white\/10 backdrop-blur-lg p-8 rounded-3xl border border-white\/10\">\r\n <div class=\"flex text-yellow-400 mb-4 text-sm gap-1\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"text-slate-300 mb-6 leading-relaxed\">\"\u0637\u0631\u0627\u062d\u06cc \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0645\u0627 \u0641\u0631\u0627\u062a\u0631 \u0627\u0632 \u0627\u0646\u062a\u0638\u0627\u0631 \u0628\u0648\u062f. \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u0648 \u0633\u0631\u0639\u062a \u0639\u0627\u0644\u06cc \u0633\u0627\u06cc\u062a \u0628\u0627\u0639\u062b \u0634\u062f \u0641\u0631\u0648\u0634 \u0645\u0627 \u062f\u0631 \u0645\u0627\u0647 \u0627\u0648\u0644 \u06f3 \u0628\u0631\u0627\u0628\u0631 \u0634\u0648\u062f.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center text-xl font-bold\">\u0639<\/div>\r\n <div>\r\n <h4 class=\"font-bold\">\u0639\u0644\u06cc \u0631\u0636\u0627\u06cc\u06cc<\/h4>\r\n <p class=\"text-sm text-slate-400\">\u0645\u062f\u06cc\u0631 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0645\u062f \u0648 \u0644\u0628\u0627\u0633<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white\/10 backdrop-blur-lg p-8 rounded-3xl border border-white\/10\">\r\n <div class=\"flex text-yellow-400 mb-4 text-sm gap-1\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"text-slate-300 mb-6 leading-relaxed\">\"\u062e\u062f\u0645\u0627\u062a \u0633\u0626\u0648 \u0633\u0627\u06cc\u062a \u0645\u062e\u062f\u0648\u0645\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0639\u0627\u0644\u06cc \u0628\u0648\u062f. \u067e\u0633 \u0627\u0632 \u06f3 \u0645\u0627\u0647\u060c \u0631\u0648\u06cc \u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0627\u0635\u0644\u06cc \u0628\u0647 \u0635\u0641\u062d\u0647 \u0627\u0648\u0644 \u06af\u0648\u06af\u0644 \u0631\u0633\u06cc\u062f\u06cc\u0645 \u0648 \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc\u0645\u0627\u0646 \u0628\u0647 \u0634\u062f\u062a \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0641\u062a.\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center text-xl font-bold\">\u0645<\/div>\r\n <div>\r\n <h4 class=\"font-bold\">\u0645\u0631\u06cc\u0645 \u0627\u062d\u0645\u062f\u06cc<\/h4>\r\n <p class=\"text-sm text-slate-400\">\u0645\u062f\u06cc\u0631\u0639\u0627\u0645\u0644 \u0634\u0631\u06a9\u062a \u062e\u062f\u0645\u0627\u062a\u06cc<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-white\/10 backdrop-blur-lg p-8 rounded-3xl border border-white\/10 md:hidden lg:block\">\r\n <div class=\"flex text-yellow-400 mb-4 text-sm gap-1\">\r\n <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\r\n <\/div>\r\n <p class=\"text-slate-300 mb-6 leading-relaxed\">\"\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0686\u062a\u200c\u0628\u0627\u062a \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0631\u0648\u06cc \u0633\u0627\u06cc\u062a \u0645\u0627\u060c \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646 \u0634\u06cc\u0641\u062a \u0634\u0628 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0631\u062f \u0648 \u0631\u0636\u0627\u06cc\u062a \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0631\u0627 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u062f\u0627\u0634\u062a. \u06cc\u06a9 \u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0639\u0627\u0644\u06cc!\"<\/p>\r\n <div class=\"flex items-center gap-4\">\r\n <div class=\"w-12 h-12 bg-slate-700 rounded-full flex items-center justify-center text-xl font-bold\">\u0633<\/div>\r\n <div>\r\n <h4 class=\"font-bold\">\u0633\u0639\u06cc\u062f \u06a9\u0631\u06cc\u0645\u06cc<\/h4>\r\n <p class=\"text-sm text-slate-400\">\u0628\u0646\u06cc\u0627\u0646\u200c\u06af\u0630\u0627\u0631 \u0627\u0633\u062a\u0627\u0631\u062a\u0627\u067e<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-white\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex flex-col md:flex-row items-center gap-16\">\r\n <div class=\"w-full md:w-1\/2\">\r\n <img decoding=\"async\" src=\"https:\/\/makhdoomi.ir\/wp-content\/uploads\/2026\/07\/photo-1522071820081-009f0129c71c.webp\" alt=\"\u062a\u06cc\u0645 \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a\" class=\"rounded-3xl shadow-xl w-full\">\r\n <\/div>\r\n <div class=\"w-full md:w-1\/2\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-dark mb-6\">\u062e\u0644\u0627\u0642\u06cc\u062a\u060c \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0648 \u062a\u0639\u0647\u062f<\/h2>\r\n <p class=\"text-slate-600 text-lg mb-6 leading-relaxed\">\r\n \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc\u060c \u0645\u0627 \u062a\u0646\u0647\u0627 \u06cc\u06a9 \u06af\u0631\u0648\u0647 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc \u0646\u06cc\u0633\u062a\u06cc\u0645\u061b \u0645\u0627 \u0634\u0631\u06cc\u06a9 \u0631\u0634\u062f \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645. \u0628\u0627 \u062a\u06cc\u0645\u06cc \u0627\u0632 \u0645\u062a\u062e\u0635\u0635\u0627\u0646 \u062e\u0644\u0627\u0642 \u062f\u0631 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc\u060c \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u0631\u0648\u06cc\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u0648\u0627\u0642\u0639\u06cc\u062a \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\r\n <\/p>\r\n <ul class=\"space-y-4 mb-8\">\r\n <li class=\"flex items-center gap-3 text-slate-700 font-medium\"><i class=\"fa-solid fa-check text-green-500 bg-green-100 p-1 rounded-full text-sm\"><\/i> \u0628\u06cc\u0634 \u0627\u0632 \u06f5 \u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647 \u062a\u062e\u0635\u0635\u06cc<\/li>\r\n <li class=\"flex items-center gap-3 text-slate-700 font-medium\"><i class=\"fa-solid fa-check text-green-500 bg-green-100 p-1 rounded-full text-sm\"><\/i> \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06f2\u06f4 \u0633\u0627\u0639\u062a\u0647 \u0648\u0627\u0642\u0639\u06cc<\/li>\r\n <li class=\"flex items-center gap-3 text-slate-700 font-medium\"><i class=\"fa-solid fa-check text-green-500 bg-green-100 p-1 rounded-full text-sm\"><\/i> \u062a\u0636\u0645\u06cc\u0646 \u06a9\u06cc\u0641\u06cc\u062a \u0648 \u0628\u0627\u0632\u06af\u0634\u062a \u0648\u062c\u0647<\/li>\r\n <\/ul>\r\n <button onclick=\"navigate('about')\" class=\"text-primary font-bold border-b-2 border-primary pb-1 hover:text-dark hover:border-dark transition-colors\">\u0628\u06cc\u0634\u062a\u0631 \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50\">\r\n <div class=\"container mx-auto px-4\">\r\n <div class=\"gradient-bg rounded-[3rem] p-10 md:p-16 text-center text-white relative overflow-hidden shadow-2xl\">\r\n <div class=\"absolute top-0 right-0 w-64 h-64 bg-white\/10 rounded-full blur-2xl -translate-y-1\/2 translate-x-1\/2\"><\/div>\r\n <div class=\"relative z-10 max-w-2xl mx-auto\">\r\n <h2 class=\"text-3xl md:text-5xl font-black mb-6\">\u0622\u0645\u0627\u062f\u0647 \u062a\u062d\u0648\u0644 \u062f\u0631 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u062a\u0627\u0646 \u0647\u0633\u062a\u06cc\u062f\u061f<\/h2>\r\n <p class=\"text-lg md:text-xl text-white\/90 mb-10\">\u0647\u0645\u06cc\u0646 \u062d\u0627\u0644\u0627 \u0628\u0627 \u0645\u0627 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f \u062a\u0627 \u062f\u0631 \u06cc\u06a9 \u062c\u0644\u0633\u0647 \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\u060c \u0646\u0642\u0634\u0647 \u0631\u0627\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0634\u0645\u0627 \u0631\u0627 \u062a\u0631\u0633\u06cc\u0645 \u06a9\u0646\u06cc\u0645.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"bg-primary text-white px-10 py-4 rounded-xl font-bold text-lg shadow-lg hover:hover:scale-105 transition-all\">\r\n \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"about\" class=\"page-section\">\r\n \r\n <div class=\"bg-slate-900 text-white py-24 text-center\">\r\n <div class=\"container mx-auto px-4\">\r\n <h1 class=\"text-4xl md:text-5xl font-black mb-4\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc<\/h1>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u062a\u06cc\u0645\u06cc \u06a9\u0647 \u067e\u0634\u062a \u067e\u0631\u062f\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0634\u0645\u0627\u0633\u062a.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-white\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-12 items-center\">\r\n <div>\r\n <span class=\"text-primary font-bold tracking-wider text-sm uppercase mb-2 block\">\u062f\u0627\u0633\u062a\u0627\u0646 \u0645\u0627<\/span>\r\n <h2 class=\"text-3xl font-bold text-dark mb-6\">\u0627\u0632 \u06cc\u06a9 \u0627\u06cc\u062f\u0647 \u06a9\u0648\u0686\u06a9 \u062a\u0627 \u06cc\u06a9 \u06af\u0631\u0648\u0647 \u062a\u0645\u0627\u0645\u200c\u0639\u06cc\u0627\u0631<\/h2>\r\n <p class=\"text-slate-600 leading-relaxed mb-4 text-justify\">\r\n \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0627\u0632 \u06cc\u06a9 \u0646\u06cc\u0627\u0632 \u0633\u0627\u062f\u0647 \u0634\u0631\u0648\u0639 \u0634\u062f\u061b \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u067e\u062a\u0627\u0646\u0633\u06cc\u0644 \u0628\u0627\u0644\u0627\u06cc\u06cc \u062f\u0627\u0634\u062a\u0646\u062f \u0627\u0645\u0627 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u0622\u0646\u0644\u0627\u06cc\u0646 \u062f\u06cc\u062f\u0647 \u0646\u0645\u06cc\u200c\u0634\u062f\u0646\u062f. \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc \u0628\u0627 \u0647\u062f\u0641 \u067e\u0631 \u06a9\u0631\u062f\u0646 \u0627\u06cc\u0646 \u062e\u0644\u0627\u0621 \u0645\u062a\u0648\u0644\u062f \u0634\u062f. \u0645\u0627 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u06cc\u0645 \u06a9\u0647 \u062f\u0627\u0634\u062a\u0646 \u06cc\u06a9 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0628\u0647 \u062a\u0646\u0647\u0627\u06cc\u06cc \u06a9\u0627\u0641\u06cc \u0646\u06cc\u0633\u062a\u061b \u0628\u0644\u06a9\u0647 \u062a\u0644\u0641\u06cc\u0642 \u0637\u0631\u0627\u062d\u06cc \u0632\u06cc\u0628\u0627\u060c \u0645\u0647\u0646\u062f\u0633\u06cc \u0633\u0626\u0648 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0645\u0648\u0641\u0642\u06cc\u062a \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u062f.\r\n <\/p>\r\n <p class=\"text-slate-600 leading-relaxed text-justify\">\r\n \u0627\u0645\u0631\u0648\u0632\u060c \u0645\u0627 \u0645\u0641\u062a\u062e\u0631\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0635\u062f\u0647\u0627 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u06a9\u0648\u0686\u06a9 \u0648 \u0628\u0632\u0631\u06af\u060c \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0648 \u06a9\u0627\u0631\u0622\u0641\u0631\u06cc\u0646\u0627\u0646 \u0622\u0646\u0644\u0627\u06cc\u0646 \u06a9\u0645\u06a9 \u06a9\u0631\u062f\u0647\u200c\u0627\u06cc\u0645 \u062a\u0627 \u0632\u06cc\u0631\u0633\u0627\u062e\u062a \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0646\u0627 \u06a9\u0646\u0646\u062f \u0648 \u0641\u0631\u0648\u0634 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0637\u0631\u0632 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u0646\u062f.\r\n <\/p>\r\n <\/div>\r\n <div>\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?auto=format&fit=crop&w=800&q=80\" alt=\"\u062c\u0644\u0633\u0647 \u062a\u06cc\u0645 \u06a9\u0627\u0631\u06cc\" class=\"rounded-3xl shadow-xl w-full\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl text-center\">\r\n <i class=\"fa-solid fa-bullseye text-5xl text-primary mb-6\"><\/i>\r\n <h2 class=\"text-3xl font-bold text-dark mb-6\">\u0645\u0623\u0645\u0648\u0631\u06cc\u062a \u0645\u0627<\/h2>\r\n <p class=\"text-xl text-slate-600 leading-relaxed max-w-3xl mx-auto\">\r\n \"\u062a\u0648\u0627\u0646\u0645\u0646\u062f\u0633\u0627\u0632\u06cc \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u0647\u0627 \u062f\u0631 \u0639\u0635\u0631 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0631\u0627\u0626\u0647 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0646\u0648\u06cc\u0646 \u062a\u062d\u062a \u0648\u0628\u060c \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0645\u0648\u062a\u0648\u0631\u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648 \u0648 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u062f\u0631 \u0631\u0642\u0627\u0628\u062a \u062c\u0647\u0627\u0646\u06cc \u067e\u06cc\u0634\u0631\u0648 \u0628\u0627\u0634\u0646\u062f.\"\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-24 bg-white\">\r\n <div class=\"container mx-auto px-4\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-center text-dark mb-16\">\u0648\u062c\u0647 \u062a\u0645\u0627\u06cc\u0632 \u0645\u0627 \u0646\u0633\u0628\u062a \u0628\u0647 \u0631\u0642\u0628\u0627<\/h2>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8\">\r\n <div class=\"text-center\">\r\n <div class=\"w-20 h-20 mx-auto bg-primary\/10 rounded-full flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-brain text-3xl text-primary\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-xl mb-3\">\u0646\u06af\u0627\u0647 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 text-sm\">\u0645\u0627 \u0641\u0642\u0637 \u0633\u0627\u06cc\u062a \u0646\u0645\u06cc\u200c\u0633\u0627\u0632\u06cc\u0645\u060c \u0628\u0644\u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc AI \u0628\u0631\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0648 \u062a\u062d\u0644\u06cc\u0644 \u062f\u0627\u062f\u0647 \u0645\u062c\u0647\u0632 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"w-20 h-20 mx-auto bg-secondary\/10 rounded-full flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-palette text-3xl text-secondary\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-xl mb-3\">\u0637\u0631\u0627\u062d\u06cc \u06a9\u0627\u0645\u0644\u0627\u064b \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/h3>\r\n <p class=\"text-slate-600 text-sm\">\u062e\u062f\u0627\u062d\u0627\u0641\u0638\u06cc \u0628\u0627 \u0642\u0627\u0644\u0628\u200c\u0647\u0627\u06cc \u0622\u0645\u0627\u062f\u0647! \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0631\u0646\u062f \u0634\u0645\u0627 \u0627\u0632 \u0635\u0641\u0631 \u062a\u0627 \u0635\u062f \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0647\u0648\u06cc\u062a \u0634\u0645\u0627 \u0637\u0631\u0627\u062d\u06cc \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"w-20 h-20 mx-auto bg-green-100 rounded-full flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-chart-pie text-3xl text-green-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-xl mb-3\">\u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc \u062f\u0627\u062f\u0647\u200c\u0645\u062d\u0648\u0631<\/h3>\r\n <p class=\"text-slate-600 text-sm\">\u062a\u0635\u0645\u06cc\u0645\u0627\u062a \u0633\u0626\u0648 \u0648 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af \u0645\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u062d\u062f\u0633 \u0648 \u06af\u0645\u0627\u0646 \u0646\u06cc\u0633\u062a\u060c \u0628\u0644\u06a9\u0647 \u0628\u0631 \u067e\u0627\u06cc\u0647 \u0622\u0646\u0627\u0644\u06cc\u0632 \u062f\u0642\u06cc\u0642 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u0633\u062a.<\/p>\r\n <\/div>\r\n <div class=\"text-center\">\r\n <div class=\"w-20 h-20 mx-auto bg-orange-100 rounded-full flex items-center justify-center mb-6\">\r\n <i class=\"fa-solid fa-headset text-3xl text-orange-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"font-bold text-xl mb-3\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0648\u0627\u0642\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 text-sm\">\u0645\u0627 \u067e\u0633 \u0627\u0632 \u062a\u062d\u0648\u06cc\u0644 \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u0631\u0627 \u0631\u0647\u0627 \u0646\u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u062a\u06cc\u0645 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0627 \u0647\u0645\u0648\u0627\u0631\u0647 \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0634\u0645\u0627\u0633\u062a.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-16 bg-slate-900 text-center\">\r\n <h2 class=\"text-3xl font-bold text-white mb-8\">\u0628\u0647 \u062e\u0627\u0646\u0648\u0627\u062f\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u0648\u0641\u0642 \u0645\u0627 \u0628\u067e\u06cc\u0648\u0646\u062f\u06cc\u062f<\/h2>\r\n <button onclick=\"navigate('contact')\" class=\"gradient-bg text-white px-8 py-4 rounded-xl font-bold text-lg shadow-lg hover:shadow-primary\/50 transition-all\">\r\n \u0634\u0631\u0648\u0639 \u0647\u0645\u06a9\u0627\u0631\u06cc\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"services\" class=\"page-section\">\r\n \r\n <div class=\"bg-slate-900 text-white py-24 text-center\">\r\n <div class=\"container mx-auto px-4\">\r\n <h1 class=\"text-4xl md:text-5xl font-black mb-4\">\u062e\u062f\u0645\u0627\u062a \u062a\u062e\u0635\u0635\u06cc \u0645\u0627<\/h1>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\u0631\u0627\u0647\u06a9\u0627\u0631\u0647\u0627\u06cc \u062c\u0627\u0645\u0639 \u0628\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc\u060c \u062f\u06cc\u062f\u0647 \u0634\u062f\u0646 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\r\n \r\n \r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-200\">\r\n <i class=\"fa-solid fa-laptop-code text-5xl text-primary mb-6\"><\/i>\r\n <h3 class=\"text-2xl font-bold text-dark mb-4\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u0641\u0631\u0648\u0634\u06af\u0627\u0647<\/h3>\r\n <p class=\"text-slate-600 mb-6 leading-relaxed\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648\u060c \u0633\u0631\u06cc\u0639 \u0648 \u0628\u0627 \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062c\u0630\u0627\u0628. \u0627\u0632 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a\u06cc \u062a\u0627 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a\u200c\u0647\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc.<\/p>\r\n <ul class=\"space-y-2 mb-8 text-sm text-slate-700\">\r\n <li><i class=\"fa-solid fa-check text-primary ml-2\"><\/i> \u0637\u0631\u0627\u062d\u06cc UI\/UX \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/li>\r\n <li><i class=\"fa-solid fa-check text-primary ml-2\"><\/i> \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0641\u0631\u0627\u0646\u062a\u200c\u0627\u0646\u062f \u0648 \u0628\u06a9\u200c\u0627\u0646\u062f<\/li>\r\n <li><i class=\"fa-solid fa-check text-primary ml-2\"><\/i> \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u062f\u0631\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u067e\u0631\u062f\u0627\u062e\u062a<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-200\">\r\n <i class=\"fa-solid fa-magnifying-glass-chart text-5xl text-secondary mb-6\"><\/i>\r\n <h3 class=\"text-2xl font-bold text-dark mb-4\">\u062e\u062f\u0645\u0627\u062a \u0633\u0626\u0648 (SEO)<\/h3>\r\n <p class=\"text-slate-600 mb-6 leading-relaxed\">\u062d\u0636\u0648\u0631 \u062f\u0631 \u0635\u0641\u062d\u0647 \u0627\u0648\u0644 \u06af\u0648\u06af\u0644 \u06a9\u0644\u06cc\u062f \u0645\u0648\u0641\u0642\u06cc\u062a \u0627\u0633\u062a. \u0645\u0627 \u0628\u0627 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u06a9\u0646\u06cc\u06a9\u0627\u0644\u060c \u0633\u0626\u0648\u06cc \u062f\u0627\u062e\u0644\u06cc \u0648 \u062e\u0627\u0631\u062c\u06cc\u060c \u062a\u0631\u0627\u0641\u06cc\u06a9 \u0647\u062f\u0641\u0645\u0646\u062f \u0631\u0627 \u0628\u0647 \u0633\u0627\u06cc\u062a \u0634\u0645\u0627 \u0633\u0631\u0627\u0632\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\r\n <ul class=\"space-y-2 mb-8 text-sm text-slate-700\">\r\n <li><i class=\"fa-solid fa-check text-secondary ml-2\"><\/i> \u062a\u062d\u0642\u06cc\u0642 \u06a9\u0644\u0645\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0642\u0627\u0628\u062a\u06cc<\/li>\r\n <li><i class=\"fa-solid fa-check text-secondary ml-2\"><\/i> \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0631\u0639\u062a \u0648 \u0633\u0627\u062e\u062a\u0627\u0631<\/li>\r\n <li><i class=\"fa-solid fa-check text-secondary ml-2\"><\/i> \u0644\u06cc\u0646\u06a9\u200c\u0633\u0627\u0632\u06cc \u06a9\u0644\u0627\u0647 \u0633\u0641\u06cc\u062f \u0648 \u0645\u0639\u062a\u0628\u0631<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white p-8 rounded-3xl shadow-sm border border-slate-200\">\r\n <i class=\"fa-solid fa-microchip text-5xl text-purple-600 mb-6\"><\/i>\r\n <h3 class=\"text-2xl font-bold text-dark mb-4\">\u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/h3>\r\n <p class=\"text-slate-600 mb-6 leading-relaxed\">\u06a9\u0627\u0647\u0634 \u0647\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0633\u0631\u0639\u062a \u0628\u0627 \u0627\u062f\u063a\u0627\u0645 AI \u062f\u0631 \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631. \u0627\u0632 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u062a\u0627 \u062a\u062d\u0644\u06cc\u0644 \u06a9\u0644\u0627\u0646\u200c\u062f\u0627\u062f\u0647\u200c\u0647\u0627.<\/p>\r\n <ul class=\"space-y-2 mb-8 text-sm text-slate-700\">\r\n <li><i class=\"fa-solid fa-check text-purple-600 ml-2\"><\/i> \u0637\u0631\u0627\u062d\u06cc \u0686\u062a\u200c\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc<\/li>\r\n <li><i class=\"fa-solid fa-check text-purple-600 ml-2\"><\/i> \u062e\u0648\u062f\u06a9\u0627\u0631\u0633\u0627\u0632\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u0641\u0631\u0648\u0634<\/li>\r\n <li><i class=\"fa-solid fa-check text-purple-600 ml-2\"><\/i> \u062a\u062d\u0644\u06cc\u0644 \u0631\u0641\u062a\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0628\u0627 AI<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-white\">\r\n <div class=\"container mx-auto px-4\">\r\n <h2 class=\"text-3xl md:text-4xl font-bold text-center text-dark mb-16\">\u0645\u0631\u0627\u062d\u0644 \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631<\/h2>\r\n <div class=\"max-w-4xl mx-auto\">\r\n <div class=\"relative border-r-4 border-slate-100 pr-8 md:pr-0 md:border-r-0\">\r\n \r\n <div class=\"hidden md:block absolute top-1\/2 left-0 right-0 h-1 bg-slate-100 -translate-y-1\/2 z-0\"><\/div>\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-4 gap-10 md:gap-4 relative z-10\">\r\n \r\n <div class=\"relative md:text-center\">\r\n <div class=\"w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-xl absolute -right-[42px] top-0 md:static md:mx-auto md:mb-4 shadow-lg shadow-primary\/30\">\u06f1<\/div>\r\n <h4 class=\"font-bold text-lg mb-2 text-dark\">\u0645\u0634\u0627\u0648\u0631\u0647 \u0648 \u0646\u06cc\u0627\u0632\u0633\u0646\u062c\u06cc<\/h4>\r\n <p class=\"text-slate-500 text-sm\">\u0628\u0631\u0631\u0633\u06cc \u0627\u0647\u062f\u0627\u0641 \u0634\u0645\u0627 \u0648 \u0627\u0631\u0627\u0626\u0647 \u067e\u0631\u0648\u067e\u0648\u0632\u0627\u0644 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc.<\/p>\r\n <\/div>\r\n <div class=\"relative md:text-center\">\r\n <div class=\"w-12 h-12 bg-white border-4 border-primary text-primary rounded-full flex items-center justify-center font-bold text-xl absolute -right-[42px] top-0 md:static md:mx-auto md:mb-4 shadow-md\">\u06f2<\/div>\r\n <h4 class=\"font-bold text-lg mb-2 text-dark\">\u0637\u0631\u0627\u062d\u06cc \u0648 \u0627\u062c\u0631\u0627<\/h4>\r\n <p class=\"text-slate-500 text-sm\">\u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u0633\u0627\u06cc\u062a.<\/p>\r\n <\/div>\r\n <div class=\"relative md:text-center\">\r\n <div class=\"w-12 h-12 bg-white border-4 border-primary text-primary rounded-full flex items-center justify-center font-bold text-xl absolute -right-[42px] top-0 md:static md:mx-auto md:mb-4 shadow-md\">\u06f3<\/div>\r\n <h4 class=\"font-bold text-lg mb-2 text-dark\">\u062a\u0633\u062a \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/h4>\r\n <p class=\"text-slate-500 text-sm\">\u062a\u0633\u062a\u200c\u0647\u0627\u06cc \u0627\u0645\u0646\u06cc\u062a\u06cc\u060c \u0633\u0631\u0639\u062a \u0648 \u0633\u0626\u0648\u06cc \u0627\u0648\u0644\u06cc\u0647.<\/p>\r\n <\/div>\r\n <div class=\"relative md:text-center\">\r\n <div class=\"w-12 h-12 bg-green-500 text-white rounded-full flex items-center justify-center font-bold text-xl absolute -right-[42px] top-0 md:static md:mx-auto md:mb-4 shadow-lg shadow-green-500\/30\">\u06f4<\/div>\r\n <h4 class=\"font-bold text-lg mb-2 text-dark\">\u062a\u062d\u0648\u06cc\u0644 \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc<\/h4>\r\n <p class=\"text-slate-500 text-sm\">\u0644\u0627\u0646\u0686 \u067e\u0631\u0648\u0698\u0647 \u0648 \u0634\u0631\u0648\u0639 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u062f\u0627\u0648\u0645.<\/p>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50\">\r\n <div class=\"container mx-auto px-4 max-w-3xl\">\r\n <h2 class=\"text-3xl font-bold text-center text-dark mb-12\">\u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/h2>\r\n <div class=\"space-y-4\">\r\n <details class=\"bg-white rounded-xl border border-slate-200 group overflow-hidden\">\r\n <summary class=\"font-bold p-6 cursor-pointer text-dark flex justify-between items-center list-none select-none\">\r\n \u0637\u0631\u0627\u062d\u06cc \u06cc\u06a9 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0686\u0642\u062f\u0631 \u0632\u0645\u0627\u0646 \u0645\u06cc\u200c\u0628\u0631\u062f\u061f\r\n <span class=\"transition group-open:rotate-180\"><i class=\"fa-solid fa-chevron-down text-slate-400\"><\/i><\/span>\r\n <\/summary>\r\n <div class=\"p-6 pt-0 text-slate-600 leading-relaxed border-t border-slate-100\">\r\n \u0632\u0645\u0627\u0646 \u0627\u0646\u062c\u0627\u0645 \u067e\u0631\u0648\u0698\u0647 \u0628\u0633\u062a\u06af\u06cc \u0628\u0647 \u06af\u0633\u062a\u0631\u062f\u06af\u06cc \u0648 \u067e\u06cc\u0686\u06cc\u062f\u06af\u06cc \u0622\u0646 \u062f\u0627\u0631\u062f. \u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a\u06cc \u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u06cc\u0646 \u06f2 \u062a\u0627 \u06f3 \u0647\u0641\u062a\u0647 \u0648 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u06cc\u0646 \u06f1 \u062a\u0627 \u06f2 \u0645\u0627\u0647 \u0632\u0645\u0627\u0646 \u0645\u06cc\u200c\u0628\u0631\u0646\u062f.\r\n <\/div>\r\n <\/details>\r\n <details class=\"bg-white rounded-xl border border-slate-200 group overflow-hidden\">\r\n <summary class=\"font-bold p-6 cursor-pointer text-dark flex justify-between items-center list-none select-none\">\r\n \u0622\u06cc\u0627 \u062e\u062f\u0645\u0627\u062a \u0633\u0626\u0648 \u062a\u0636\u0645\u06cc\u0646\u06cc \u0627\u0633\u062a\u061f\r\n <span class=\"transition group-open:rotate-180\"><i class=\"fa-solid fa-chevron-down text-slate-400\"><\/i><\/span>\r\n <\/summary>\r\n <div class=\"p-6 pt-0 text-slate-600 leading-relaxed border-t border-slate-100\">\r\n \u062f\u0631 \u0633\u0626\u0648 \u0647\u06cc\u0686 \u062a\u0636\u0645\u06cc\u0646 \u0635\u062f \u062f\u0631 \u0635\u062f\u06cc \u0628\u0631\u0627\u06cc \u0631\u062a\u0628\u0647 \u06f1 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f\u060c \u0632\u06cc\u0631\u0627 \u0627\u0644\u06af\u0648\u0631\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u06af\u0648\u06af\u0644 \u0645\u062a\u063a\u06cc\u0631 \u0647\u0633\u062a\u0646\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u06a9\u0644\u0627\u0647 \u0633\u0641\u06cc\u062f \u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u060c \u062a\u0631\u0627\u0641\u06cc\u06a9 \u0627\u0631\u06af\u0627\u0646\u06cc\u06a9 \u0634\u0645\u0627 \u0631\u0634\u062f \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f.\r\n <\/div>\r\n <\/details>\r\n <details class=\"bg-white rounded-xl border border-slate-200 group overflow-hidden\">\r\n <summary class=\"font-bold p-6 cursor-pointer text-dark flex justify-between items-center list-none select-none\">\r\n \u0645\u0646\u0638\u0648\u0631 \u0627\u0632 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0686\u06cc\u0633\u062a\u061f\r\n <span class=\"transition group-open:rotate-180\"><i class=\"fa-solid fa-chevron-down text-slate-400\"><\/i><\/span>\r\n <\/summary>\r\n <div class=\"p-6 pt-0 text-slate-600 leading-relaxed border-t border-slate-100\">\r\n \u06cc\u0639\u0646\u06cc \u0633\u067e\u0631\u062f\u0646 \u06a9\u0627\u0631\u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc \u0627\u0646\u0633\u0627\u0646\u06cc \u0628\u0647 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f. \u0645\u062b\u0644\u0627\u064b \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 \u06cc\u06a9 \u0646\u0641\u0631 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc \u0633\u0648\u0627\u0644\u0627\u062a \u062a\u06a9\u0631\u0627\u0631\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u062f\u0631 \u0633\u0627\u06cc\u062a \u0628\u0627\u0634\u062f\u060c \u06cc\u06a9 \u0631\u0628\u0627\u062a \u0647\u0648\u0634\u0645\u0646\u062f (\u0686\u062a\u200c\u0628\u0627\u062a) \u0628\u0627 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a \u0634\u0645\u0627\u060c \u062f\u0631 \u06f2\u06f4 \u0633\u0627\u0639\u062a \u0634\u0628\u0627\u0646\u0647\u200c\u0631\u0648\u0632 \u062f\u0642\u06cc\u0642\u200c\u062a\u0631\u06cc\u0646 \u067e\u0627\u0633\u062e\u200c\u0647\u0627 \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.\r\n <\/div>\r\n <\/details>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-16 bg-white text-center\">\r\n <button onclick=\"navigate('contact')\" class=\"gradient-bg text-white px-8 py-4 rounded-xl font-bold text-lg shadow-lg hover:shadow-primary\/50 transition-all\">\r\n \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u0634\u0627\u0648\u0631\u0647 \u062e\u062f\u0645\u0627\u062a \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\r\n <\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"portfolio\" class=\"page-section\">\r\n \r\n <div class=\"bg-slate-900 text-white py-24 text-center\">\r\n <div class=\"container mx-auto px-4\">\r\n <h1 class=\"text-4xl md:text-5xl font-black mb-4\">\u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627 \u0648 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627<\/h1>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\u0646\u06af\u0627\u0647\u06cc \u0628\u0647 \u062f\u0627\u0633\u062a\u0627\u0646 \u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0631\u0646\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u0645\u0627 \u0627\u0639\u062a\u0645\u0627\u062f \u06a9\u0631\u062f\u0646\u062f.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-16 bg-slate-50 min-h-screen\">\r\n <div class=\"container mx-auto px-4\">\r\n \r\n \r\n <div class=\"flex overflow-x-auto no-scrollbar justify-start md:justify-center gap-4 mb-12 pb-4\">\r\n <button onclick=\"filterPortfolio('all')\" class=\"filter-btn active bg-primary text-white px-6 py-2 rounded-full font-medium whitespace-nowrap transition-colors border border-primary\">\u0647\u0645\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627<\/button>\r\n <button onclick=\"filterPortfolio('web')\" class=\"filter-btn bg-white text-slate-600 hover:text-primary px-6 py-2 rounded-full font-medium whitespace-nowrap transition-colors border border-slate-200\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a<\/button>\r\n <button onclick=\"filterPortfolio('seo')\" class=\"filter-btn bg-white text-slate-600 hover:text-primary px-6 py-2 rounded-full font-medium whitespace-nowrap transition-colors border border-slate-200\">\u0633\u0626\u0648<\/button>\r\n <button onclick=\"filterPortfolio('ai')\" class=\"filter-btn bg-white text-slate-600 hover:text-primary px-6 py-2 rounded-full font-medium whitespace-nowrap transition-colors border border-slate-200\">\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\" id=\"portfolio-grid\">\r\n \r\n \r\n <div class=\"portfolio-item web bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=600&q=80\" alt=\"\u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc \u0645\u062f\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-blue-100 text-blue-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0627\u0633\u062a\u0627\u06cc\u0644<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0628\u0627 \u0628\u06cc\u0634 \u0627\u0632 \u06f1\u06f0\u06f0\u06f0 \u0645\u062d\u0635\u0648\u0644 \u0648 \u0633\u06cc\u0633\u062a\u0645 \u0641\u06cc\u0644\u062a\u0631\u06cc\u0646\u06af \u067e\u06cc\u0634\u0631\u0641\u062a\u0647.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item seo bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=600&q=80\" alt=\"\u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06cc \u0633\u0627\u06cc\u062a\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-green-100 text-green-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0633\u0626\u0648 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u067e\u0648\u0631\u062a\u0627\u0644 \u062e\u0628\u0631\u06cc \u0627\u0642\u062a\u0635\u0627\u062f<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u0627\u0641\u0632\u0627\u06cc\u0634 \u06f2\u06f0\u06f0 \u062f\u0631\u0635\u062f\u06cc \u062a\u0631\u0627\u0641\u06cc\u06a9 \u0627\u0631\u06af\u0627\u0646\u06cc\u06a9 \u062f\u0631 \u06f6 \u0645\u0627\u0647 \u0628\u0627 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0633\u0627\u062e\u062a\u0627\u0631 \u0645\u062d\u062a\u0648\u0627 \u0648 \u0631\u0641\u0639 \u062e\u0637\u0627\u0647\u0627\u06cc \u062a\u06a9\u0646\u06cc\u06a9\u0627\u0644 \u0633\u0627\u06cc\u062a.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item ai bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=600&q=80\" alt=\"\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0686\u062a \u0628\u0627\u062a\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-purple-100 text-purple-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u062f\u0633\u062a\u06cc\u0627\u0631 \u0647\u0648\u0634\u0645\u0646\u062f \u0634\u0631\u06a9\u062a \u0628\u06cc\u0645\u0647<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0686\u062a\u200c\u0628\u0627\u062a \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0628\u0631\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0622\u0646\u06cc \u0628\u0647 \u0627\u0633\u062a\u0639\u0644\u0627\u0645 \u0628\u06cc\u0645\u0647\u200c\u06af\u0630\u0627\u0631\u0627\u0646 \u0648 \u06a9\u0627\u0647\u0634 \u06f8\u06f0 \u062f\u0631\u0635\u062f\u06cc \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc \u062a\u06a9\u0631\u0627\u0631\u06cc.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item web bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1499951360447-b19be8fe80f5?auto=format&fit=crop&w=600&q=80\" alt=\"\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-blue-100 text-blue-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc \u067e\u062a\u0631\u0648 \u0635\u0646\u0639\u062a<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u062f\u0648\u0632\u0628\u0627\u0646\u0647 \u0634\u0631\u06a9\u062a\u06cc \u0628\u0627 \u06a9\u0627\u062a\u0627\u0644\u0648\u06af \u0622\u0646\u0644\u0627\u06cc\u0646 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648 \u0641\u0631\u0645\u200c\u0647\u0627\u06cc \u0627\u0633\u062a\u0639\u0644\u0627\u0645 \u0642\u06cc\u0645\u062a \u067e\u06cc\u0686\u06cc\u062f\u0647.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item web seo bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-200 group\">\r\n <div class=\"h-56 overflow-hidden\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1527689368864-3a821dbccc34?auto=format&fit=crop&w=600&q=80\" alt=\"\u067e\u0644\u062a\u0641\u0631\u0645 \u0622\u0645\u0648\u0632\u0634\u06cc\" class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\">\r\n <\/div>\r\n <div class=\"p-6\">\r\n <span class=\"text-xs font-bold bg-blue-100 text-blue-600 px-3 py-1 rounded-full mb-3 inline-block\">\u0648\u0628 \u0648 \u0633\u0626\u0648<\/span>\r\n <h3 class=\"font-bold text-xl text-dark mb-2\">\u067e\u0644\u062a\u0641\u0631\u0645 \u0622\u0645\u0648\u0632\u0634 \u0622\u0646\u0644\u0627\u06cc\u0646<\/h3>\r\n <p class=\"text-slate-600 text-sm mb-4\">\u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0633\u0627\u0645\u0627\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc (LMS) \u0648 \u0633\u0626\u0648\u06cc \u0645\u062d\u0644\u06cc \u0628\u0631\u0627\u06cc \u062c\u0630\u0628 \u062f\u0627\u0646\u0634\u062c\u0648\u06cc\u0627\u0646 \u062f\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0632\u0628\u0627\u0646.<\/p>\r\n <button onclick=\"navigate('contact')\" class=\"text-primary font-bold text-sm hover:underline\">\u062c\u0632\u0626\u06cc\u0627\u062a \u067e\u0631\u0648\u0698\u0647 <i class=\"fa-solid fa-arrow-left mr-1\"><\/i><\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"py-16 bg-white text-center\">\r\n <h2 class=\"text-2xl font-bold mb-6\">\u067e\u0631\u0648\u0698\u0647 \u0628\u0639\u062f\u06cc \u0645\u062a\u0639\u0644\u0642 \u0628\u0647 \u0634\u0645\u0627\u0633\u062a!<\/h2>\r\n <button onclick=\"navigate('contact')\" class=\"gradient-bg text-white px-8 py-3 rounded-full font-bold shadow-lg\">\u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0698\u0647<\/button>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\" class=\"page-section\">\r\n \r\n <div class=\"bg-slate-900 text-white py-24 text-center\">\r\n <div class=\"container mx-auto px-4\">\r\n <h1 class=\"text-4xl md:text-5xl font-black mb-4\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/h1>\r\n <p class=\"text-xl text-slate-400 max-w-2xl mx-auto\">\u0622\u0645\u0627\u062f\u0647 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0628\u0647 \u0633\u0648\u0627\u0644\u0627\u062a \u0634\u0645\u0627 \u0648 \u0634\u0631\u0648\u0639 \u06cc\u06a9 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u06cc\u200c\u0646\u0638\u06cc\u0631 \u0647\u0633\u062a\u06cc\u0645.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"py-20 bg-slate-50 min-h-screen\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"bg-white rounded-[2rem] shadow-xl overflow-hidden flex flex-col lg:flex-row\">\r\n \r\n \r\n <div class=\"w-full lg:w-2\/5 gradient-bg text-white p-10 lg:p-12 relative overflow-hidden\">\r\n <div class=\"absolute top-0 right-0 w-full h-full bg-black\/10 z-0\"><\/div>\r\n <div class=\"relative z-10\">\r\n <h3 class=\"text-2xl font-bold mb-8\">\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062a\u0645\u0627\u0633<\/h3>\r\n \r\n <div class=\"space-y-8 mb-12\">\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-12 h-12 bg-white\/20 rounded-full flex items-center justify-center shrink-0\">\r\n <i class=\"fa-solid fa-location-dot text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold mb-1\">\u0622\u062f\u0631\u0633 \u062f\u0641\u062a\u0631<\/h4>\r\n <p class=\"text-white\/80 text-sm leading-relaxed\">\u062a\u0647\u0631\u0627\u0646\u060c \u062e\u06cc\u0627\u0628\u0627\u0646 \u0648\u0644\u06cc\u0639\u0635\u0631\u060c \u0646\u0631\u0633\u06cc\u062f\u0647 \u0628\u0647 \u0645\u06cc\u062f\u0627\u0646 \u0648\u0646\u06a9\u060c \u062e\u06cc\u0627\u0628\u0627\u0646 \u0634\u0627\u0647\u06cc\u0646\u060c \u0628\u0631\u062c \u0634\u0627\u0647\u06cc\u0646<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-12 h-12 bg-white\/20 rounded-full flex items-center justify-center shrink-0\">\r\n <i class=\"fa-solid fa-phone text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold mb-1\">\u062a\u0644\u0641\u0646 \u062a\u0645\u0627\u0633<\/h4>\r\n <p class=\"text-white\/80 text-sm\" dir=\"ltr\">\u06f0\u06f9\u06f1\u06f2\u06f0\u06f2\u06f3\u06f5\u06f4\u06f6\u06f8<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-4\">\r\n <div class=\"w-12 h-12 bg-white\/20 rounded-full flex items-center justify-center shrink-0\">\r\n <i class=\"fa-solid fa-envelope text-xl\"><\/i>\r\n <\/div>\r\n <div>\r\n <h4 class=\"font-bold mb-1\">\u0627\u06cc\u0645\u06cc\u0644<\/h4>\r\n <p class=\"text-white\/80 text-sm\">info@makhdoomi.ir<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mb-8\">\r\n <h4 class=\"font-bold mb-4\">\u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0645\u0627<\/h4>\r\n <div class=\"flex gap-4\">\r\n <a href=\"https:\/\/www.instagram.com\/mohammad_h_makhdoomi\/\" class=\"w-10 h-10 bg-white\/20 hover:bg-white hover:text-primary transition-colors rounded-full flex items-center justify-center\"><i class=\"fa-brands fa-instagram\"><\/i><\/a>\r\n <a href=\"https:\/\/ir.linkedin.com\/in\/mohammad-hosein-makhdoomi-7662aa241\" class=\"w-10 h-10 bg-white\/20 hover:bg-white hover:text-primary transition-colors rounded-full flex items-center justify-center\"><i class=\"fa-brands fa-linkedin-in\"><\/i><\/a>\r\n <a href=\"https:\/\/t.me\/mohammadhm2000\" class=\"w-10 h-10 bg-white\/20 hover:bg-white hover:text-primary transition-colors rounded-full flex items-center justify-center\"><i class=\"fa-brands fa-telegram\"><\/i><\/a>\r\n <a href=\"https:\/\/wa.me\/09120235468\" class=\"w-10 h-10 bg-white\/20 hover:bg-white hover:text-primary transition-colors rounded-full flex items-center justify-center\"><i class=\"fa-brands fa-whatsapp\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full lg:w-3\/5 p-10 lg:p-12\">\r\n <h3 class=\"text-2xl font-bold text-dark mb-2\">\u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0628\u0647 \u0645\u0627<\/h3>\r\n <p class=\"text-slate-500 mb-8 text-sm\">\u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u0634\u0627\u0648\u0631\u0647 \u06cc\u0627 \u0633\u0641\u0627\u0631\u0634 \u067e\u0631\u0648\u0698\u0647\u060c \u0641\u0631\u0645 \u0632\u06cc\u0631 \u0631\u0627 \u067e\u0631 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u06a9\u0627\u0631\u0634\u0646\u0627\u0633\u0627\u0646 \u0645\u0627 \u062f\u0631 \u0633\u0631\u06cc\u0639\u200c\u062a\u0631\u06cc\u0646 \u0632\u0645\u0627\u0646 \u0628\u0627 \u0634\u0645\u0627 \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u0646\u062f.<\/p>\r\n \r\n <form onsubmit=\"event.preventDefault(); alert('\u067e\u06cc\u0627\u0645 \u0634\u0645\u0627 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0627\u0631\u0633\u0627\u0644 \u0634\u062f. \u0628\u0647 \u0632\u0648\u062f\u06cc \u0628\u0627 \u0634\u0645\u0627 \u062a\u0645\u0627\u0633 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06af\u0631\u0641\u062a.'); this.reset();\" class=\"space-y-6\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u0646\u0627\u0645 \u0648 \u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc *<\/label>\r\n <input type=\"text\" required class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644 *<\/label>\r\n <input type=\"tel\" required class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\" dir=\"ltr\" placeholder=\"0912...\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u0627\u06cc\u0645\u06cc\u0644 (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)<\/label>\r\n <input type=\"email\" class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\" dir=\"ltr\">\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u0646\u0648\u0639 \u062e\u062f\u0645\u0627\u062a \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 *<\/label>\r\n <select required class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\">\r\n <option value=\"\">\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f...<\/option>\r\n <option value=\"web\">\u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a \/ \u0641\u0631\u0648\u0634\u06af\u0627\u0647<\/option>\r\n <option value=\"seo\">\u0633\u0626\u0648 \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/option>\r\n <option value=\"ai\">\u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/option>\r\n <option value=\"other\">\u0633\u0627\u06cc\u0631 \u0645\u0648\u0627\u0631\u062f \/ \u0645\u0634\u0627\u0648\u0631\u0647<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-sm font-medium text-slate-700 mb-2\">\u067e\u06cc\u0627\u0645 \u0634\u0645\u0627 *<\/label>\r\n <textarea required rows=\"4\" class=\"w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-primary\/50 focus:border-primary outline-none transition-colors bg-slate-50\" placeholder=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0645\u062e\u062a\u0635\u0631\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u06cc\u0627 \u0646\u06cc\u0627\u0632 \u062e\u0648\u062f \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f...\"><\/textarea>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"w-full gradient-bg text-white font-bold py-4 rounded-xl shadow-lg hover:shadow-primary\/50 transition-all text-lg\">\r\n \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645\r\n <\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"mt-12 rounded-[2rem] overflow-hidden shadow-xl border border-slate-200 h-96 relative bg-slate-200\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524661135-423995f22d0b?auto=format&fit=crop&w=1200&q=80\" alt=\"\u0646\u0642\u0634\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a\" class=\"w-full h-full object-cover opacity-50\">\r\n <div class=\"absolute inset-0 flex items-center justify-center\">\r\n <div class=\"bg-white px-6 py-4 rounded-xl shadow-lg flex items-center gap-3\">\r\n <i class=\"fa-solid fa-map-location-dot text-primary text-2xl\"><\/i>\r\n <span class=\"font-bold text-dark\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0631\u0648\u06cc \u0646\u0642\u0634\u0647 \u06af\u0648\u06af\u0644 (\u06af\u0648\u06af\u0644 \u0645\u067e)<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n \r\n <footer class=\"bg-dark text-slate-300 pt-16 pb-8 border-t border-slate-800\">\r\n <div class=\"container mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12\">\r\n \r\n \r\n <div>\r\n <h2 class=\"text-2xl font-black text-white flex items-center gap-2 mb-6\">\r\n <i class=\"fa-solid fa-code text-primary\"><\/i>\r\n \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc\r\n <\/h2>\r\n <p class=\"text-sm leading-relaxed mb-6 text-slate-400\">\r\n '\u06af\u0631\u0648\u0647' \u062a\u062e\u0635\u0635\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u060c \u0633\u0626\u0648 \u0648 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af. \u0645\u0627 \u0628\u0627 \u0628\u0647\u0631\u0647\u200c\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u0631\u0648\u0632 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc\u060c \u0645\u0633\u06cc\u0631 \u0631\u0634\u062f \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627 \u0631\u0627 \u0647\u0645\u0648\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\r\n <\/p>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-white font-bold mb-6 text-lg\">\u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\u06cc \u0633\u0631\u06cc\u0639<\/h4>\r\n <ul class=\"space-y-3 text-sm\">\r\n <li><button onclick=\"navigate('home')\" class=\"hover:text-primary transition-colors\">\u062e\u0627\u0646\u0647<\/button><\/li>\r\n <li><button onclick=\"navigate('about')\" class=\"hover:text-primary transition-colors\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/button><\/li>\r\n <li><button onclick=\"navigate('services')\" class=\"hover:text-primary transition-colors\">\u062e\u062f\u0645\u0627\u062a \u062a\u062e\u0635\u0635\u06cc<\/button><\/li>\r\n <li><button onclick=\"navigate('portfolio')\" class=\"hover:text-primary transition-colors\">\u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u0627<\/button><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-white font-bold mb-6 text-lg\">\u062e\u062f\u0645\u0627\u062a \u0627\u0635\u0644\u06cc<\/h4>\r\n <ul class=\"space-y-3 text-sm\">\r\n <li><span class=\"text-slate-400 cursor-default\"><i class=\"fa-solid fa-angle-left text-xs ml-1 text-primary\"><\/i> \u0637\u0631\u0627\u062d\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a\u06cc<\/span><\/li>\r\n <li><span class=\"text-slate-400 cursor-default\"><i class=\"fa-solid fa-angle-left text-xs ml-1 text-primary\"><\/i> \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a\u06cc<\/span><\/li>\r\n <li><span class=\"text-slate-400 cursor-default\"><i class=\"fa-solid fa-angle-left text-xs ml-1 text-primary\"><\/i> \u0633\u0626\u0648 \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/span><\/li>\r\n <li><span class=\"text-slate-400 cursor-default\"><i class=\"fa-solid fa-angle-left text-xs ml-1 text-primary\"><\/i> \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <h4 class=\"text-white font-bold mb-6 text-lg\">\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0645\u0627<\/h4>\r\n <ul class=\"space-y-4 text-sm\">\r\n <li class=\"flex items-start gap-3\">\r\n <i class=\"fa-solid fa-location-dot mt-1 text-primary\"><\/i>\r\n <span>\u062a\u0647\u0631\u0627\u0646\u060c \u062e\u06cc\u0627\u0628\u0627\u0646 \u0648\u0644\u06cc\u0639\u0635\u0631\u060c \u0628\u0631\u062c \u0634\u0627\u0647\u06cc\u0646<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <i class=\"fa-solid fa-phone text-primary\"><\/i>\r\n <span dir=\"ltr\">\u06f0\u06f9\u06f1\u06f2\u06f0\u06f2\u06f3\u06f5\u06f4\u06f6\u06f8<\/span>\r\n <\/li>\r\n <li class=\"flex items-center gap-3\">\r\n <i class=\"fa-solid fa-envelope text-primary\"><\/i>\r\n <span>info@makhdoomi.ir<\/span>\r\n <\/li>\r\n <\/ul>\r\n <div class=\"flex gap-4 mt-6\">\r\n <a href=\"https:\/\/www.instagram.com\/mohammad_h_makhdoomi\/\" class=\"text-slate-400 hover:text-white transition-colors\"><i class=\"fa-brands fa-instagram text-xl\"><\/i><\/a>\r\n <a href=\"https:\/\/www.linkedin.com\/in\/mohammad-h-makhdoomi\/\" class=\"text-slate-400 hover:text-white transition-colors\"><i class=\"fa-brands fa-linkedin text-xl\"><\/i><\/a>\r\n <a href=\"https:\/\/t.me\/mohammad_h_makhdoomi\" class=\"text-slate-400 hover:text-white transition-colors\"><i class=\"fa-brands fa-telegram text-xl\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n \r\n \r\n <div class=\"border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500\">\r\n <p>© \u06f1\u06f4\u06f0\u06f5 \u062a\u0645\u0627\u0645\u06cc \u062d\u0642\u0648\u0642 \u0628\u0631\u0627\u06cc <span class=\"text-white font-medium\">\u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc<\/span> \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a.<\/p>\r\n <div class=\"flex gap-4\">\r\n <a href=\"#\" class=\"hover:text-white transition-colors\">\u0642\u0648\u0627\u0646\u06cc\u0646 \u0648 \u0645\u0642\u0631\u0631\u0627\u062a<\/a>\r\n <a href=\"#\" class=\"hover:text-white transition-colors\">\u062d\u0631\u06cc\u0645 \u062e\u0635\u0648\u0635\u06cc<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <script>\r\n \/\/ --- Navigation (SPA logic) ---\r\n function navigate(pageId) {\r\n \/\/ Hide all pages\r\n const pages = document.querySelectorAll('.page-section');\r\n pages.forEach(page => {\r\n page.classList.remove('active');\r\n });\r\n \r\n \/\/ Show target page\r\n const targetPage = document.getElementById(pageId);\r\n if (targetPage) {\r\n targetPage.classList.add('active');\r\n window.scrollTo(0, 0); \/\/ Scroll to top\r\n }\r\n\r\n \/\/ Update Active Nav Link styling (desktop)\r\n const navLinks = document.querySelectorAll('.nav-link');\r\n navLinks.forEach(link => {\r\n link.classList.remove('text-primary', 'font-bold');\r\n link.classList.add('text-slate-600', 'font-medium');\r\n \/\/ Simple check if link text matches page roughly, or just rely on manual click logic.\r\n \/\/ For perfection, we check onclick attribute:\r\n if(link.getAttribute('onclick').includes(pageId)) {\r\n link.classList.remove('text-slate-600', 'font-medium');\r\n link.classList.add('text-primary', 'font-bold');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Initialize active nav link based on default active page\r\n window.addEventListener('DOMContentLoaded', () => {\r\n const defaultLink = document.querySelector('nav button[onclick=\"navigate(\\'home\\')\"]');\r\n if(defaultLink) {\r\n defaultLink.classList.remove('text-slate-600', 'font-medium');\r\n defaultLink.classList.add('text-primary', 'font-bold');\r\n }\r\n });\r\n\r\n \/\/ --- Mobile Menu Toggle ---\r\n const mobileMenuBtn = document.getElementById('mobile-menu-btn');\r\n const mobileMenu = document.getElementById('mobile-menu');\r\n\r\n mobileMenuBtn.addEventListener('click', () => {\r\n mobileMenu.classList.toggle('hidden');\r\n });\r\n\r\n function closeMobileMenu() {\r\n mobileMenu.classList.add('hidden');\r\n }\r\n\r\n \/\/ --- Portfolio Filtering ---\r\n function filterPortfolio(category) {\r\n \/\/ Update filter buttons UI\r\n const buttons = document.querySelectorAll('.filter-btn');\r\n buttons.forEach(btn => {\r\n btn.classList.remove('bg-primary', 'text-white', 'border-primary');\r\n btn.classList.add('bg-white', 'text-slate-600', 'border-slate-200');\r\n });\r\n\r\n \/\/ Find the clicked button and style it\r\n const clickedBtn = event.currentTarget;\r\n clickedBtn.classList.remove('bg-white', 'text-slate-600', 'border-slate-200');\r\n clickedBtn.classList.add('bg-primary', 'text-white', 'border-primary');\r\n\r\n \/\/ Filter the items\r\n const items = document.querySelectorAll('.portfolio-item');\r\n items.forEach(item => {\r\n if (category === 'all') {\r\n item.style.display = 'block';\r\n item.style.animation = 'fadeIn 0.5s ease-in-out';\r\n } else {\r\n if (item.classList.contains(category)) {\r\n item.style.display = 'block';\r\n item.style.animation = 'fadeIn 0.5s ease-in-out';\r\n } else {\r\n item.style.display = 'none';\r\n }\r\n }\r\n });\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc | \u062e\u062f\u0645\u0627\u062a \u0637\u0631\u0627\u062d\u06cc \u0633\u0627\u06cc\u062a\u060c \u0633\u0626\u0648 \u0648 \u0627\u062a\u0648\u0645\u0627\u0633\u06cc\u0648\u0646 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0637\u0631\u0627\u062d\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u062e\u062f\u0648\u0645\u06cc \u062e\u0627\u0646\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u062e\u062f\u0645\u0627\u062a \u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627 \u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646 \u062e\u0627\u0646\u0647 \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u062e\u062f\u0645\u0627\u062a \u0646\u0645\u0648\u0646\u0647\u200c\u06a9\u0627\u0631\u0647\u0627 \u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646 \ud83d\ude80 \u062a\u062d\u0648\u0644\u06cc \u0646\u0648\u06cc\u0646 \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0622\u06cc\u0646\u062f\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627 \u0628\u0627 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0645\u0627 \u0628\u0647 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0648 \u0628\u0632\u0631\u06af\u060c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-42","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/pages\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=42"}],"version-history":[{"count":38,"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/pages\/42\/revisions"}],"predecessor-version":[{"id":99,"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=\/wp\/v2\/pages\/42\/revisions\/99"}],"wp:attachment":[{"href":"https:\/\/makhdoomi.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}