BaderInfo | \u062e\u062f\u0645\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/title>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700;800;900&family=El+Messiri:wght@600;700;800&family=Outfit:wght@400;600;800;900&family=Tajawal:wght@500;700;800;900&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/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 darkMode: 'class',\r\n theme: {\r\n extend: {\r\n colors: {\r\n bader: {\r\n cyan: '#00C2FF',\r\n cyanGlow: '#00E5FF',\r\n cyanDark: '#0088CC',\r\n navyDeep: '#050B14',\r\n navyCard: '#0A1526',\r\n navyAccent: '#13233D',\r\n lightBg: '#F8FAFC',\r\n lightCard: '#FFFFFF',\r\n lightBorder: '#E2E8F0'\r\n }\r\n },\r\n fontFamily: {\r\n cairo: ['Cairo', 'sans-serif'],\r\n tajawal: ['Tajawal', 'sans-serif'],\r\n messiri: ['El Messiri', 'serif'],\r\n outfit: ['Outfit', 'sans-serif']\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root {\r\n --primary-cyan: #00C2FF;\r\n --glow-cyan: #00E5FF;\r\n }\r\n\r\n body {\r\n font-family: 'Tajawal', sans-serif;\r\n overflow-x: hidden;\r\n perspective: 1200px;\r\n transition: background-color 0.4s ease, color 0.4s ease;\r\n }\r\n\r\n body.dark {\r\n background-color: #050B14;\r\n color: #E2E8F0;\r\n }\r\n body:not(.dark) {\r\n background-color: #F8FAFC;\r\n color: #0F172A;\r\n }\r\n\r\n .title-3d {\r\n font-family: 'El Messiri', 'Tajawal', serif;\r\n font-weight: 800;\r\n background: linear-gradient(180deg, #FFFFFF 10%, #7DD3FC 60%, #00C2FF 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n text-shadow: \r\n 0 1px 0 rgba(0, 194, 255, 0.4),\r\n 0 2px 0 rgba(0, 194, 255, 0.3),\r\n 0 4px 20px rgba(0, 229, 255, 0.5),\r\n 0 8px 35px rgba(0, 194, 255, 0.35);\r\n letter-spacing: -0.02em;\r\n }\r\n body:not(.dark) .title-3d {\r\n background: linear-gradient(180deg, #0A1526 15%, #0077B6 60%, #00C2FF 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n text-shadow: 0 4px 20px rgba(0, 194, 255, 0.25);\r\n }\r\n\r\n .glass-3d-card {\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n transform-style: preserve-3d;\r\n transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;\r\n will-change: transform;\r\n }\r\n\r\n body.dark .glass-3d-card {\r\n background: linear-gradient(135deg, rgba(19, 35, 61, 0.45) 0%, rgba(10, 21, 38, 0.7) 100%);\r\n border: 1px solid rgba(0, 194, 255, 0.2);\r\n box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08);\r\n }\r\n body.dark .glass-3d-card:hover {\r\n border-color: rgba(0, 229, 255, 0.65);\r\n box-shadow: 0 20px 45px -10px rgba(0, 194, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n body:not(.dark) .glass-3d-card {\r\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.8) 100%);\r\n border: 1px solid rgba(0, 194, 255, 0.25);\r\n box-shadow: 0 10px 30px -10px rgba(0, 194, 255, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8);\r\n }\r\n body:not(.dark) .glass-3d-card:hover {\r\n border-color: rgba(0, 194, 255, 0.75);\r\n box-shadow: 0 20px 40px -10px rgba(0, 194, 255, 0.25);\r\n }\r\n\r\n .btn-3d-cyan {\r\n background: linear-gradient(135deg, #00E5FF 0%, #00C2FF 50%, #0088CC 100%);\r\n border: 1px solid rgba(255, 255, 255, 0.35);\r\n box-shadow: 0 8px 24px -4px rgba(0, 194, 255, 0.65), inset 0 2px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.25);\r\n transform: translateZ(20px);\r\n transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n color: #FFFFFF !important;\r\n }\r\n .btn-3d-cyan:hover {\r\n transform: translateY(-3px) scale(1.02) translateZ(30px);\r\n box-shadow: 0 16px 32px -4px rgba(0, 229, 255, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.6);\r\n }\r\n\r\n #tech-canvas {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n select option {\r\n background-color: #0A1526;\r\n color: #E2E8F0;\r\n }\r\n body:not(.dark) select option {\r\n background-color: #FFFFFF;\r\n color: #0F172A;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased selection:bg-bader-cyan selection:text-white\">\r\n\r\n \r\n <header class=\"fixed top-0 inset-x-0 z-50 transition-all duration-300 backdrop-blur-2xl border-b dark:border-bader-cyan\/15 border-slate-200\/80 dark:bg-bader-navyDeep\/85 bg-white\/85\">\r\n <div class=\"max-w-7xl 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 \r\n <div class=\"flex items-center gap-4\">\r\n <a href=\"..\/\" class=\"group flex items-center transition duration-300\">\r\n <div class=\"relative py-1 flex items-center\">\r\n <img decoding=\"async\" \r\n src=\"..\/aderInfo (3).png\" \r\n alt=\"BaderInfo Logo\" \r\n class=\"h-10 sm:h-12 w-auto object-contain transition duration-300 filter drop-shadow-[0_2px_12px_rgba(0,194,255,0.45)] group-hover:scale-105\"\r\n onerror=\"this.onerror=null; this.src='data:image\/svg+xml;utf8,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 320 80%22><text x=%2210%22 y=%2255%22 font-family=%22sans-serif%22 font-weight=%22900%22 font-size=%2244%22 fill=%22%2300C2FF%22>BaderInfo<\/text><\/svg>';\"\r\n \/>\r\n <\/div>\r\n <\/a>\r\n <span class=\"hidden sm:inline-block h-6 w-px dark:bg-slate-700 bg-slate-300\"><\/span>\r\n <span class=\"hidden sm:inline-block text-xs font-bold text-bader-cyan font-mono\" data-i18n=\"badgeServiceHead\">\u0642\u0633\u0645 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-2.5 sm:gap-3.5\">\r\n \r\n \r\n <a \r\n href=\"..\/\" \r\n title=\"\u0627\u0644\u0631\u062c\u0648\u0639 \u0644\u0644\u0631\u0626\u064a\u0633\u064a\u0629\" \r\n class=\"flex items-center gap-2 px-3 py-2 sm:px-4 sm:py-2.5 rounded-2xl border dark:border-bader-cyan\/25 border-slate-300 dark:bg-bader-navyCard\/70 bg-slate-100 dark:text-bader-cyan text-slate-800 text-xs font-bold hover:border-bader-cyan hover:scale-105 transition shadow-sm\"\r\n >\r\n <i class=\"fa-solid fa-house\"><\/i>\r\n <span data-i18n=\"btnBackHome\">\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/span>\r\n <\/a>\r\n\r\n \r\n <button \r\n id=\"theme-toggle-btn\" \r\n onclick=\"toggleDarkMode()\" \r\n title=\"\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0648\u0636\u0639\" \r\n class=\"w-10 h-10 sm:w-11 sm:h-11 rounded-2xl flex items-center justify-center border dark:border-bader-cyan\/25 border-slate-300 dark:bg-bader-navyCard\/70 bg-slate-100 dark:text-amber-400 text-blue-600 hover:scale-105 transition shadow-sm\"\r\n >\r\n <i id=\"theme-icon\" class=\"fa-solid fa-sun text-sm\"><\/i>\r\n <\/button>\r\n\r\n \r\n <button \r\n id=\"lang-toggle-btn\" \r\n onclick=\"toggleLanguage()\" \r\n title=\"Change Language\" \r\n class=\"flex items-center gap-1.5 px-3 py-2 sm:px-4 sm:py-2.5 rounded-2xl border dark:border-bader-cyan\/35 border-slate-300 dark:bg-bader-navyCard\/70 bg-slate-100 text-xs font-bold dark:text-bader-cyan text-slate-800 transition shadow-sm\"\r\n >\r\n <i class=\"fa-solid fa-globe text-xs\"><\/i>\r\n <span id=\"current-lang-label\">English<\/span>\r\n <\/button>\r\n\r\n \r\n <a \r\n href=\"https:\/\/wa.me\/213000000000?text=\u0645\u0631\u062d\u0628\u0627\u064b%20BaderInfo%20\u0623\u0631\u064a\u062f%20\u0627\u0633\u062a\u0634\u0627\u0631\u0629%20\u062d\u0648\u0644%20\u062a\u0635\u0645\u064a\u0645%20\u0645\u0648\u0642\u0639\" \r\n target=\"_blank\" \r\n class=\"hidden md:inline-flex items-center gap-2 px-4 py-2.5 rounded-2xl bg-emerald-500\/10 border border-emerald-500\/40 text-emerald-500 hover:bg-emerald-500 hover:text-white text-xs font-bold transition shadow-sm\"\r\n >\r\n <i class=\"fa-brands fa-whatsapp text-sm\"><\/i>\r\n <span data-i18n=\"quickChat\">\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0641\u0648\u0631\u064a\u0629<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <section class=\"relative min-h-[70vh] flex items-center justify-center pt-32 pb-16 overflow-hidden\">\r\n <canvas id=\"tech-canvas\"><\/canvas>\r\n\r\n <div class=\"relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n \r\n <div class=\"inline-flex items-center gap-2 px-5 py-2 rounded-full dark:bg-bader-navyCard\/80 bg-white\/80 border dark:border-bader-cyan\/30 border-cyan-500\/30 text-bader-cyan text-xs sm:text-sm font-bold shadow-lg shadow-bader-cyan\/10 mb-6 backdrop-blur-md\">\r\n <i class=\"fa-solid fa-laptop-code text-bader-cyanGlow\"><\/i>\r\n <span data-i18n=\"heroBadgeWeb\">\u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 | \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/span>\r\n <\/div>\r\n\r\n <h1 class=\"title-3d text-3xl sm:text-5xl lg:text-6xl font-extrabold max-w-4xl mx-auto leading-tight mb-6\">\r\n <span data-i18n=\"heroWebTitle\">\u062d\u0644\u0648\u0644 \u0648\u064a\u0628 \u0630\u0643\u064a\u0629\u060c \u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u0633\u0631\u0639\u0629 \u0648\u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0648\u064a\u0644<\/span>\r\n <\/h1>\r\n\r\n <p class=\"dark:text-slate-300 text-slate-600 text-sm sm:text-lg max-w-3xl mx-auto leading-relaxed mb-8\" data-i18n=\"heroWebDesc\">\r\n \u0646\u0642\u062f\u0645 \u0644\u0643 10 \u062a\u062e\u0635\u0635\u0627\u062a \u062f\u0642\u064a\u0642\u0629 \u062a\u0634\u0645\u0644 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0628\u0645\u062e\u062a\u0644\u0641 \u0623\u062d\u062c\u0627\u0645\u0647\u0627\u060c \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0634\u0631\u0643\u0627\u062a\u060c \u0627\u0644\u0639\u0642\u0627\u0631\u0627\u062a\u060c \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a\u060c \u0627\u0644\u0645\u062c\u0644\u0627\u062a\u060c \u0648\u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0637\u0628\u064a\u0629 \u0645\u0639 \u0631\u0628\u0637 \u0628\u0648\u0627\u0628\u0627\u062a \u0627\u0644\u062f\u0641\u0639 \u0627\u0644\u062c\u0632\u0627\u0626\u0631\u064a\u0629 \u0648\u062a\u0648\u0627\u0641\u0642 \u0643\u0627\u0645\u0644 \u0645\u0639 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b.\r\n <\/p>\r\n\r\n <div class=\"flex flex-wrap items-center justify-center gap-4\">\r\n <a href=\"#branches-catalog\" class=\"btn-3d-cyan px-7 py-3.5 rounded-2xl text-white font-extrabold text-xs sm:text-sm flex items-center gap-2\">\r\n <i class=\"fa-solid fa-layer-group\"><\/i>\r\n <span data-i18n=\"btnBrowseBranches\">\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0643\u0627\u0641\u0629 \u0627\u0644\u0641\u0631\u0648\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a<\/span>\r\n <\/a>\r\n <a href=\"#order-section\" class=\"px-7 py-3.5 rounded-2xl dark:bg-bader-navyCard\/80 bg-white hover:bg-slate-100 dark:hover:bg-bader-navyCard dark:text-white text-slate-800 border dark:border-bader-cyan\/30 border-slate-300 font-bold text-xs sm:text-sm backdrop-blur-md transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-paper-plane text-bader-cyan\"><\/i>\r\n <span data-i18n=\"btnDirectOrder\">\u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0645\u0628\u0627\u0634\u0631<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-6 border-y dark:border-bader-cyan\/15 border-slate-200 dark:bg-bader-navyDeep\/50 bg-slate-100\/50\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 scrollbar-none text-xs font-bold\">\r\n <button onclick=\"filterCards('all')\" class=\"filter-btn active px-4 py-2 rounded-xl bg-bader-cyan text-bader-navyDeep transition whitespace-nowrap\" data-i18n=\"filterAll\">\u0627\u0644\u0643\u0644 (10 \u0641\u0631\u0648\u0639)<\/button>\r\n <button onclick=\"filterCards('ecommerce')\" class=\"filter-btn px-4 py-2 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 dark:text-slate-300 text-slate-700 hover:border-bader-cyan transition whitespace-nowrap\" data-i18n=\"filterEcom\">\u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/button>\r\n <button onclick=\"filterCards('business')\" class=\"filter-btn px-4 py-2 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 dark:text-slate-300 text-slate-700 hover:border-bader-cyan transition whitespace-nowrap\" data-i18n=\"filterBiz\">\u0634\u0631\u0643\u0627\u062a \u0648\u0639\u0642\u0627\u0631\u0627\u062a<\/button>\r\n <button onclick=\"filterCards('education')\" class=\"filter-btn px-4 py-2 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 dark:text-slate-300 text-slate-700 hover:border-bader-cyan transition whitespace-nowrap\" data-i18n=\"filterEdu\">\u062a\u0639\u0644\u064a\u0645 \u0648\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a<\/button>\r\n <button onclick=\"filterCards('specialized')\" class=\"filter-btn px-4 py-2 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 dark:text-slate-300 text-slate-700 hover:border-bader-cyan transition whitespace-nowrap\" data-i18n=\"filterSpec\">\u0637\u0628\u064a\u060c \u0633\u064a\u0627\u062d\u064a \u0648\u0625\u062e\u0628\u0627\u0631\u064a<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"branches-catalog\" class=\"py-20 relative\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n <div class=\"text-center max-w-3xl mx-auto mb-14\">\r\n <h2 class=\"text-2xl sm:text-4xl font-black dark:text-white text-slate-900\" data-i18n=\"catalogTitle\">\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0641\u0631\u0648\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635<\/h2>\r\n <p class=\"dark:text-slate-400 text-slate-600 text-xs sm:text-sm mt-3\" data-i18n=\"catalogSubtitle\">\r\n \u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0645\u0634\u0631\u0648\u0639\u0643\u060c \u0648\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \"\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631\" \u0644\u064a\u062a\u0645 \u0645\u0644\u0621 \u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0637\u0644\u0628 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\" id=\"branches-grid\">\r\n \r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"ecommerce\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-cart-shopping\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagStore\">\u062a\u062c\u0627\u0631\u0629 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b1Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u062a\u062c\u0631 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b1Desc\">\r\n \u0645\u0646\u0635\u0627\u062a \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a\u060c \u0627\u0644\u0637\u0644\u0628\u0627\u062a\u060c \u0627\u0644\u0643\u0648\u0628\u0648\u0646\u0627\u062a\u060c \u0648\u062d\u0633\u0627\u0628 \u0645\u0635\u0627\u0631\u064a\u0641 \u0627\u0644\u0634\u062d\u0646 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a \u0644\u0644\u0648\u0644\u0627\u064a\u0627\u062a \u0627\u0644\u0640 58.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_store\" value=\"\u0645\u062a\u062c\u0631 \u0643\u0628\u064a\u0631\" onchange=\"autoFillSpec('store', '\u0645\u062a\u062c\u0631 \u0643\u0628\u064a\u0631')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b1Spec1\">\u0645\u062a\u062c\u0631 \u0643\u0628\u064a\u0631 (\u0645\u0646\u062a\u062c\u0627\u062a \u063a\u064a\u0631 \u0645\u062d\u062f\u0648\u062f\u0629\u060c \u0641\u0631\u0648\u0639 \u0645\u062a\u0639\u062f\u062f\u0629)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_store\" value=\"\u0645\u062a\u062c\u0631 \u0645\u062a\u0648\u0633\u0637\" checked onchange=\"autoFillSpec('store', '\u0645\u062a\u062c\u0631 \u0645\u062a\u0648\u0633\u0637')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b1Spec2\">\u0645\u062a\u062c\u0631 \u0645\u062a\u0648\u0633\u0637 (\u062d\u062a\u0649 500 \u0645\u0646\u062a\u062c\u060c \u062f\u0641\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_store\" value=\"\u0645\u062a\u062c\u0631 \u0635\u063a\u064a\u0631\" onchange=\"autoFillSpec('store', '\u0645\u062a\u062c\u0631 \u0635\u063a\u064a\u0631')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b1Spec3\">\u0645\u062a\u062c\u0631 \u0635\u063a\u064a\u0631 (\u0645\u0646\u062a\u062c\u0627\u062a \u0645\u062d\u062f\u0648\u062f\u0629\u060c \u0634\u0631\u0627\u0621 \u0641\u0648\u0631\u064a)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('store')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"business\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-cyan-500\/15 text-cyan-400 flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-globe\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-cyan-500\/10 text-cyan-400 border border-cyan-500\/30\" data-i18n=\"tagWeb\">\u0645\u0648\u0627\u0642\u0639 \u0639\u0627\u0645\u0629<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b2Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b2Desc\">\r\n \u062d\u0644\u0648\u0644 \u0648\u064a\u0628 \u0639\u0635\u0631\u064a\u0629 \u062a\u0644\u0628\u064a \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u062d\u0636\u0648\u0631 \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0644\u0631\u0633\u0645\u064a \u0645\u0639 \u062a\u062c\u0627\u0648\u0628 \u0648\u0633\u0631\u0639\u0629 \u0641\u0627\u0626\u0642\u0629.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_website\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\" checked onchange=\"autoFillSpec('website', '\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b2Spec1\">\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a (\u062a\u0641\u0627\u0639\u0644\u064a \u0648\u0642\u0648\u0627\u0639\u062f \u0628\u064a\u0627\u0646\u0627\u062a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_website\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('website', '\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b2Spec2\">\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0635\u0641\u062d\u0627\u062a \u062a\u0639\u0631\u064a\u0641\u064a\u0629 \u0631\u0627\u0642\u064a\u0629)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_website\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635\" onchange=\"autoFillSpec('website', '\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b2Spec3\">\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635 (\u0648\u0638\u0627\u0626\u0641 \u0628\u0631\u0645\u062c\u064a\u0629 \u0645\u062e\u0635\u0635\u0629)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('website')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"business\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-hotel\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagRealEstate\">\u0639\u0642\u0627\u0631\u0627\u062a \u0648\u0623\u0645\u0644\u0627\u0643<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b3Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b3Desc\">\r\n \u0628\u0648\u0627\u0628\u0627\u062a \u0644\u0639\u0631\u0636 \u0627\u0644\u0634\u0642\u0642 \u0648\u0627\u0644\u0641\u064a\u0644\u0627\u062a \u0648\u0627\u0644\u0623\u0631\u0627\u0636\u064a \u0645\u0639 \u0641\u0644\u0627\u062a\u0631 \u062c\u063a\u0631\u0627\u0641\u064a\u0629 \u0648\u062a\u0648\u0627\u0635\u0644 \u0641\u0648\u0631\u064a \u0645\u0639 \u0627\u0644\u0645\u0643\u0627\u062a\u0628 \u0627\u0644\u0639\u0642\u0627\u0631\u064a\u0629.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_realestate\" value=\"\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('realestate', '\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b3Spec1\">\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u0645\u062a\u062e\u0635\u0635 (\u0641\u0644\u062a\u0631\u0629 \u062e\u0631\u0627\u0626\u0637 \u0648\u062d\u062c\u0632 \u0645\u0639\u0627\u064a\u0646\u0627\u062a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_realestate\" value=\"\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('realestate', '\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b3Spec2\">\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0645\u0639\u0631\u0636 \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0648\u0643\u0627\u0644\u0629)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('realestate')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"business\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-building\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagCorp\">\u0634\u0631\u0643\u0627\u062a \u0648\u0645\u0624\u0633\u0633\u0627\u062a<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b4Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b4Desc\">\r\n \u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0631\u0633\u0645\u064a\u0629 \u0644\u0644\u0634\u0631\u0643\u0629 \u0648\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0627\u0644\u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0648\u0634\u0647\u0627\u062f\u0627\u062a \u0627\u0644\u062b\u0642\u0629 \u0644\u0643\u0633\u0628 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0648\u0627\u0644\u0645\u0633\u062a\u062b\u0645\u0631\u064a\u0646.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_company\" value=\"\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('company', '\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b4Spec1\">\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635 (\u0628\u0648\u0627\u0628\u0629 \u062e\u062f\u0645\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u0644\u063a\u0627\u062a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_company\" value=\"\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('company', '\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b4Spec2\">\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u062a\u0639\u0631\u064a\u0641\u064a (\u0635\u0641\u062d\u0629 \u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0631\u0633\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('company')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"specialized\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-newspaper\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagNews\">\u0625\u0639\u0644\u0627\u0645 \u0648\u0635\u062d\u0627\u0641\u0629<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b5Title\">\u062a\u0635\u0645\u064a\u0645 \u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b5Desc\">\r\n \u0628\u0648\u0627\u0628\u0627\u062a \u0625\u062e\u0628\u0627\u0631\u064a\u0629 \u0630\u0627\u062a \u0633\u0631\u0639\u0629 \u0641\u0627\u0626\u0642\u0629 \u0645\u062c\u0647\u0632\u0629 \u0644\u062a\u062d\u0645\u0644 \u0622\u0644\u0627\u0641 \u0627\u0644\u0632\u0648\u0627\u0631 \u0648\u0645\u0631\u0628\u0648\u0637\u0629 \u0628\u0623\u0645\u0627\u0643\u0646 \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u0645\u0631\u0628\u062d\u0629.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_newspaper\" value=\"\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629\" checked onchange=\"autoFillSpec('newspaper', '\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b5Spec1\">\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 (\u0625\u062f\u0627\u0631\u0629 \u0643\u062a\u0627\u0628 \u0648\u0623\u0642\u0633\u0627\u0645 \u0643\u0628\u0631\u0649)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_newspaper\" value=\"\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629\" onchange=\"autoFillSpec('newspaper', '\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b5Spec2\">\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629 (\u0645\u062c\u0644\u0629 \u0631\u0642\u0645\u064a\u0629 \u062e\u0641\u064a\u0641\u0629)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('newspaper')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"education\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-graduation-cap\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagEdu\">\u062a\u0639\u0644\u064a\u0645 \u0648\u062a\u062f\u0631\u064a\u0628<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b6Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b6Desc\">\r\n \u0645\u0646\u0635\u0627\u062a \u0644\u0644\u0645\u062f\u0627\u0631\u0633 \u0648\u0627\u0644\u0623\u0633\u0627\u062a\u0630\u0629 \u0644\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0639\u0644\u0645\u064a\u0629\u060c \u0627\u0644\u0648\u0627\u062c\u0628\u0627\u062a\u060c \u0648\u0645\u062a\u0627\u0628\u0639\u0629 \u0623\u0648\u0644\u064a\u0627\u0621 \u0627\u0644\u0623\u0645\u0648\u0631 \u0648\u0627\u0644\u0637\u0644\u0627\u0628.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_educational\" value=\"\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('educational', '\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b6Spec1\">\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u062e\u0635\u0635 (\u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645 \u0637\u0644\u0627\u0628 \u0648\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_educational\" value=\"\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('educational', '\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b6Spec2\">\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0639\u0631\u0636 \u0627\u0644\u0628\u0631\u0627\u0645\u062c \u0648\u0627\u0644\u062a\u0633\u062c\u064a\u0644)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('educational')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"education\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-chalkboard-user\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagAcademy\">\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a \u0643\u0628\u0631\u0649<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b7Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b7Desc\">\r\n \u0623\u0646\u0638\u0645\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0645\u062a\u0637\u0648\u0631\u0629 \u062a\u062a\u064a\u062d \u0628\u064a\u0639 \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0627\u0644\u062a\u062f\u0631\u064a\u0628\u064a\u0629 \u0627\u0644\u0645\u0633\u062c\u0644\u0629 \u0648\u0627\u0644\u0645\u0628\u0627\u0634\u0631\u0629 \u0645\u0639 \u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0627\u064b.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_academy\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('academy', '\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b7Spec1\">\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0645\u062a\u062e\u0635\u0635 (LMS \u0643\u0627\u0645\u0644 \u0648\u062f\u0641\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_academy\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('academy', '\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b7Spec2\">\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a (\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0648\u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f\u0627\u062a)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('academy')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"specialized\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-plane-departure\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagTourism\">\u0633\u064a\u0627\u062d\u0629 \u0648\u0633\u0641\u0631\u064a\u0627\u062a<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b8Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b8Desc\">\r\n \u0639\u0631\u0636 \u0628\u0631\u0627\u0645\u062c \u0627\u0644\u0639\u0645\u0631\u0629 \u0648\u0627\u0644\u0631\u062d\u0644\u0627\u062a \u0627\u0644\u0633\u064a\u0627\u062d\u064a\u0629 \u0648\u062d\u062c\u0648\u0632\u0627\u062a \u0627\u0644\u062a\u0630\u0627\u0643\u0631 \u0648\u0627\u0644\u0641\u0646\u0627\u062f\u0642 \u0628\u0646\u0645\u0627\u0630\u062c \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062a\u062c\u0630\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0631\u064a\u0646.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_tourism\" value=\"\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('tourism', '\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b8Spec1\">\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u0645\u062a\u062e\u0635\u0635 (\u062d\u062c\u0632 \u0628\u0631\u0627\u0645\u062c \u0627\u0644\u0639\u0645\u0631\u0629 \u0648\u0627\u0644\u0633\u064a\u0627\u062d\u0629)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_tourism\" value=\"\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('tourism', '\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b8Spec2\">\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0645\u0639\u0631\u0636 \u0631\u062d\u0644\u0627\u062a \u0627\u0644\u0648\u0643\u0627\u0644\u0629 \u0648\u0627\u0644\u062e\u062f\u0645\u0627\u062a)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('tourism')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"specialized\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-stethoscope\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagMedical\">\u0635\u062d\u0629 \u0648\u0637\u0628<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b9Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0637\u0628\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b9Desc\">\r\n \u0645\u0646\u0635\u0627\u062a \u0645\u0647\u0646\u064a\u0629 \u0644\u0644\u0623\u0637\u0628\u0627\u0621 \u0648\u0627\u0644\u0645\u0635\u062d\u0627\u062a \u0644\u062a\u0633\u0647\u064a\u0644 \u062d\u062c\u0632 \u0627\u0644\u0645\u0648\u0627\u0639\u064a\u062f \u0648\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u062a\u0639\u0631\u064a\u0641\u064a \u0648\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0637\u0628\u064a\u0629.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_medical\" value=\"\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('medical', '\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b9Spec1\">\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u0645\u062a\u062e\u0635\u0635 (\u062d\u062c\u0632 \u0645\u0648\u0627\u0639\u064a\u062f \u0623\u0648\u0646\u0644\u0627\u064a\u0646 \u0648\u0645\u0644\u0641\u0627\u062a \u0645\u0631\u0636\u0649)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_medical\" value=\"\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('medical', '\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b9Spec2\">\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u064a\u0627\u062f\u0629 \u0648\u0645\u0648\u0627\u0639\u064a\u062f \u0627\u0644\u0639\u0645\u0644)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('medical')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"business\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-user-tie\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagPersonal\">\u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0648\u0645\u062f\u0648\u0646\u0627\u062a<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b10Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b10Desc\">\r\n \u0645\u0633\u0627\u062d\u0629 \u0631\u0642\u0645\u064a\u0629 \u062e\u0627\u0635\u0629 \u0644\u0635\u0646\u0627\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0627\u0644\u062e\u0628\u0631\u0627\u0621 \u0648\u0627\u0644\u0623\u0641\u0631\u0627\u062f \u0644\u0625\u0628\u0631\u0627\u0632 \u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 \u0648\u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0648\u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_blog\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629\" checked onchange=\"autoFillSpec('blog', '\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b10Spec1\">\u0645\u0648\u0642\u0639 \u0623\u0648 \u0645\u062f\u0648\u0646\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 (\u0646\u0638\u0627\u0645 \u0645\u0642\u0627\u0644\u0627\u062a \u0648\u0646\u0634\u0631\u0629 \u0628\u0631\u064a\u062f\u064a\u0629)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_blog\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629\" onchange=\"autoFillSpec('blog', '\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b10Spec2\">\u0645\u0648\u0642\u0639 \u062a\u0639\u0631\u064a\u0641\u064a \u0634\u062e\u0635\u064a (\u0628\u0648\u0631\u062a\u0641\u0648\u0644\u064a\u0648 \u0648\u0633\u064a\u0631\u0629 \u0630\u0627\u062a\u064a\u0629 CV)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('blog')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 dark:bg-bader-navyDeep\/60 bg-slate-100\/70 border-y dark:border-bader-cyan\/15 border-slate-200\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"glass-3d-card p-6 sm:p-8 rounded-3xl text-center\">\r\n <span class=\"text-xs font-black uppercase text-bader-cyan tracking-wider\" data-i18n=\"calcTag\">\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062a\u0642\u062f\u064a\u0631<\/span>\r\n <h3 class=\"text-xl sm:text-3xl font-black dark:text-white text-slate-900 mt-2 mb-4\" data-i18n=\"calcTitle\">\u062d\u062f\u062f \u062e\u0635\u0627\u0626\u0635 \u0645\u0648\u0642\u0639\u0643 \u0628\u062f\u0642\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u062a\u0642\u062f\u064a\u0631 \u0641\u0648\u0631\u064a<\/h3>\r\n <p class=\"text-xs sm:text-sm dark:text-slate-300 text-slate-600 mb-6\" data-i18n=\"calcDesc\">\r\n \u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629 \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0631\u063a\u0628 \u0628\u0636\u0645\u0647\u0627 \u0644\u0645\u0648\u0642\u0639\u0643\u060c \u0644\u064a\u062a\u0645 \u0627\u062d\u062a\u0633\u0627\u0628 \u062e\u0637\u0629 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0648\u062f\u0645\u062c\u0647\u0627 \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064a \u0637\u0644\u0628\u0643.\r\n <\/p>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3 text-start text-xs mb-6\">\r\n <label class=\"p-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 flex items-center gap-2 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"feature-payment\" onchange=\"updateCalcSummary()\" class=\"text-bader-cyan rounded focus:ring-0\">\r\n <span data-i18n=\"featPayment\">\u0631\u0628\u0637 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0630\u0647\u0628\u064a\u0629 \u0648 CIB<\/span>\r\n <\/label>\r\n <label class=\"p-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 flex items-center gap-2 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"feature-shipping\" onchange=\"updateCalcSummary()\" class=\"text-bader-cyan rounded focus:ring-0\">\r\n <span data-i18n=\"featShipping\">\u062a\u0643\u0627\u0645\u0644 \u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0634\u062d\u0646 \u0644\u0644\u0640 58 \u0648\u0644\u0627\u064a\u0629<\/span>\r\n <\/label>\r\n <label class=\"p-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 flex items-center gap-2 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"feature-multilang\" onchange=\"updateCalcSummary()\" class=\"text-bader-cyan rounded focus:ring-0\">\r\n <span data-i18n=\"featMultiLang\">\u062f\u0639\u0645 \u0644\u063a\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629 (\u0639\u0631\u0628\u064a\/\u0641\u0631\u0646\u0633\u064a\/\u0625\u0646\u062c\u0644\u064a\u0632\u064a)<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div id=\"calc-result\" class=\"p-4 rounded-xl dark:bg-bader-navyCard\/60 bg-white\/80 border dark:border-bader-cyan\/30 border-cyan-500\/30 inline-block text-xs font-bold text-bader-cyan\">\r\n <span data-i18n=\"calcReadyPrompt\">\u062a\u0645 \u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a! \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0644\u0625\u0631\u0633\u0627\u0644 \u062a\u0641\u0627\u0635\u064a\u0644 \u0645\u0634\u0631\u0648\u0639\u0643 \u0623\u062f\u0646\u0627\u0647.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"order-section\" class=\"py-24 relative\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n <div class=\"text-center max-w-2xl mx-auto mb-12\">\r\n <div class=\"inline-flex items-center gap-2 px-4 py-1 rounded-full bg-bader-cyan\/10 border border-bader-cyan\/30 text-bader-cyan text-xs font-bold mb-3\">\r\n <i class=\"fa-solid fa-file-signature\"><\/i>\r\n <span data-i18n=\"badgeOrder\">\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629 \u0628\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629<\/span>\r\n <\/div>\r\n <h2 class=\"text-2xl sm:text-4xl font-black dark:text-white text-slate-900\" data-i18n=\"titleOrder\">\u0646\u0645\u0648\u0630\u062c \u062d\u062c\u0632 \u0648\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639<\/h2>\r\n <p class=\"dark:text-slate-400 text-slate-600 text-xs sm:text-sm mt-3\" data-i18n=\"subOrder\">\r\n \u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0623\u0648 \u062f\u0639\u0647\u0645\u0627 \u0645\u062d\u062f\u062f\u064a\u0646 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u062e\u062a\u064a\u0627\u0631\u0643 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0644\u0648\u062c \u0623\u0639\u0644\u0627\u0647\u060c \u062b\u0645 \u0627\u062e\u062a\u0631 \u0648\u0633\u064a\u0644\u0629 \u0627\u0644\u0625\u0631\u0633\u0627\u0644.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-3d-card p-6 sm:p-10 rounded-3xl border dark:border-bader-cyan\/25 border-cyan-500\/20\">\r\n <form id=\"web-order-form\" onsubmit=\"event.preventDefault();\" class=\"space-y-6\">\r\n \r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-5\">\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-user text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formName\">\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/span> *\r\n <\/label>\r\n <input type=\"text\" id=\"order-name\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0628\u062f\u0631 \u0627\u0644\u062f\u064a\u0646 \u062d\u0645\u064a\u062f\u0627\u0646\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-phone text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formPhone\">\u0627\u0644\u0647\u0627\u062a\u0641 \/ \u0648\u0627\u062a\u0633\u0627\u0628<\/span> *\r\n <\/label>\r\n <input type=\"tel\" id=\"order-phone\" required placeholder=\"05 \/ 06 \/ 07 ...\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-5\">\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-envelope text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formEmail\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/span> *\r\n <\/label>\r\n <input type=\"email\" id=\"order-email\" required placeholder=\"name@domain.com\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-city text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formCity\">\u0627\u0644\u0648\u0644\u0627\u064a\u0629 \/ \u0627\u0644\u0645\u062f\u064a\u0646\u0629<\/span> *\r\n <\/label>\r\n <input type=\"text\" id=\"order-city\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u062c\u0632\u0627\u0626\u0631 \u0627\u0644\u0639\u0627\u0635\u0645\u0629\u060c \u0628\u0627\u062a\u0646\u0629...\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-5 rounded-2xl dark:bg-bader-navyDeep\/60 bg-white\/70 border dark:border-bader-cyan\/20 border-cyan-500\/30 space-y-4\">\r\n <h4 class=\"text-xs font-black text-bader-cyan uppercase tracking-wider flex items-center gap-2\">\r\n <i class=\"fa-solid fa-layer-group\"><\/i>\r\n <span data-i18n=\"branchBoxTitle\">\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629<\/span>\r\n <\/h4>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-1\" data-i18n=\"formBranchLabel\">\u0627\u0644\u0641\u0631\u0639 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 *<\/label>\r\n <select id=\"order-branch\" onchange=\"onBranchChange()\" class=\"w-full px-3.5 py-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 text-xs sm:text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan\">\r\n <option value=\"store\">\u062a\u0635\u0645\u064a\u0645 \u0645\u062a\u062c\u0631 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/option>\r\n <option value=\"website\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/option>\r\n <option value=\"realestate\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a<\/option>\r\n <option value=\"company\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629<\/option>\r\n <option value=\"newspaper\">\u062a\u0635\u0645\u064a\u0645 \u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/option>\r\n <option value=\"educational\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a<\/option>\r\n <option value=\"academy\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629<\/option>\r\n <option value=\"tourism\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a<\/option>\r\n <option value=\"medical\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0637\u0628\u064a<\/option>\r\n <option value=\"blog\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-1\" data-i18n=\"formSpecLabel\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635 *<\/label>\r\n <select id=\"order-spec\" class=\"w-full px-3.5 py-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 text-xs sm:text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan\">\r\n \r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-comment-dots text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formNotes\">\u062a\u0641\u0627\u0635\u064a\u0644 \u0625\u0636\u0627\u0641\u064a\u0629 \u0639\u0646 \u0646\u0634\u0627\u0637\u0643 \u0623\u0648 \u0623\u0641\u0643\u0627\u0631\u0643<\/span>\r\n <\/label>\r\n <textarea id=\"order-notes\" rows=\"3\" placeholder=\"\u0627\u0634\u0631\u062d \u0644\u0646\u0627 \u0637\u0628\u064a\u0639\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0623\u0648 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0623\u0648 \u0623\u064a \u0645\u0648\u0627\u0642\u0639 \u0623\u062e\u0631\u0649 \u062a\u0639\u062c\u0628\u0643 \u0641\u0643\u0631\u062a\u0647\u0627...\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\"><\/textarea>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 pt-3\">\r\n <button type=\"button\" onclick=\"submitViaEmail()\" class=\"py-4 px-6 rounded-2xl dark:bg-slate-800 bg-slate-200 hover:bg-slate-300 dark:hover:bg-slate-700 dark:text-white text-slate-900 font-bold text-xs sm:text-sm border dark:border-slate-600 border-slate-300 transition flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-paper-plane text-bader-cyan\"><\/i>\r\n <span data-i18n=\"btnSendEmail\">\u0625\u0631\u0633\u0627\u0644 \u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0645\u0646\u0635\u0629<\/span>\r\n <\/button>\r\n\r\n <button type=\"button\" onclick=\"submitViaWhatsApp()\" class=\"btn-3d-cyan py-4 px-6 rounded-2xl text-white font-extrabold text-xs sm:text-sm transition flex items-center justify-center gap-2\">\r\n <i class=\"fa-brands fa-whatsapp text-lg\"><\/i>\r\n <span data-i18n=\"btnSendWhatsApp\">\u0625\u0631\u0633\u0627\u0644 \u0648\u062a\u0648\u0627\u0635\u0644 \u0645\u0628\u0627\u0634\u0631 \u0639\u0628\u0631 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/form>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"dark:bg-black\/95 bg-slate-900 text-slate-400 pt-16 pb-12 text-sm border-t border-slate-800\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-10 pb-12 border-b border-slate-800\">\r\n \r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center\">\r\n <img decoding=\"async\" src=\"..\/aderInfo (3).png\" alt=\"BaderInfo Logo\" class=\"h-10 w-auto object-contain filter drop-shadow-[0_0_10px_rgba(0,194,255,0.4)]\">\r\n <\/div>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\" data-i18n=\"footerWebDesc\">\r\n \u0642\u0633\u0645 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 - \u0645\u0646\u0635\u0629 BaderInfo. \u062d\u0644\u0648\u0644 \u0628\u0631\u0645\u062c\u064a\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u062a\u0648\u0627\u0643\u0628 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"text-white font-bold text-xs uppercase tracking-wider mb-4\" data-i18n=\"footerQuickLinks\">\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629<\/h4>\r\n <ul class=\"space-y-2 text-xs\">\r\n <li><a href=\"..\/\" class=\"hover:text-bader-cyan transition\" data-i18n=\"navHome\">\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/a><\/li>\r\n <li><a href=\"#branches-catalog\" class=\"hover:text-bader-cyan transition\" data-i18n=\"navCatalog\">\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0641\u0631\u0648\u0639<\/a><\/li>\r\n <li><a href=\"#order-section\" class=\"hover:text-bader-cyan transition\" data-i18n=\"navOrder\">\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629<\/a><\/li>\r\n <li><a href=\"https:\/\/wa.me\/213000000000\" target=\"_blank\" class=\"hover:text-emerald-400 transition\" data-i18n=\"navDirectWhatsApp\">\u0645\u062d\u0627\u062f\u062b\u0629 \u0648\u0627\u062a\u0633\u0627\u0628 \u0645\u0628\u0627\u0634\u0631\u0629<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"text-white font-bold text-xs uppercase tracking-wider mb-4\" data-i18n=\"footerContactHeading\">\u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0645\u0628\u0627\u0634\u0631<\/h4>\r\n <ul class=\"space-y-2.5 text-xs\">\r\n <li class=\"flex items-center gap-2\"><i class=\"fa-solid fa-envelope text-bader-cyan\"><\/i> <span>contact@baderinfo.com<\/span><\/li>\r\n <li class=\"flex items-center gap-2\"><i class=\"fa-brands fa-whatsapp text-emerald-400\"><\/i> <span>+213 (0) 5XX XX XX XX<\/span><\/li>\r\n <li class=\"flex items-center gap-2\"><i class=\"fa-solid fa-location-dot text-bader-cyan\"><\/i> <span data-i18n=\"footerLocation\">\u0627\u0644\u062c\u0632\u0627\u0626\u0631\u060c \u0628\u0627\u062a\u0646\u0629 \/ \u0643\u0627\u0645\u0644 \u0627\u0644\u062a\u0631\u0627\u0628 \u0627\u0644\u0648\u0637\u0646\u064a<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500\">\r\n <p>\u00a9 2026 BaderInfo - Web Design & E-Commerce Engineering<\/p>\r\n <p class=\"mt-2 sm:mt-0 text-slate-400\">High-Performance Dedicated Service Page<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <div id=\"app-toast\" class=\"fixed bottom-6 start-6 z-50 dark:bg-slate-900 bg-white border dark:border-bader-cyan\/40 border-cyan-500\/40 dark:text-white text-slate-900 px-5 py-3.5 rounded-2xl shadow-2xl flex items-center gap-3 transform translate-y-28 opacity-0 transition-all duration-300 pointer-events-none\">\r\n <i id=\"toast-icon\" class=\"fa-solid fa-circle-check text-bader-cyan text-base\"><\/i>\r\n <span id=\"toast-msg\" class=\"text-xs font-bold\">\u062a\u0645 \u0627\u0644\u062a\u0646\u0641\u064a\u0630 \u0628\u0646\u062c\u0627\u062d<\/span>\r\n <\/div>\r\n\r\n <script>\r\n \/* ========================================================\r\n 1. DATA ENGINE FOR THE 10 BRANCHES & SPECS\r\n ======================================================== *\/\r\n const branchesData = {\r\n store: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u062a\u062c\u0631 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\",\r\n titleEn: \"E-Commerce Online Store Design\",\r\n specsAr: [\"\u0645\u062a\u062c\u0631 \u0643\u0628\u064a\u0631\", \"\u0645\u062a\u062c\u0631 \u0645\u062a\u0648\u0633\u0637\", \"\u0645\u062a\u062c\u0631 \u0635\u063a\u064a\u0631\"],\r\n specsEn: [\"Large E-Store\", \"Medium E-Store\", \"Small E-Store\"]\r\n },\r\n website: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\",\r\n titleEn: \"Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\", \"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062a\u0639\u0631\u064a\u0641\u064a\", \"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635\"],\r\n specsEn: [\"Dynamic Web Portal\", \"Informational Showcase\", \"Specialized Web Portal\"]\r\n },\r\n realestate: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a\",\r\n titleEn: \"Real Estate Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Real Estate Portal\", \"Showcase Real Estate Site\"]\r\n },\r\n company: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629\",\r\n titleEn: \"Company Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Corporate Portal\", \"Informational Corporate Site\"]\r\n },\r\n newspaper: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\",\r\n titleEn: \"Online Newspaper Design\",\r\n specsAr: [\"\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629\", \"\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629\"],\r\n specsEn: [\"Specialized News Portal\", \"Digital Magazine Showcase\"]\r\n },\r\n educational: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a\",\r\n titleEn: \"Educational Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized LMS Platform\", \"Educational Showcase\"]\r\n },\r\n academy: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629\",\r\n titleEn: \"Academy Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Academy Portal\", \"Academy Showcase\"]\r\n },\r\n tourism: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a\",\r\n titleEn: \"Tourism Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Travel Booking\", \"Tourism Agency Showcase\"]\r\n },\r\n medical: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0637\u0628\u064a\",\r\n titleEn: \"Medical Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Clinic Platform\", \"Doctor \/ Clinic Showcase\"]\r\n },\r\n blog: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629\",\r\n titleEn: \"Personal Website or Blog Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629\", \"\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629\"],\r\n specsEn: [\"Specialized Blog \/ Portfolio\", \"Personal Showcase Site\"]\r\n }\r\n };\r\n\r\n \/* ========================================================\r\n 2. TRANSLATION ENGINE\r\n ======================================================== *\/\r\n let currentLanguage = 'ar';\r\n\r\n const translations = {\r\n ar: {\r\n badgeServiceHead: \"\u0642\u0633\u0645 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639\",\r\n btnBackHome: \"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\",\r\n quickChat: \"\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0641\u0648\u0631\u064a\u0629\",\r\n heroBadgeWeb: \"\u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 | \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\",\r\n heroWebTitle: \"\u062d\u0644\u0648\u0644 \u0648\u064a\u0628 \u0630\u0643\u064a\u0629\u060c \u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u0633\u0631\u0639\u0629 \u0648\u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\",\r\n heroWebDesc: \"\u0646\u0642\u062f\u0645 \u0644\u0643 10 \u062a\u062e\u0635\u0635\u0627\u062a \u062f\u0642\u064a\u0642\u0629 \u062a\u0634\u0645\u0644 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0628\u0645\u062e\u062a\u0644\u0641 \u0623\u062d\u062c\u0627\u0645\u0647\u0627\u060c \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0634\u0631\u0643\u0627\u062a\u060c \u0627\u0644\u0639\u0642\u0627\u0631\u0627\u062a\u060c \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a\u060c \u0627\u0644\u0645\u062c\u0644\u0627\u062a\u060c \u0648\u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0637\u0628\u064a\u0629 \u0645\u0639 \u0631\u0628\u0637 \u0628\u0648\u0627\u0628\u0627\u062a \u0627\u0644\u062f\u0641\u0639 \u0627\u0644\u062c\u0632\u0627\u0626\u0631\u064a\u0629 \u0648\u062a\u0648\u0627\u0641\u0642 \u0643\u0627\u0645\u0644 \u0645\u0639 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b.\",\r\n btnBrowseBranches: \"\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0643\u0627\u0641\u0629 \u0627\u0644\u0641\u0631\u0648\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a\",\r\n btnDirectOrder: \"\u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0645\u0628\u0627\u0634\u0631\",\r\n filterAll: \"\u0627\u0644\u0643\u0644 (10 \u0641\u0631\u0648\u0639)\",\r\n filterEcom: \"\u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\",\r\n filterBiz: \"\u0634\u0631\u0643\u0627\u062a \u0648\u0639\u0642\u0627\u0631\u0627\u062a\",\r\n filterEdu: \"\u062a\u0639\u0644\u064a\u0645 \u0648\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a\",\r\n filterSpec: \"\u0637\u0628\u064a\u060c \u0633\u064a\u0627\u062d\u064a \u0648\u0625\u062e\u0628\u0627\u0631\u064a\",\r\n catalogTitle: \"\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0641\u0631\u0648\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635\",\r\n catalogSubtitle: \"\u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0645\u0634\u0631\u0648\u0639\u0643\u060c \u0648\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \\\"\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631\\\" \u0644\u064a\u062a\u0645 \u0645\u0644\u0621 \u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0637\u0644\u0628 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629.\",\r\n tagStore: \"\u062a\u062c\u0627\u0631\u0629 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\",\r\n tagWeb: \"\u0645\u0648\u0627\u0642\u0639 \u0639\u0627\u0645\u0629\",\r\n tagRealEstate: \"\u0639\u0642\u0627\u0631\u0627\u062a \u0648\u0623\u0645\u0644\u0627\u0643\",\r\n tagCorp: \"\u0634\u0631\u0643\u0627\u062a \u0648\u0645\u0624\u0633\u0633\u0627\u062a\",\r\n tagNews: \"\u0625\u0639\u0644\u0627\u0645 \u0648\u0635\u062d\u0627\u0641\u0629\",\r\n tagEdu: \"\u062a\u0639\u0644\u064a\u0645 \u0648\u062a\u062f\u0631\u064a\u0628\",\r\n tagAcademy: \"\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a \u0643\u0628\u0631\u0649\",\r\n tagTourism: \"\u0633\u064a\u0627\u062d\u0629 \u0648\u0633\u0641\u0631\u064a\u0627\u062a\",\r\n tagMedical: \"\u0635\u062d\u0629 \u0648\u0637\u0628\",\r\n tagPersonal: \"\u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0648\u0645\u062f\u0648\u0646\u0627\u062a\",\r\n labelSpecs: \"\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:\",\r\n btnSelectThis: \"\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628\",\r\n calcTag: \"\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062a\u0642\u062f\u064a\u0631\",\r\n calcTitle: \"\u062d\u062f\u062f \u062e\u0635\u0627\u0626\u0635 \u0645\u0648\u0642\u0639\u0643 \u0628\u062f\u0642\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u062a\u0642\u062f\u064a\u0631 \u0641\u0648\u0631\u064a\",\r\n calcDesc: \"\u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629 \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0631\u063a\u0628 \u0628\u0636\u0645\u0647\u0627 \u0644\u0645\u0648\u0642\u0639\u0643\u060c \u0644\u064a\u062a\u0645 \u0627\u062d\u062a\u0633\u0627\u0628 \u062e\u0637\u0629 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0648\u062f\u0645\u062c\u0647\u0627 \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064a \u0637\u0644\u0628\u0643.\",\r\n featPayment: \"\u0631\u0628\u0637 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0630\u0647\u0628\u064a\u0629 \u0648 CIB\",\r\n featShipping: \"\u062a\u0643\u0627\u0645\u0644 \u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0634\u062d\u0646 \u0644\u0644\u0640 58 \u0648\u0644\u0627\u064a\u0629\",\r\n featMultiLang: \"\u062f\u0639\u0645 \u0644\u063a\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629 (\u0639\u0631\u0628\u064a\/\u0641\u0631\u0646\u0633\u064a\/\u0625\u0646\u062c\u0644\u064a\u0632\u064a)\",\r\n calcReadyPrompt: \"\u062a\u0645 \u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a! \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0644\u0625\u0631\u0633\u0627\u0644 \u062a\u0641\u0627\u0635\u064a\u0644 \u0645\u0634\u0631\u0648\u0639\u0643 \u0623\u062f\u0646\u0627\u0647.\",\r\n badgeOrder: \"\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629 \u0628\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629\",\r\n titleOrder: \"\u0646\u0645\u0648\u0630\u062c \u062d\u062c\u0632 \u0648\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639\",\r\n subOrder: \"\u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0623\u0648 \u062f\u0639\u0647\u0645\u0627 \u0645\u062d\u062f\u062f\u064a\u0646 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u062e\u062a\u064a\u0627\u0631\u0643 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0644\u0648\u062c \u0623\u0639\u0644\u0627\u0647\u060c \u062b\u0645 \u0627\u062e\u062a\u0631 \u0648\u0633\u064a\u0644\u0629 \u0627\u0644\u0625\u0631\u0633\u0627\u0644.\",\r\n formName: \"\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644\",\r\n formPhone: \"\u0627\u0644\u0647\u0627\u062a\u0641 \/ \u0648\u0627\u062a\u0633\u0627\u0628\",\r\n formEmail: \"\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\",\r\n formCity: \"\u0627\u0644\u0648\u0644\u0627\u064a\u0629 \/ \u0627\u0644\u0645\u062f\u064a\u0646\u0629\",\r\n branchBoxTitle: \"\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629\",\r\n formBranchLabel: \"\u0627\u0644\u0641\u0631\u0639 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 *\",\r\n formSpecLabel: \"\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635 *\",\r\n formNotes: \"\u062a\u0641\u0627\u0635\u064a\u0644 \u0625\u0636\u0627\u0641\u064a\u0629 \u0639\u0646 \u0646\u0634\u0627\u0637\u0643 \u0623\u0648 \u0623\u0641\u0643\u0627\u0631\u0643\",\r\n btnSendEmail: \"\u0625\u0631\u0633\u0627\u0644 \u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0645\u0646\u0635\u0629\",\r\n btnSendWhatsApp: \"\u0625\u0631\u0633\u0627\u0644 \u0648\u062a\u0648\u0627\u0635\u0644 \u0645\u0628\u0627\u0634\u0631 \u0639\u0628\u0631 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628\",\r\n footerWebDesc: \"\u0642\u0633\u0645 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 - \u0645\u0646\u0635\u0629 BaderInfo. \u062d\u0644\u0648\u0644 \u0628\u0631\u0645\u062c\u064a\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u062a\u0648\u0627\u0643\u0628 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.\",\r\n footerQuickLinks: \"\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629\",\r\n navHome: \"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\",\r\n navCatalog: \"\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0641\u0631\u0648\u0639\",\r\n navOrder: \"\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629\",\r\n navDirectWhatsApp: \"\u0645\u062d\u0627\u062f\u062b\u0629 \u0648\u0627\u062a\u0633\u0627\u0628 \u0645\u0628\u0627\u0634\u0631\u0629\",\r\n footerContactHeading: \"\u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0645\u0628\u0627\u0634\u0631\",\r\n footerLocation: \"\u0627\u0644\u062c\u0632\u0627\u0626\u0631\u060c \u0628\u0627\u062a\u0646\u0629 \/ \u0643\u0627\u0645\u0644 \u0627\u0644\u062a\u0631\u0627\u0628 \u0627\u0644\u0648\u0637\u0646\u064a\"\r\n },\r\n en: {\r\n badgeServiceHead: \"Web Design & Development Division\",\r\n btnBackHome: \"Home\",\r\n quickChat: \"Direct Consultation\",\r\n heroBadgeWeb: \"Service 01 | Web Design & E-Commerce Engineering\",\r\n heroWebTitle: \"Intelligent, Ultra-Fast & High-Converting Web Platforms\",\r\n heroWebDesc: \"Explore 10 specialized categories covering multi-size online stores, corporate portals, real estate, academies, clinics, and digital media with local payment integrations and SEO optimization.\",\r\n btnBrowseBranches: \"Explore Branches & Specs\",\r\n btnDirectOrder: \"Direct Price Quote\",\r\n filterAll: \"All (10 Branches)\",\r\n filterEcom: \"E-Commerce\",\r\n filterBiz: \"Corporate & Real Estate\",\r\n filterEdu: \"Education & Academies\",\r\n filterSpec: \"Medical, Tourism & Media\",\r\n catalogTitle: \"Branches & Specifications Catalog\",\r\n catalogSubtitle: \"Select the ideal branch and specifications for your venture, then click 'Select This Option' to automatically populate your order details.\",\r\n tagStore: \"E-Commerce\",\r\n tagWeb: \"General Web\",\r\n tagRealEstate: \"Real Estate\",\r\n tagCorp: \"Corporate\",\r\n tagNews: \"Media & Press\",\r\n tagEdu: \"Education\",\r\n tagAcademy: \"Academies\",\r\n tagTourism: \"Travel & Tourism\",\r\n tagMedical: \"Healthcare\",\r\n tagPersonal: \"Profile & Blogs\",\r\n labelSpecs: \"Specifications & Properties:\",\r\n btnSelectThis: \"Select This Option & Order\",\r\n calcTag: \"Specifications Calculator\",\r\n calcTitle: \"Configure Your Project Features for an Instant Plan\",\r\n calcDesc: \"Select extra architectural features to merge them directly into your consultation and delivery scope.\",\r\n featPayment: \"Edahabia & CIB Payment Gateway\",\r\n featShipping: \"58 States Automated Courier Integration\",\r\n featMultiLang: \"Multi-Language Support (AR \/ FR \/ EN)\",\r\n calcReadyPrompt: \"Specifications ready! Proceed below to submit your project requirements.\",\r\n badgeOrder: \"Order Service with Chosen Specs\",\r\n titleOrder: \"Web Development Booking & Inquiry Form\",\r\n subOrder: \"Pick your branch and specifications or let them be automatically configured from the catalog above.\",\r\n formName: \"Full Name\",\r\n formPhone: \"Phone \/ WhatsApp\",\r\n formEmail: \"Email Address\",\r\n formCity: \"State \/ City\",\r\n branchBoxTitle: \"Branch & Specifications Confirmation\",\r\n formBranchLabel: \"Required Branch *\",\r\n formSpecLabel: \"Specifications & Properties *\",\r\n formNotes: \"Additional Project Details\",\r\n btnSendEmail: \"Send to Platform Email\",\r\n btnSendWhatsApp: \"Direct Send via WhatsApp\",\r\n footerWebDesc: \"Web Design & E-Commerce Engineering Division - BaderInfo Platform. Modern high-performance web systems.\",\r\n footerQuickLinks: \"Quick Links\",\r\n navHome: \"Home\",\r\n navCatalog: \"Branches Catalog\",\r\n navOrder: \"Order Service\",\r\n navDirectWhatsApp: \"Direct WhatsApp Chat\",\r\n footerContactHeading: \"Direct Contact\",\r\n footerLocation: \"Algeria, Batna \/ Nationwide & Global\"\r\n }\r\n };\r\n\r\n function toggleLanguage() {\r\n currentLanguage = currentLanguage === 'ar' ? 'en' : 'ar';\r\n applyLanguage(currentLanguage);\r\n }\r\n\r\n function applyLanguage(lang) {\r\n const html = document.documentElement;\r\n const langLabel = document.getElementById('current-lang-label');\r\n \r\n if (lang === 'en') {\r\n html.setAttribute('dir', 'ltr');\r\n html.setAttribute('lang', 'en');\r\n langLabel.innerText = '\u0627\u0644\u0639\u0631\u0628\u064a\u0629';\r\n document.body.style.fontFamily = \"'Outfit', 'Cairo', sans-serif\";\r\n } else {\r\n html.setAttribute('dir', 'rtl');\r\n html.setAttribute('lang', 'ar');\r\n langLabel.innerText = 'English';\r\n document.body.style.fontFamily = \"'Tajawal', 'Cairo', sans-serif\";\r\n }\r\n\r\n document.querySelectorAll('[data-i18n]').forEach(el => {\r\n const key = el.getAttribute('data-i18n');\r\n if (translations[lang] && translations[lang][key]) {\r\n el.innerText = translations[lang][key];\r\n }\r\n });\r\n\r\n refreshBranchSelectDropdown();\r\n showToast(lang === 'en' ? 'Switched to English' : '\u062a\u0645 \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629');\r\n }\r\n\r\n \/* ========================================================\r\n 3. DARK \/ LIGHT MODE\r\n ======================================================== *\/\r\n function toggleDarkMode() {\r\n const html = document.documentElement;\r\n const body = document.body;\r\n const themeIcon = document.getElementById('theme-icon');\r\n\r\n if (body.classList.contains('dark')) {\r\n body.classList.remove('dark');\r\n html.classList.remove('dark');\r\n themeIcon.className = 'fa-solid fa-moon text-sm';\r\n localStorage.setItem('bader_theme', 'light');\r\n showToast(currentLanguage === 'en' ? 'Light mode enabled' : '\u062a\u0645 \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u0641\u0627\u062a\u062d');\r\n } else {\r\n body.classList.add('dark');\r\n html.classList.add('dark');\r\n themeIcon.className = 'fa-solid fa-sun text-sm';\r\n localStorage.setItem('bader_theme', 'dark');\r\n showToast(currentLanguage === 'en' ? 'Dark mode enabled' : '\u062a\u0645 \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u062f\u0627\u0643\u0646');\r\n }\r\n }\r\n\r\n window.addEventListener('DOMContentLoaded', () => {\r\n const savedTheme = localStorage.getItem('bader_theme');\r\n const themeIcon = document.getElementById('theme-icon');\r\n if (savedTheme === 'light') {\r\n document.body.classList.remove('dark');\r\n document.documentElement.classList.remove('dark');\r\n if (themeIcon) themeIcon.className = 'fa-solid fa-moon text-sm';\r\n }\r\n refreshBranchSelectDropdown();\r\n });\r\n\r\n \/* ========================================================\r\n 4. FILTER BRANCHES CATALOG\r\n ======================================================== *\/\r\n function filterCards(category) {\r\n document.querySelectorAll('.filter-btn').forEach(btn => {\r\n btn.classList.remove('bg-bader-cyan', 'text-bader-navyDeep', 'active');\r\n btn.classList.add('dark:bg-bader-navyCard', 'bg-white', 'dark:text-slate-300', 'text-slate-700');\r\n });\r\n event.target.classList.remove('dark:bg-bader-navyCard', 'bg-white', 'dark:text-slate-300', 'text-slate-700');\r\n event.target.classList.add('bg-bader-cyan', 'text-bader-navyDeep', 'active');\r\n\r\n const cards = document.querySelectorAll('.branch-card');\r\n cards.forEach(card => {\r\n if (category === 'all' || card.getAttribute('data-category') === category) {\r\n card.style.display = 'flex';\r\n } else {\r\n card.style.display = 'none';\r\n }\r\n });\r\n }\r\n\r\n \/* ========================================================\r\n 5. DROPDOWN SELECTION & CARD LINKING\r\n ======================================================== *\/\r\n function refreshBranchSelectDropdown() {\r\n const branchSel = document.getElementById('order-branch');\r\n const currentVal = branchSel.value || 'store';\r\n const isEn = currentLanguage === 'en';\r\n\r\n branchSel.innerHTML = '';\r\n for (const [key, val] of Object.entries(branchesData)) {\r\n const opt = document.createElement('option');\r\n opt.value = key;\r\n opt.textContent = isEn ? val.titleEn : val.titleAr;\r\n if (key === currentVal) opt.selected = true;\r\n branchSel.appendChild(opt);\r\n }\r\n onBranchChange();\r\n }\r\n\r\n function onBranchChange() {\r\n const branchKey = document.getElementById('order-branch').value;\r\n const specSel = document.getElementById('order-spec');\r\n const isEn = currentLanguage === 'en';\r\n\r\n specSel.innerHTML = '';\r\n if (!branchesData[branchKey]) return;\r\n\r\n const specs = isEn ? branchesData[branchKey].specsEn : branchesData[branchKey].specsAr;\r\n specs.forEach(spec => {\r\n const opt = document.createElement('option');\r\n opt.value = spec;\r\n opt.textContent = spec;\r\n specSel.appendChild(opt);\r\n });\r\n }\r\n\r\n function autoFillSpec(branchKey, specName) {\r\n const branchSel = document.getElementById('order-branch');\r\n branchSel.value = branchKey;\r\n onBranchChange();\r\n\r\n const specSel = document.getElementById('order-spec');\r\n for (let i = 0; i < specSel.options.length; i++) {\r\n if (specSel.options[i].value === specName) {\r\n specSel.selectedIndex = i;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n function selectBranchFromCard(branchKey) {\r\n \/\/ Find selected radio inside this card\r\n const radio = document.querySelector(`input[name=\"spec_${branchKey}\"]:checked`);\r\n const specVal = radio ? radio.value : '';\r\n \r\n const branchSel = document.getElementById('order-branch');\r\n branchSel.value = branchKey;\r\n onBranchChange();\r\n\r\n if (specVal) {\r\n const specSel = document.getElementById('order-spec');\r\n for (let i = 0; i < specSel.options.length; i++) {\r\n if (specSel.options[i].value.includes(specVal) || specVal.includes(specSel.options[i].value)) {\r\n specSel.selectedIndex = i;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n const orderSec = document.getElementById('order-section');\r\n orderSec.scrollIntoView({ behavior: 'smooth' });\r\n showToast(currentLanguage === 'en' ? 'Branch & specifications applied to form' : '\u062a\u0645 \u062a\u062b\u0628\u064a\u062a \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0641\u064a \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u0628\u0646\u062c\u0627\u062d');\r\n }\r\n\r\n function updateCalcSummary() {\r\n const p = document.getElementById('feature-payment').checked;\r\n const s = document.getElementById('feature-shipping').checked;\r\n const m = document.getElementById('feature-multilang').checked;\r\n const box = document.getElementById('calc-result');\r\n\r\n let extras = [];\r\n if (p) extras.push(currentLanguage === 'en' ? 'Payment Gateway' : '\u062f\u0641\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a');\r\n if (s) extras.push(currentLanguage === 'en' ? 'Shipping Integration' : '\u0631\u0628\u0637 \u0634\u062d\u0646 58 \u0648\u0644\u0627\u064a\u0629');\r\n if (m) extras.push(currentLanguage === 'en' ? 'Multi-Language' : '\u0645\u062a\u0639\u062f\u062f \u0627\u0644\u0644\u063a\u0627\u062a');\r\n\r\n if (extras.length > 0) {\r\n box.innerHTML = (currentLanguage === 'en' ? 'Included Add-ons: ' : '\u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0645\u0636\u0627\u0641\u0629: ') + extras.join(' + ');\r\n } else {\r\n box.innerHTML = currentLanguage === 'en' \r\n ? 'Specifications ready! Proceed below to submit your project requirements.' \r\n : '\u062a\u0645 \u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a! \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0644\u0625\u0631\u0633\u0627\u0644 \u062a\u0641\u0627\u0635\u064a\u0644 \u0645\u0634\u0631\u0648\u0639\u0643 \u0623\u062f\u0646\u0627\u0647.';\r\n }\r\n }\r\n\r\n \/* ========================================================\r\n 6. FORM SUBMISSION\r\n ======================================================== *\/\r\n function gatherOrderData() {\r\n const name = document.getElementById('order-name').value.trim();\r\n const phone = document.getElementById('order-phone').value.trim();\r\n const email = document.getElementById('order-email').value.trim();\r\n const city = document.getElementById('order-city').value.trim();\r\n \r\n const bSel = document.getElementById('order-branch');\r\n const sSel = document.getElementById('order-spec');\r\n const branchText = bSel.options[bSel.selectedIndex].text;\r\n const specText = sSel.options[sSel.selectedIndex] ? sSel.options[sSel.selectedIndex].text : '';\r\n\r\n const p = document.getElementById('feature-payment').checked;\r\n const s = document.getElementById('feature-shipping').checked;\r\n const m = document.getElementById('feature-multilang').checked;\r\n let extras = [];\r\n if (p) extras.push(\"\u0628\u0648\u0627\u0628\u0629 \u062f\u0641\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\");\r\n if (s) extras.push(\"\u062a\u0643\u0627\u0645\u0644 \u0634\u062d\u0646 58 \u0648\u0644\u0627\u064a\u0629\");\r\n if (m) extras.push(\"\u0645\u062a\u0639\u062f\u062f \u0627\u0644\u0644\u063a\u0627\u062a\");\r\n\r\n const notes = document.getElementById('order-notes').value.trim() || '\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629';\r\n\r\n if (!name || !phone || !email || !city) {\r\n showToast(currentLanguage === 'en' ? 'Please fill in all required fields' : '\u064a\u0631\u062c\u0649 \u0645\u0644\u0621 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629', 'warning');\r\n return null;\r\n }\r\n\r\n return {\r\n name,\r\n phone,\r\n email,\r\n city,\r\n service: `\u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 > ${branchText} (${specText})`,\r\n extras: extras.length > 0 ? extras.join(', ') : '\u0628\u062f\u0648\u0646 \u0625\u0636\u0627\u0641\u0627\u062a \u062e\u0627\u0635\u0629',\r\n notes\r\n };\r\n }\r\n\r\n function submitViaWhatsApp() {\r\n const data = gatherOrderData();\r\n if (!data) return;\r\n\r\n const waMsg = `*\u0637\u0644\u0628 \u062e\u062f\u0645\u0629 \u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0627\u0642\u0639 \u0648\u0645\u062a\u0627\u062c\u0631 \u0645\u0646 BaderInfo:*%0A` +\r\n `\ud83d\udc64 *\u0627\u0644\u0627\u0633\u0645:* ${encodeURIComponent(data.name)}%0A` +\r\n `\ud83d\udcde *\u0627\u0644\u0647\u0627\u062a\u0641:* ${encodeURIComponent(data.phone)}%0A` +\r\n `\u2709\ufe0f *\u0627\u0644\u0628\u0631\u064a\u062f:* ${encodeURIComponent(data.email)}%0A` +\r\n `\ud83d\udccd *\u0627\u0644\u0648\u0644\u0627\u064a\u0629:* ${encodeURIComponent(data.city)}%0A` +\r\n `\ud83d\udee0\ufe0f *\u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629:* ${encodeURIComponent(data.service)}%0A` +\r\n `\u26a1 *\u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629:* ${encodeURIComponent(data.extras)}%0A` +\r\n `\ud83d\udcdd *\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a:* ${encodeURIComponent(data.notes)}`;\r\n\r\n showToast(currentLanguage === 'en' ? 'Opening WhatsApp...' : '\u062c\u0627\u0631\u064a \u0641\u062a\u062d \u0645\u062d\u0627\u062f\u062b\u0629 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628 \u0644\u0625\u0631\u0633\u0627\u0644 \u0628\u064a\u0627\u0646\u0627\u062a \u0637\u0644\u0628\u0643...');\r\n setTimeout(() => {\r\n window.open(`https:\/\/wa.me\/213000000000?text=${waMsg}`, '_blank');\r\n }, 500);\r\n }\r\n\r\n function submitViaEmail() {\r\n const data = gatherOrderData();\r\n if (!data) return;\r\n\r\n const subject = encodeURIComponent(`\u0637\u0644\u0628 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0642\u0639: ${data.service} - ${data.name}`);\r\n const body = encodeURIComponent(\r\n `\u062a\u0641\u0627\u0635\u064a\u0644 \u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629 \u0645\u0646 \u0635\u0641\u062d\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 (BaderInfo):\\n\\n` +\r\n `\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644: ${data.name}\\n` +\r\n `\u0627\u0644\u0647\u0627\u062a\u0641: ${data.phone}\\n` +\r\n `\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a: ${data.email}\\n` +\r\n `\u0627\u0644\u0648\u0644\u0627\u064a\u0629 \/ \u0627\u0644\u0645\u062f\u064a\u0646\u0629: ${data.city}\\n` +\r\n `\u0627\u0644\u062e\u062f\u0645\u0629 \u0648\u0627\u0644\u0641\u0631\u0639: ${data.service}\\n` +\r\n `\u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629: ${data.extras}\\n\\n` +\r\n `\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629:\\n${data.notes}\\n`\r\n );\r\n\r\n showToast(currentLanguage === 'en' ? 'Redirecting to email...' : '\u062c\u0627\u0631\u064a \u062a\u0648\u062c\u064a\u0647\u0643 \u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a...');\r\n setTimeout(() => {\r\n window.location.href = `mailto:contact@baderinfo.com?subject=${subject}&body=${body}`;\r\n }, 500);\r\n }\r\n\r\n function showToast(message, type = 'success') {\r\n const toast = document.getElementById('app-toast');\r\n const text = document.getElementById('toast-msg');\r\n const icon = document.getElementById('toast-icon');\r\n\r\n text.innerText = message;\r\n if (type === 'warning') {\r\n icon.className = 'fa-solid fa-triangle-exclamation text-amber-400 text-base';\r\n } else {\r\n icon.className = 'fa-solid fa-circle-check text-bader-cyan text-base';\r\n }\r\n\r\n toast.classList.remove('translate-y-28', 'opacity-0');\r\n setTimeout(() => {\r\n toast.classList.add('translate-y-28', 'opacity-0');\r\n }, 3500);\r\n }\r\n\r\n \/* Particles Effect on Hero *\/\r\n const canvas = document.getElementById('tech-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let particlesArray = [];\r\n\r\n function resizeCanvas() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n }\r\n window.addEventListener('resize', resizeCanvas);\r\n resizeCanvas();\r\n\r\n class Particle {\r\n constructor() {\r\n this.x = Math.random() * canvas.width;\r\n this.y = Math.random() * canvas.height;\r\n this.size = Math.random() * 2 + 1;\r\n this.speedX = (Math.random() - 0.5) * 0.7;\r\n this.speedY = (Math.random() - 0.5) * 0.7;\r\n }\r\n update() {\r\n this.x += this.speedX;\r\n this.y += this.speedY;\r\n if (this.x > canvas.width || this.x < 0) this.speedX = -this.speedX;\r\n if (this.y > canvas.height || this.y < 0) this.speedY = -this.speedY;\r\n }\r\n draw() {\r\n const isDark = document.body.classList.contains('dark');\r\n ctx.fillStyle = isDark ? 'rgba(0, 194, 255, 0.75)' : 'rgba(0, 140, 200, 0.5)';\r\n ctx.beginPath();\r\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n }\r\n\r\n function initParticles() {\r\n particlesArray = [];\r\n const numberOfParticles = Math.min(Math.floor(window.innerWidth \/ 20), 50);\r\n for (let i = 0; i < numberOfParticles; i++) {\r\n particlesArray.push(new Particle());\r\n }\r\n }\r\n initParticles();\r\n\r\n function animateParticles() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n particlesArray.forEach(p => {\r\n p.update();\r\n p.draw();\r\n });\r\n requestAnimationFrame(animateParticles);\r\n }\r\n animateParticles();\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BaderInfo | \u062e\u062f\u0645\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"bsp-landing","meta":{"_templately_pack_id":"","_templately_imported_at":"","_templately_source":"","_templately_import_session_id":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2516","page","type-page","status-publish","hentry"],"lang":"en","translations":{"en":2516},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/pages\/2516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/baderinfo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2516"}],"version-history":[{"count":4,"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/pages\/2516\/revisions"}],"predecessor-version":[{"id":2520,"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/pages\/2516\/revisions\/2520"}],"wp:attachment":[{"href":"https:\/\/baderinfo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2516"}],"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 BaderInfo | \u062e\u062f\u0645\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/title>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@400;600;700;800;900&family=El+Messiri:wght@600;700;800&family=Outfit:wght@400;600;800;900&family=Tajawal:wght@500;700;800;900&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/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 darkMode: 'class',\r\n theme: {\r\n extend: {\r\n colors: {\r\n bader: {\r\n cyan: '#00C2FF',\r\n cyanGlow: '#00E5FF',\r\n cyanDark: '#0088CC',\r\n navyDeep: '#050B14',\r\n navyCard: '#0A1526',\r\n navyAccent: '#13233D',\r\n lightBg: '#F8FAFC',\r\n lightCard: '#FFFFFF',\r\n lightBorder: '#E2E8F0'\r\n }\r\n },\r\n fontFamily: {\r\n cairo: ['Cairo', 'sans-serif'],\r\n tajawal: ['Tajawal', 'sans-serif'],\r\n messiri: ['El Messiri', 'serif'],\r\n outfit: ['Outfit', 'sans-serif']\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root {\r\n --primary-cyan: #00C2FF;\r\n --glow-cyan: #00E5FF;\r\n }\r\n\r\n body {\r\n font-family: 'Tajawal', sans-serif;\r\n overflow-x: hidden;\r\n perspective: 1200px;\r\n transition: background-color 0.4s ease, color 0.4s ease;\r\n }\r\n\r\n body.dark {\r\n background-color: #050B14;\r\n color: #E2E8F0;\r\n }\r\n body:not(.dark) {\r\n background-color: #F8FAFC;\r\n color: #0F172A;\r\n }\r\n\r\n .title-3d {\r\n font-family: 'El Messiri', 'Tajawal', serif;\r\n font-weight: 800;\r\n background: linear-gradient(180deg, #FFFFFF 10%, #7DD3FC 60%, #00C2FF 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n text-shadow: \r\n 0 1px 0 rgba(0, 194, 255, 0.4),\r\n 0 2px 0 rgba(0, 194, 255, 0.3),\r\n 0 4px 20px rgba(0, 229, 255, 0.5),\r\n 0 8px 35px rgba(0, 194, 255, 0.35);\r\n letter-spacing: -0.02em;\r\n }\r\n body:not(.dark) .title-3d {\r\n background: linear-gradient(180deg, #0A1526 15%, #0077B6 60%, #00C2FF 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n text-shadow: 0 4px 20px rgba(0, 194, 255, 0.25);\r\n }\r\n\r\n .glass-3d-card {\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n transform-style: preserve-3d;\r\n transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease, background-color 0.4s ease;\r\n will-change: transform;\r\n }\r\n\r\n body.dark .glass-3d-card {\r\n background: linear-gradient(135deg, rgba(19, 35, 61, 0.45) 0%, rgba(10, 21, 38, 0.7) 100%);\r\n border: 1px solid rgba(0, 194, 255, 0.2);\r\n box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.08);\r\n }\r\n body.dark .glass-3d-card:hover {\r\n border-color: rgba(0, 229, 255, 0.65);\r\n box-shadow: 0 20px 45px -10px rgba(0, 194, 255, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n body:not(.dark) .glass-3d-card {\r\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 249, 255, 0.8) 100%);\r\n border: 1px solid rgba(0, 194, 255, 0.25);\r\n box-shadow: 0 10px 30px -10px rgba(0, 194, 255, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.8);\r\n }\r\n body:not(.dark) .glass-3d-card:hover {\r\n border-color: rgba(0, 194, 255, 0.75);\r\n box-shadow: 0 20px 40px -10px rgba(0, 194, 255, 0.25);\r\n }\r\n\r\n .btn-3d-cyan {\r\n background: linear-gradient(135deg, #00E5FF 0%, #00C2FF 50%, #0088CC 100%);\r\n border: 1px solid rgba(255, 255, 255, 0.35);\r\n box-shadow: 0 8px 24px -4px rgba(0, 194, 255, 0.65), inset 0 2px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.25);\r\n transform: translateZ(20px);\r\n transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n color: #FFFFFF !important;\r\n }\r\n .btn-3d-cyan:hover {\r\n transform: translateY(-3px) scale(1.02) translateZ(30px);\r\n box-shadow: 0 16px 32px -4px rgba(0, 229, 255, 0.85), inset 0 2px 4px rgba(255, 255, 255, 0.6);\r\n }\r\n\r\n #tech-canvas {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 0;\r\n pointer-events: none;\r\n }\r\n\r\n select option {\r\n background-color: #0A1526;\r\n color: #E2E8F0;\r\n }\r\n body:not(.dark) select option {\r\n background-color: #FFFFFF;\r\n color: #0F172A;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased selection:bg-bader-cyan selection:text-white\">\r\n\r\n \r\n <header class=\"fixed top-0 inset-x-0 z-50 transition-all duration-300 backdrop-blur-2xl border-b dark:border-bader-cyan\/15 border-slate-200\/80 dark:bg-bader-navyDeep\/85 bg-white\/85\">\r\n <div class=\"max-w-7xl 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 \r\n <div class=\"flex items-center gap-4\">\r\n <a href=\"..\/\" class=\"group flex items-center transition duration-300\">\r\n <div class=\"relative py-1 flex items-center\">\r\n <img decoding=\"async\" \r\n src=\"..\/aderInfo (3).png\" \r\n alt=\"BaderInfo Logo\" \r\n class=\"h-10 sm:h-12 w-auto object-contain transition duration-300 filter drop-shadow-[0_2px_12px_rgba(0,194,255,0.45)] group-hover:scale-105\"\r\n onerror=\"this.onerror=null; this.src='data:image\/svg+xml;utf8,<svg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 320 80%22><text x=%2210%22 y=%2255%22 font-family=%22sans-serif%22 font-weight=%22900%22 font-size=%2244%22 fill=%22%2300C2FF%22>BaderInfo<\/text><\/svg>';\"\r\n \/>\r\n <\/div>\r\n <\/a>\r\n <span class=\"hidden sm:inline-block h-6 w-px dark:bg-slate-700 bg-slate-300\"><\/span>\r\n <span class=\"hidden sm:inline-block text-xs font-bold text-bader-cyan font-mono\" data-i18n=\"badgeServiceHead\">\u0642\u0633\u0645 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"flex items-center gap-2.5 sm:gap-3.5\">\r\n \r\n \r\n <a \r\n href=\"..\/\" \r\n title=\"\u0627\u0644\u0631\u062c\u0648\u0639 \u0644\u0644\u0631\u0626\u064a\u0633\u064a\u0629\" \r\n class=\"flex items-center gap-2 px-3 py-2 sm:px-4 sm:py-2.5 rounded-2xl border dark:border-bader-cyan\/25 border-slate-300 dark:bg-bader-navyCard\/70 bg-slate-100 dark:text-bader-cyan text-slate-800 text-xs font-bold hover:border-bader-cyan hover:scale-105 transition shadow-sm\"\r\n >\r\n <i class=\"fa-solid fa-house\"><\/i>\r\n <span data-i18n=\"btnBackHome\">\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/span>\r\n <\/a>\r\n\r\n \r\n <button \r\n id=\"theme-toggle-btn\" \r\n onclick=\"toggleDarkMode()\" \r\n title=\"\u062a\u0628\u062f\u064a\u0644 \u0627\u0644\u0648\u0636\u0639\" \r\n class=\"w-10 h-10 sm:w-11 sm:h-11 rounded-2xl flex items-center justify-center border dark:border-bader-cyan\/25 border-slate-300 dark:bg-bader-navyCard\/70 bg-slate-100 dark:text-amber-400 text-blue-600 hover:scale-105 transition shadow-sm\"\r\n >\r\n <i id=\"theme-icon\" class=\"fa-solid fa-sun text-sm\"><\/i>\r\n <\/button>\r\n\r\n \r\n <button \r\n id=\"lang-toggle-btn\" \r\n onclick=\"toggleLanguage()\" \r\n title=\"Change Language\" \r\n class=\"flex items-center gap-1.5 px-3 py-2 sm:px-4 sm:py-2.5 rounded-2xl border dark:border-bader-cyan\/35 border-slate-300 dark:bg-bader-navyCard\/70 bg-slate-100 text-xs font-bold dark:text-bader-cyan text-slate-800 transition shadow-sm\"\r\n >\r\n <i class=\"fa-solid fa-globe text-xs\"><\/i>\r\n <span id=\"current-lang-label\">English<\/span>\r\n <\/button>\r\n\r\n \r\n <a \r\n href=\"https:\/\/wa.me\/213000000000?text=\u0645\u0631\u062d\u0628\u0627\u064b%20BaderInfo%20\u0623\u0631\u064a\u062f%20\u0627\u0633\u062a\u0634\u0627\u0631\u0629%20\u062d\u0648\u0644%20\u062a\u0635\u0645\u064a\u0645%20\u0645\u0648\u0642\u0639\" \r\n target=\"_blank\" \r\n class=\"hidden md:inline-flex items-center gap-2 px-4 py-2.5 rounded-2xl bg-emerald-500\/10 border border-emerald-500\/40 text-emerald-500 hover:bg-emerald-500 hover:text-white text-xs font-bold transition shadow-sm\"\r\n >\r\n <i class=\"fa-brands fa-whatsapp text-sm\"><\/i>\r\n <span data-i18n=\"quickChat\">\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0641\u0648\u0631\u064a\u0629<\/span>\r\n <\/a>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <section class=\"relative min-h-[70vh] flex items-center justify-center pt-32 pb-16 overflow-hidden\">\r\n <canvas id=\"tech-canvas\"><\/canvas>\r\n\r\n <div class=\"relative z-10 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\r\n \r\n <div class=\"inline-flex items-center gap-2 px-5 py-2 rounded-full dark:bg-bader-navyCard\/80 bg-white\/80 border dark:border-bader-cyan\/30 border-cyan-500\/30 text-bader-cyan text-xs sm:text-sm font-bold shadow-lg shadow-bader-cyan\/10 mb-6 backdrop-blur-md\">\r\n <i class=\"fa-solid fa-laptop-code text-bader-cyanGlow\"><\/i>\r\n <span data-i18n=\"heroBadgeWeb\">\u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 | \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/span>\r\n <\/div>\r\n\r\n <h1 class=\"title-3d text-3xl sm:text-5xl lg:text-6xl font-extrabold max-w-4xl mx-auto leading-tight mb-6\">\r\n <span data-i18n=\"heroWebTitle\">\u062d\u0644\u0648\u0644 \u0648\u064a\u0628 \u0630\u0643\u064a\u0629\u060c \u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u0633\u0631\u0639\u0629 \u0648\u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0648\u064a\u0644<\/span>\r\n <\/h1>\r\n\r\n <p class=\"dark:text-slate-300 text-slate-600 text-sm sm:text-lg max-w-3xl mx-auto leading-relaxed mb-8\" data-i18n=\"heroWebDesc\">\r\n \u0646\u0642\u062f\u0645 \u0644\u0643 10 \u062a\u062e\u0635\u0635\u0627\u062a \u062f\u0642\u064a\u0642\u0629 \u062a\u0634\u0645\u0644 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0628\u0645\u062e\u062a\u0644\u0641 \u0623\u062d\u062c\u0627\u0645\u0647\u0627\u060c \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0634\u0631\u0643\u0627\u062a\u060c \u0627\u0644\u0639\u0642\u0627\u0631\u0627\u062a\u060c \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a\u060c \u0627\u0644\u0645\u062c\u0644\u0627\u062a\u060c \u0648\u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0637\u0628\u064a\u0629 \u0645\u0639 \u0631\u0628\u0637 \u0628\u0648\u0627\u0628\u0627\u062a \u0627\u0644\u062f\u0641\u0639 \u0627\u0644\u062c\u0632\u0627\u0626\u0631\u064a\u0629 \u0648\u062a\u0648\u0627\u0641\u0642 \u0643\u0627\u0645\u0644 \u0645\u0639 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b.\r\n <\/p>\r\n\r\n <div class=\"flex flex-wrap items-center justify-center gap-4\">\r\n <a href=\"#branches-catalog\" class=\"btn-3d-cyan px-7 py-3.5 rounded-2xl text-white font-extrabold text-xs sm:text-sm flex items-center gap-2\">\r\n <i class=\"fa-solid fa-layer-group\"><\/i>\r\n <span data-i18n=\"btnBrowseBranches\">\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0643\u0627\u0641\u0629 \u0627\u0644\u0641\u0631\u0648\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a<\/span>\r\n <\/a>\r\n <a href=\"#order-section\" class=\"px-7 py-3.5 rounded-2xl dark:bg-bader-navyCard\/80 bg-white hover:bg-slate-100 dark:hover:bg-bader-navyCard dark:text-white text-slate-800 border dark:border-bader-cyan\/30 border-slate-300 font-bold text-xs sm:text-sm backdrop-blur-md transition flex items-center gap-2\">\r\n <i class=\"fa-solid fa-paper-plane text-bader-cyan\"><\/i>\r\n <span data-i18n=\"btnDirectOrder\">\u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0645\u0628\u0627\u0634\u0631<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-6 border-y dark:border-bader-cyan\/15 border-slate-200 dark:bg-bader-navyDeep\/50 bg-slate-100\/50\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 scrollbar-none text-xs font-bold\">\r\n <button onclick=\"filterCards('all')\" class=\"filter-btn active px-4 py-2 rounded-xl bg-bader-cyan text-bader-navyDeep transition whitespace-nowrap\" data-i18n=\"filterAll\">\u0627\u0644\u0643\u0644 (10 \u0641\u0631\u0648\u0639)<\/button>\r\n <button onclick=\"filterCards('ecommerce')\" class=\"filter-btn px-4 py-2 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 dark:text-slate-300 text-slate-700 hover:border-bader-cyan transition whitespace-nowrap\" data-i18n=\"filterEcom\">\u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/button>\r\n <button onclick=\"filterCards('business')\" class=\"filter-btn px-4 py-2 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 dark:text-slate-300 text-slate-700 hover:border-bader-cyan transition whitespace-nowrap\" data-i18n=\"filterBiz\">\u0634\u0631\u0643\u0627\u062a \u0648\u0639\u0642\u0627\u0631\u0627\u062a<\/button>\r\n <button onclick=\"filterCards('education')\" class=\"filter-btn px-4 py-2 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 dark:text-slate-300 text-slate-700 hover:border-bader-cyan transition whitespace-nowrap\" data-i18n=\"filterEdu\">\u062a\u0639\u0644\u064a\u0645 \u0648\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a<\/button>\r\n <button onclick=\"filterCards('specialized')\" class=\"filter-btn px-4 py-2 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 dark:text-slate-300 text-slate-700 hover:border-bader-cyan transition whitespace-nowrap\" data-i18n=\"filterSpec\">\u0637\u0628\u064a\u060c \u0633\u064a\u0627\u062d\u064a \u0648\u0625\u062e\u0628\u0627\u0631\u064a<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"branches-catalog\" class=\"py-20 relative\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n <div class=\"text-center max-w-3xl mx-auto mb-14\">\r\n <h2 class=\"text-2xl sm:text-4xl font-black dark:text-white text-slate-900\" data-i18n=\"catalogTitle\">\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0641\u0631\u0648\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635<\/h2>\r\n <p class=\"dark:text-slate-400 text-slate-600 text-xs sm:text-sm mt-3\" data-i18n=\"catalogSubtitle\">\r\n \u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0645\u0634\u0631\u0648\u0639\u0643\u060c \u0648\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \"\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631\" \u0644\u064a\u062a\u0645 \u0645\u0644\u0621 \u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0637\u0644\u0628 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\" id=\"branches-grid\">\r\n \r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"ecommerce\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-cart-shopping\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagStore\">\u062a\u062c\u0627\u0631\u0629 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b1Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u062a\u062c\u0631 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b1Desc\">\r\n \u0645\u0646\u0635\u0627\u062a \u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u0644\u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a\u060c \u0627\u0644\u0637\u0644\u0628\u0627\u062a\u060c \u0627\u0644\u0643\u0648\u0628\u0648\u0646\u0627\u062a\u060c \u0648\u062d\u0633\u0627\u0628 \u0645\u0635\u0627\u0631\u064a\u0641 \u0627\u0644\u0634\u062d\u0646 \u0627\u0644\u062a\u0644\u0642\u0627\u0626\u064a \u0644\u0644\u0648\u0644\u0627\u064a\u0627\u062a \u0627\u0644\u0640 58.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_store\" value=\"\u0645\u062a\u062c\u0631 \u0643\u0628\u064a\u0631\" onchange=\"autoFillSpec('store', '\u0645\u062a\u062c\u0631 \u0643\u0628\u064a\u0631')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b1Spec1\">\u0645\u062a\u062c\u0631 \u0643\u0628\u064a\u0631 (\u0645\u0646\u062a\u062c\u0627\u062a \u063a\u064a\u0631 \u0645\u062d\u062f\u0648\u062f\u0629\u060c \u0641\u0631\u0648\u0639 \u0645\u062a\u0639\u062f\u062f\u0629)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_store\" value=\"\u0645\u062a\u062c\u0631 \u0645\u062a\u0648\u0633\u0637\" checked onchange=\"autoFillSpec('store', '\u0645\u062a\u062c\u0631 \u0645\u062a\u0648\u0633\u0637')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b1Spec2\">\u0645\u062a\u062c\u0631 \u0645\u062a\u0648\u0633\u0637 (\u062d\u062a\u0649 500 \u0645\u0646\u062a\u062c\u060c \u062f\u0641\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_store\" value=\"\u0645\u062a\u062c\u0631 \u0635\u063a\u064a\u0631\" onchange=\"autoFillSpec('store', '\u0645\u062a\u062c\u0631 \u0635\u063a\u064a\u0631')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b1Spec3\">\u0645\u062a\u062c\u0631 \u0635\u063a\u064a\u0631 (\u0645\u0646\u062a\u062c\u0627\u062a \u0645\u062d\u062f\u0648\u062f\u0629\u060c \u0634\u0631\u0627\u0621 \u0641\u0648\u0631\u064a)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('store')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"business\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-cyan-500\/15 text-cyan-400 flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-globe\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-cyan-500\/10 text-cyan-400 border border-cyan-500\/30\" data-i18n=\"tagWeb\">\u0645\u0648\u0627\u0642\u0639 \u0639\u0627\u0645\u0629<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b2Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b2Desc\">\r\n \u062d\u0644\u0648\u0644 \u0648\u064a\u0628 \u0639\u0635\u0631\u064a\u0629 \u062a\u0644\u0628\u064a \u0627\u062d\u062a\u064a\u0627\u062c\u0627\u062a \u0627\u0644\u062d\u0636\u0648\u0631 \u0627\u0644\u0631\u0642\u0645\u064a \u0627\u0644\u0631\u0633\u0645\u064a \u0645\u0639 \u062a\u062c\u0627\u0648\u0628 \u0648\u0633\u0631\u0639\u0629 \u0641\u0627\u0626\u0642\u0629.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_website\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\" checked onchange=\"autoFillSpec('website', '\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b2Spec1\">\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a (\u062a\u0641\u0627\u0639\u0644\u064a \u0648\u0642\u0648\u0627\u0639\u062f \u0628\u064a\u0627\u0646\u0627\u062a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_website\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('website', '\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b2Spec2\">\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0635\u0641\u062d\u0627\u062a \u062a\u0639\u0631\u064a\u0641\u064a\u0629 \u0631\u0627\u0642\u064a\u0629)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_website\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635\" onchange=\"autoFillSpec('website', '\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b2Spec3\">\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635 (\u0648\u0638\u0627\u0626\u0641 \u0628\u0631\u0645\u062c\u064a\u0629 \u0645\u062e\u0635\u0635\u0629)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('website')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"business\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-hotel\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagRealEstate\">\u0639\u0642\u0627\u0631\u0627\u062a \u0648\u0623\u0645\u0644\u0627\u0643<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b3Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b3Desc\">\r\n \u0628\u0648\u0627\u0628\u0627\u062a \u0644\u0639\u0631\u0636 \u0627\u0644\u0634\u0642\u0642 \u0648\u0627\u0644\u0641\u064a\u0644\u0627\u062a \u0648\u0627\u0644\u0623\u0631\u0627\u0636\u064a \u0645\u0639 \u0641\u0644\u0627\u062a\u0631 \u062c\u063a\u0631\u0627\u0641\u064a\u0629 \u0648\u062a\u0648\u0627\u0635\u0644 \u0641\u0648\u0631\u064a \u0645\u0639 \u0627\u0644\u0645\u0643\u0627\u062a\u0628 \u0627\u0644\u0639\u0642\u0627\u0631\u064a\u0629.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_realestate\" value=\"\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('realestate', '\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b3Spec1\">\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u0645\u062a\u062e\u0635\u0635 (\u0641\u0644\u062a\u0631\u0629 \u062e\u0631\u0627\u0626\u0637 \u0648\u062d\u062c\u0632 \u0645\u0639\u0627\u064a\u0646\u0627\u062a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_realestate\" value=\"\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('realestate', '\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b3Spec2\">\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0645\u0639\u0631\u0636 \u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0648\u0643\u0627\u0644\u0629)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('realestate')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"business\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-building\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagCorp\">\u0634\u0631\u0643\u0627\u062a \u0648\u0645\u0624\u0633\u0633\u0627\u062a<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b4Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b4Desc\">\r\n \u062a\u0639\u0632\u064a\u0632 \u0627\u0644\u0647\u0648\u064a\u0629 \u0627\u0644\u0631\u0633\u0645\u064a\u0629 \u0644\u0644\u0634\u0631\u0643\u0629 \u0648\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0627\u0644\u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0648\u0634\u0647\u0627\u062f\u0627\u062a \u0627\u0644\u062b\u0642\u0629 \u0644\u0643\u0633\u0628 \u0627\u0644\u0639\u0645\u0644\u0627\u0621 \u0648\u0627\u0644\u0645\u0633\u062a\u062b\u0645\u0631\u064a\u0646.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_company\" value=\"\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('company', '\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b4Spec1\">\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635 (\u0628\u0648\u0627\u0628\u0629 \u062e\u062f\u0645\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629 \u0627\u0644\u0644\u063a\u0627\u062a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_company\" value=\"\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('company', '\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b4Spec2\">\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u062a\u0639\u0631\u064a\u0641\u064a (\u0635\u0641\u062d\u0629 \u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0631\u0633\u0645\u064a\u0629 \u0645\u062a\u0643\u0627\u0645\u0644\u0629)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('company')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"specialized\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-newspaper\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagNews\">\u0625\u0639\u0644\u0627\u0645 \u0648\u0635\u062d\u0627\u0641\u0629<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b5Title\">\u062a\u0635\u0645\u064a\u0645 \u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b5Desc\">\r\n \u0628\u0648\u0627\u0628\u0627\u062a \u0625\u062e\u0628\u0627\u0631\u064a\u0629 \u0630\u0627\u062a \u0633\u0631\u0639\u0629 \u0641\u0627\u0626\u0642\u0629 \u0645\u062c\u0647\u0632\u0629 \u0644\u062a\u062d\u0645\u0644 \u0622\u0644\u0627\u0641 \u0627\u0644\u0632\u0648\u0627\u0631 \u0648\u0645\u0631\u0628\u0648\u0637\u0629 \u0628\u0623\u0645\u0627\u0643\u0646 \u0625\u0639\u0644\u0627\u0646\u064a\u0629 \u0645\u0631\u0628\u062d\u0629.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_newspaper\" value=\"\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629\" checked onchange=\"autoFillSpec('newspaper', '\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b5Spec1\">\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 (\u0625\u062f\u0627\u0631\u0629 \u0643\u062a\u0627\u0628 \u0648\u0623\u0642\u0633\u0627\u0645 \u0643\u0628\u0631\u0649)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_newspaper\" value=\"\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629\" onchange=\"autoFillSpec('newspaper', '\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b5Spec2\">\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629 (\u0645\u062c\u0644\u0629 \u0631\u0642\u0645\u064a\u0629 \u062e\u0641\u064a\u0641\u0629)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('newspaper')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"education\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-graduation-cap\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagEdu\">\u062a\u0639\u0644\u064a\u0645 \u0648\u062a\u062f\u0631\u064a\u0628<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b6Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b6Desc\">\r\n \u0645\u0646\u0635\u0627\u062a \u0644\u0644\u0645\u062f\u0627\u0631\u0633 \u0648\u0627\u0644\u0623\u0633\u0627\u062a\u0630\u0629 \u0644\u062a\u0642\u062f\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u062f \u0627\u0644\u0639\u0644\u0645\u064a\u0629\u060c \u0627\u0644\u0648\u0627\u062c\u0628\u0627\u062a\u060c \u0648\u0645\u062a\u0627\u0628\u0639\u0629 \u0623\u0648\u0644\u064a\u0627\u0621 \u0627\u0644\u0623\u0645\u0648\u0631 \u0648\u0627\u0644\u0637\u0644\u0627\u0628.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_educational\" value=\"\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('educational', '\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b6Spec1\">\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u062e\u0635\u0635 (\u0644\u0648\u062d\u0629 \u062a\u062d\u0643\u0645 \u0637\u0644\u0627\u0628 \u0648\u0627\u062e\u062a\u0628\u0627\u0631\u0627\u062a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_educational\" value=\"\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('educational', '\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b6Spec2\">\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0639\u0631\u0636 \u0627\u0644\u0628\u0631\u0627\u0645\u062c \u0648\u0627\u0644\u062a\u0633\u062c\u064a\u0644)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('educational')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"education\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-chalkboard-user\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagAcademy\">\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a \u0643\u0628\u0631\u0649<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b7Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b7Desc\">\r\n \u0623\u0646\u0638\u0645\u0629 \u062a\u0639\u0644\u064a\u0645\u064a\u0629 \u0645\u062a\u0637\u0648\u0631\u0629 \u062a\u062a\u064a\u062d \u0628\u064a\u0639 \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0627\u0644\u062a\u062f\u0631\u064a\u0628\u064a\u0629 \u0627\u0644\u0645\u0633\u062c\u0644\u0629 \u0648\u0627\u0644\u0645\u0628\u0627\u0634\u0631\u0629 \u0645\u0639 \u062a\u0648\u062b\u064a\u0642 \u0627\u0644\u0634\u0647\u0627\u062f\u0627\u062a \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0627\u064b.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_academy\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('academy', '\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b7Spec1\">\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0645\u062a\u062e\u0635\u0635 (LMS \u0643\u0627\u0645\u0644 \u0648\u062f\u0641\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_academy\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('academy', '\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b7Spec2\">\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a (\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0648\u0627\u0644\u0627\u0639\u062a\u0645\u0627\u062f\u0627\u062a)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('academy')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"specialized\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-plane-departure\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagTourism\">\u0633\u064a\u0627\u062d\u0629 \u0648\u0633\u0641\u0631\u064a\u0627\u062a<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b8Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b8Desc\">\r\n \u0639\u0631\u0636 \u0628\u0631\u0627\u0645\u062c \u0627\u0644\u0639\u0645\u0631\u0629 \u0648\u0627\u0644\u0631\u062d\u0644\u0627\u062a \u0627\u0644\u0633\u064a\u0627\u062d\u064a\u0629 \u0648\u062d\u062c\u0648\u0632\u0627\u062a \u0627\u0644\u062a\u0630\u0627\u0643\u0631 \u0648\u0627\u0644\u0641\u0646\u0627\u062f\u0642 \u0628\u0646\u0645\u0627\u0630\u062c \u062a\u0641\u0627\u0639\u0644\u064a\u0629 \u062a\u062c\u0630\u0628 \u0627\u0644\u0645\u0633\u0627\u0641\u0631\u064a\u0646.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_tourism\" value=\"\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('tourism', '\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b8Spec1\">\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u0645\u062a\u062e\u0635\u0635 (\u062d\u062c\u0632 \u0628\u0631\u0627\u0645\u062c \u0627\u0644\u0639\u0645\u0631\u0629 \u0648\u0627\u0644\u0633\u064a\u0627\u062d\u0629)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_tourism\" value=\"\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('tourism', '\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b8Spec2\">\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0645\u0639\u0631\u0636 \u0631\u062d\u0644\u0627\u062a \u0627\u0644\u0648\u0643\u0627\u0644\u0629 \u0648\u0627\u0644\u062e\u062f\u0645\u0627\u062a)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('tourism')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"specialized\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-stethoscope\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagMedical\">\u0635\u062d\u0629 \u0648\u0637\u0628<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b9Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0637\u0628\u064a<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b9Desc\">\r\n \u0645\u0646\u0635\u0627\u062a \u0645\u0647\u0646\u064a\u0629 \u0644\u0644\u0623\u0637\u0628\u0627\u0621 \u0648\u0627\u0644\u0645\u0635\u062d\u0627\u062a \u0644\u062a\u0633\u0647\u064a\u0644 \u062d\u062c\u0632 \u0627\u0644\u0645\u0648\u0627\u0639\u064a\u062f \u0648\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0627\u0644\u0645\u0644\u0641 \u0627\u0644\u062a\u0639\u0631\u064a\u0641\u064a \u0648\u0627\u0644\u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0637\u0628\u064a\u0629.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_medical\" value=\"\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u0645\u062a\u062e\u0635\u0635\" checked onchange=\"autoFillSpec('medical', '\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u0645\u062a\u062e\u0635\u0635')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b9Spec1\">\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u0645\u062a\u062e\u0635\u0635 (\u062d\u062c\u0632 \u0645\u0648\u0627\u0639\u064a\u062f \u0623\u0648\u0646\u0644\u0627\u064a\u0646 \u0648\u0645\u0644\u0641\u0627\u062a \u0645\u0631\u0636\u0649)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_medical\" value=\"\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u062a\u0639\u0631\u064a\u0641\u064a\" onchange=\"autoFillSpec('medical', '\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u062a\u0639\u0631\u064a\u0641\u064a')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b9Spec2\">\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u062a\u0639\u0631\u064a\u0641\u064a (\u0645\u0639\u0644\u0648\u0645\u0627\u062a \u0627\u0644\u0639\u064a\u0627\u062f\u0629 \u0648\u0645\u0648\u0627\u0639\u064a\u062f \u0627\u0644\u0639\u0645\u0644)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('medical')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"branch-card glass-3d-card p-6 rounded-3xl flex flex-col justify-between\" data-category=\"business\">\r\n <div>\r\n <div class=\"flex items-center justify-between mb-4\">\r\n <div class=\"w-12 h-12 rounded-xl bg-bader-cyan\/15 text-bader-cyan flex items-center justify-center text-xl\">\r\n <i class=\"fa-solid fa-user-tie\"><\/i>\r\n <\/div>\r\n <span class=\"text-[10px] font-bold px-2.5 py-1 rounded-full bg-bader-cyan\/10 text-bader-cyan border border-bader-cyan\/30\" data-i18n=\"tagPersonal\">\u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0648\u0645\u062f\u0648\u0646\u0627\u062a<\/span>\r\n <\/div>\r\n <h3 class=\"text-lg font-bold dark:text-white text-slate-900 mb-2\" data-i18n=\"b10Title\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629<\/h3>\r\n <p class=\"dark:text-slate-300 text-slate-600 text-xs leading-relaxed mb-4\" data-i18n=\"b10Desc\">\r\n \u0645\u0633\u0627\u062d\u0629 \u0631\u0642\u0645\u064a\u0629 \u062e\u0627\u0635\u0629 \u0644\u0635\u0646\u0627\u0639 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0648\u0627\u0644\u062e\u0628\u0631\u0627\u0621 \u0648\u0627\u0644\u0623\u0641\u0631\u0627\u062f \u0644\u0625\u0628\u0631\u0627\u0632 \u0627\u0644\u0633\u064a\u0631\u0629 \u0627\u0644\u0630\u0627\u062a\u064a\u0629 \u0648\u0627\u0644\u0623\u0639\u0645\u0627\u0644 \u0648\u0627\u0644\u0645\u0642\u0627\u0644\u0627\u062a.\r\n <\/p>\r\n <div class=\"space-y-2 pt-3 border-t dark:border-slate-800 border-slate-200\">\r\n <span class=\"text-[11px] font-bold text-bader-cyan block\" data-i18n=\"labelSpecs\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:<\/span>\r\n <div class=\"space-y-1 text-xs dark:text-slate-300 text-slate-700\">\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_blog\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629\" checked onchange=\"autoFillSpec('blog', '\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b10Spec1\">\u0645\u0648\u0642\u0639 \u0623\u0648 \u0645\u062f\u0648\u0646\u0629 \u0645\u062a\u062e\u0635\u0635\u0629 (\u0646\u0638\u0627\u0645 \u0645\u0642\u0627\u0644\u0627\u062a \u0648\u0646\u0634\u0631\u0629 \u0628\u0631\u064a\u062f\u064a\u0629)<\/span>\r\n <\/label>\r\n <label class=\"flex items-center gap-2 cursor-pointer p-1.5 rounded-lg hover:bg-bader-cyan\/10 transition\">\r\n <input type=\"radio\" name=\"spec_blog\" value=\"\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629\" onchange=\"autoFillSpec('blog', '\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629')\" class=\"text-bader-cyan focus:ring-0\">\r\n <span data-i18n=\"b10Spec2\">\u0645\u0648\u0642\u0639 \u062a\u0639\u0631\u064a\u0641\u064a \u0634\u062e\u0635\u064a (\u0628\u0648\u0631\u062a\u0641\u0648\u0644\u064a\u0648 \u0648\u0633\u064a\u0631\u0629 \u0630\u0627\u062a\u064a\u0629 CV)<\/span>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <button onclick=\"selectBranchFromCard('blog')\" class=\"mt-6 w-full py-2.5 rounded-xl btn-3d-cyan text-xs font-bold flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <span data-i18n=\"btnSelectThis\">\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"py-16 dark:bg-bader-navyDeep\/60 bg-slate-100\/70 border-y dark:border-bader-cyan\/15 border-slate-200\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"glass-3d-card p-6 sm:p-8 rounded-3xl text-center\">\r\n <span class=\"text-xs font-black uppercase text-bader-cyan tracking-wider\" data-i18n=\"calcTag\">\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062a\u0642\u062f\u064a\u0631<\/span>\r\n <h3 class=\"text-xl sm:text-3xl font-black dark:text-white text-slate-900 mt-2 mb-4\" data-i18n=\"calcTitle\">\u062d\u062f\u062f \u062e\u0635\u0627\u0626\u0635 \u0645\u0648\u0642\u0639\u0643 \u0628\u062f\u0642\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u062a\u0642\u062f\u064a\u0631 \u0641\u0648\u0631\u064a<\/h3>\r\n <p class=\"text-xs sm:text-sm dark:text-slate-300 text-slate-600 mb-6\" data-i18n=\"calcDesc\">\r\n \u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629 \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0631\u063a\u0628 \u0628\u0636\u0645\u0647\u0627 \u0644\u0645\u0648\u0642\u0639\u0643\u060c \u0644\u064a\u062a\u0645 \u0627\u062d\u062a\u0633\u0627\u0628 \u062e\u0637\u0629 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0648\u062f\u0645\u062c\u0647\u0627 \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064a \u0637\u0644\u0628\u0643.\r\n <\/p>\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-3 text-start text-xs mb-6\">\r\n <label class=\"p-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 flex items-center gap-2 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"feature-payment\" onchange=\"updateCalcSummary()\" class=\"text-bader-cyan rounded focus:ring-0\">\r\n <span data-i18n=\"featPayment\">\u0631\u0628\u0637 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0630\u0647\u0628\u064a\u0629 \u0648 CIB<\/span>\r\n <\/label>\r\n <label class=\"p-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 flex items-center gap-2 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"feature-shipping\" onchange=\"updateCalcSummary()\" class=\"text-bader-cyan rounded focus:ring-0\">\r\n <span data-i18n=\"featShipping\">\u062a\u0643\u0627\u0645\u0644 \u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0634\u062d\u0646 \u0644\u0644\u0640 58 \u0648\u0644\u0627\u064a\u0629<\/span>\r\n <\/label>\r\n <label class=\"p-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 flex items-center gap-2 cursor-pointer\">\r\n <input type=\"checkbox\" id=\"feature-multilang\" onchange=\"updateCalcSummary()\" class=\"text-bader-cyan rounded focus:ring-0\">\r\n <span data-i18n=\"featMultiLang\">\u062f\u0639\u0645 \u0644\u063a\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629 (\u0639\u0631\u0628\u064a\/\u0641\u0631\u0646\u0633\u064a\/\u0625\u0646\u062c\u0644\u064a\u0632\u064a)<\/span>\r\n <\/label>\r\n <\/div>\r\n\r\n <div id=\"calc-result\" class=\"p-4 rounded-xl dark:bg-bader-navyCard\/60 bg-white\/80 border dark:border-bader-cyan\/30 border-cyan-500\/30 inline-block text-xs font-bold text-bader-cyan\">\r\n <span data-i18n=\"calcReadyPrompt\">\u062a\u0645 \u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a! \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0644\u0625\u0631\u0633\u0627\u0644 \u062a\u0641\u0627\u0635\u064a\u0644 \u0645\u0634\u0631\u0648\u0639\u0643 \u0623\u062f\u0646\u0627\u0647.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"order-section\" class=\"py-24 relative\">\r\n <div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n <div class=\"text-center max-w-2xl mx-auto mb-12\">\r\n <div class=\"inline-flex items-center gap-2 px-4 py-1 rounded-full bg-bader-cyan\/10 border border-bader-cyan\/30 text-bader-cyan text-xs font-bold mb-3\">\r\n <i class=\"fa-solid fa-file-signature\"><\/i>\r\n <span data-i18n=\"badgeOrder\">\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629 \u0628\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629<\/span>\r\n <\/div>\r\n <h2 class=\"text-2xl sm:text-4xl font-black dark:text-white text-slate-900\" data-i18n=\"titleOrder\">\u0646\u0645\u0648\u0630\u062c \u062d\u062c\u0632 \u0648\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639<\/h2>\r\n <p class=\"dark:text-slate-400 text-slate-600 text-xs sm:text-sm mt-3\" data-i18n=\"subOrder\">\r\n \u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0623\u0648 \u062f\u0639\u0647\u0645\u0627 \u0645\u062d\u062f\u062f\u064a\u0646 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u062e\u062a\u064a\u0627\u0631\u0643 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0644\u0648\u062c \u0623\u0639\u0644\u0627\u0647\u060c \u062b\u0645 \u0627\u062e\u062a\u0631 \u0648\u0633\u064a\u0644\u0629 \u0627\u0644\u0625\u0631\u0633\u0627\u0644.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass-3d-card p-6 sm:p-10 rounded-3xl border dark:border-bader-cyan\/25 border-cyan-500\/20\">\r\n <form id=\"web-order-form\" onsubmit=\"event.preventDefault();\" class=\"space-y-6\">\r\n \r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-5\">\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-user text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formName\">\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/span> *\r\n <\/label>\r\n <input type=\"text\" id=\"order-name\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0628\u062f\u0631 \u0627\u0644\u062f\u064a\u0646 \u062d\u0645\u064a\u062f\u0627\u0646\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-phone text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formPhone\">\u0627\u0644\u0647\u0627\u062a\u0641 \/ \u0648\u0627\u062a\u0633\u0627\u0628<\/span> *\r\n <\/label>\r\n <input type=\"tel\" id=\"order-phone\" required placeholder=\"05 \/ 06 \/ 07 ...\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-5\">\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-envelope text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formEmail\">\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/span> *\r\n <\/label>\r\n <input type=\"email\" id=\"order-email\" required placeholder=\"name@domain.com\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\">\r\n <\/div>\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-city text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formCity\">\u0627\u0644\u0648\u0644\u0627\u064a\u0629 \/ \u0627\u0644\u0645\u062f\u064a\u0646\u0629<\/span> *\r\n <\/label>\r\n <input type=\"text\" id=\"order-city\" required placeholder=\"\u0645\u062b\u0627\u0644: \u0627\u0644\u062c\u0632\u0627\u0626\u0631 \u0627\u0644\u0639\u0627\u0635\u0645\u0629\u060c \u0628\u0627\u062a\u0646\u0629...\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\">\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"p-5 rounded-2xl dark:bg-bader-navyDeep\/60 bg-white\/70 border dark:border-bader-cyan\/20 border-cyan-500\/30 space-y-4\">\r\n <h4 class=\"text-xs font-black text-bader-cyan uppercase tracking-wider flex items-center gap-2\">\r\n <i class=\"fa-solid fa-layer-group\"><\/i>\r\n <span data-i18n=\"branchBoxTitle\">\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629<\/span>\r\n <\/h4>\r\n\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-1\" data-i18n=\"formBranchLabel\">\u0627\u0644\u0641\u0631\u0639 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 *<\/label>\r\n <select id=\"order-branch\" onchange=\"onBranchChange()\" class=\"w-full px-3.5 py-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 text-xs sm:text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan\">\r\n <option value=\"store\">\u062a\u0635\u0645\u064a\u0645 \u0645\u062a\u062c\u0631 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/option>\r\n <option value=\"website\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a<\/option>\r\n <option value=\"realestate\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a<\/option>\r\n <option value=\"company\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629<\/option>\r\n <option value=\"newspaper\">\u062a\u0635\u0645\u064a\u0645 \u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/option>\r\n <option value=\"educational\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a<\/option>\r\n <option value=\"academy\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629<\/option>\r\n <option value=\"tourism\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a<\/option>\r\n <option value=\"medical\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0637\u0628\u064a<\/option>\r\n <option value=\"blog\">\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-1\" data-i18n=\"formSpecLabel\">\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635 *<\/label>\r\n <select id=\"order-spec\" class=\"w-full px-3.5 py-3 rounded-xl dark:bg-bader-navyCard bg-white border dark:border-slate-700 border-slate-300 text-xs sm:text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan\">\r\n \r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div>\r\n <label class=\"block text-xs font-bold dark:text-slate-300 text-slate-700 mb-2\">\r\n <i class=\"fa-solid fa-comment-dots text-bader-cyan mx-1\"><\/i>\r\n <span data-i18n=\"formNotes\">\u062a\u0641\u0627\u0635\u064a\u0644 \u0625\u0636\u0627\u0641\u064a\u0629 \u0639\u0646 \u0646\u0634\u0627\u0637\u0643 \u0623\u0648 \u0623\u0641\u0643\u0627\u0631\u0643<\/span>\r\n <\/label>\r\n <textarea id=\"order-notes\" rows=\"3\" placeholder=\"\u0627\u0634\u0631\u062d \u0644\u0646\u0627 \u0637\u0628\u064a\u0639\u0629 \u0627\u0644\u0645\u062d\u062a\u0648\u0649 \u0623\u0648 \u0627\u0644\u0645\u0646\u062a\u062c\u0627\u062a \u0623\u0648 \u0623\u064a \u0645\u0648\u0627\u0642\u0639 \u0623\u062e\u0631\u0649 \u062a\u0639\u062c\u0628\u0643 \u0641\u0643\u0631\u062a\u0647\u0627...\" class=\"w-full px-4 py-3 rounded-xl dark:bg-bader-navyCard\/90 bg-white border dark:border-slate-700 border-slate-300 text-sm dark:text-white text-slate-900 focus:outline-none focus:border-bader-cyan transition\"><\/textarea>\r\n <\/div>\r\n\r\n \r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 pt-3\">\r\n <button type=\"button\" onclick=\"submitViaEmail()\" class=\"py-4 px-6 rounded-2xl dark:bg-slate-800 bg-slate-200 hover:bg-slate-300 dark:hover:bg-slate-700 dark:text-white text-slate-900 font-bold text-xs sm:text-sm border dark:border-slate-600 border-slate-300 transition flex items-center justify-center gap-2\">\r\n <i class=\"fa-solid fa-paper-plane text-bader-cyan\"><\/i>\r\n <span data-i18n=\"btnSendEmail\">\u0625\u0631\u0633\u0627\u0644 \u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0645\u0646\u0635\u0629<\/span>\r\n <\/button>\r\n\r\n <button type=\"button\" onclick=\"submitViaWhatsApp()\" class=\"btn-3d-cyan py-4 px-6 rounded-2xl text-white font-extrabold text-xs sm:text-sm transition flex items-center justify-center gap-2\">\r\n <i class=\"fa-brands fa-whatsapp text-lg\"><\/i>\r\n <span data-i18n=\"btnSendWhatsApp\">\u0625\u0631\u0633\u0627\u0644 \u0648\u062a\u0648\u0627\u0635\u0644 \u0645\u0628\u0627\u0634\u0631 \u0639\u0628\u0631 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <\/form>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <footer class=\"dark:bg-black\/95 bg-slate-900 text-slate-400 pt-16 pb-12 text-sm border-t border-slate-800\">\r\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n \r\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-10 pb-12 border-b border-slate-800\">\r\n \r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center\">\r\n <img decoding=\"async\" src=\"..\/aderInfo (3).png\" alt=\"BaderInfo Logo\" class=\"h-10 w-auto object-contain filter drop-shadow-[0_0_10px_rgba(0,194,255,0.4)]\">\r\n <\/div>\r\n <p class=\"text-xs text-slate-400 leading-relaxed\" data-i18n=\"footerWebDesc\">\r\n \u0642\u0633\u0645 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 - \u0645\u0646\u0635\u0629 BaderInfo. \u062d\u0644\u0648\u0644 \u0628\u0631\u0645\u062c\u064a\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u062a\u0648\u0627\u0643\u0628 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.\r\n <\/p>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"text-white font-bold text-xs uppercase tracking-wider mb-4\" data-i18n=\"footerQuickLinks\">\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629<\/h4>\r\n <ul class=\"space-y-2 text-xs\">\r\n <li><a href=\"..\/\" class=\"hover:text-bader-cyan transition\" data-i18n=\"navHome\">\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629<\/a><\/li>\r\n <li><a href=\"#branches-catalog\" class=\"hover:text-bader-cyan transition\" data-i18n=\"navCatalog\">\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0641\u0631\u0648\u0639<\/a><\/li>\r\n <li><a href=\"#order-section\" class=\"hover:text-bader-cyan transition\" data-i18n=\"navOrder\">\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629<\/a><\/li>\r\n <li><a href=\"https:\/\/wa.me\/213000000000\" target=\"_blank\" class=\"hover:text-emerald-400 transition\" data-i18n=\"navDirectWhatsApp\">\u0645\u062d\u0627\u062f\u062b\u0629 \u0648\u0627\u062a\u0633\u0627\u0628 \u0645\u0628\u0627\u0634\u0631\u0629<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"text-white font-bold text-xs uppercase tracking-wider mb-4\" data-i18n=\"footerContactHeading\">\u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0645\u0628\u0627\u0634\u0631<\/h4>\r\n <ul class=\"space-y-2.5 text-xs\">\r\n <li class=\"flex items-center gap-2\"><i class=\"fa-solid fa-envelope text-bader-cyan\"><\/i> <span>contact@baderinfo.com<\/span><\/li>\r\n <li class=\"flex items-center gap-2\"><i class=\"fa-brands fa-whatsapp text-emerald-400\"><\/i> <span>+213 (0) 5XX XX XX XX<\/span><\/li>\r\n <li class=\"flex items-center gap-2\"><i class=\"fa-solid fa-location-dot text-bader-cyan\"><\/i> <span data-i18n=\"footerLocation\">\u0627\u0644\u062c\u0632\u0627\u0626\u0631\u060c \u0628\u0627\u062a\u0646\u0629 \/ \u0643\u0627\u0645\u0644 \u0627\u0644\u062a\u0631\u0627\u0628 \u0627\u0644\u0648\u0637\u0646\u064a<\/span><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500\">\r\n <p>\u00a9 2026 BaderInfo - Web Design & E-Commerce Engineering<\/p>\r\n <p class=\"mt-2 sm:mt-0 text-slate-400\">High-Performance Dedicated Service Page<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/footer>\r\n\r\n \r\n <div id=\"app-toast\" class=\"fixed bottom-6 start-6 z-50 dark:bg-slate-900 bg-white border dark:border-bader-cyan\/40 border-cyan-500\/40 dark:text-white text-slate-900 px-5 py-3.5 rounded-2xl shadow-2xl flex items-center gap-3 transform translate-y-28 opacity-0 transition-all duration-300 pointer-events-none\">\r\n <i id=\"toast-icon\" class=\"fa-solid fa-circle-check text-bader-cyan text-base\"><\/i>\r\n <span id=\"toast-msg\" class=\"text-xs font-bold\">\u062a\u0645 \u0627\u0644\u062a\u0646\u0641\u064a\u0630 \u0628\u0646\u062c\u0627\u062d<\/span>\r\n <\/div>\r\n\r\n <script>\r\n \/* ========================================================\r\n 1. DATA ENGINE FOR THE 10 BRANCHES & SPECS\r\n ======================================================== *\/\r\n const branchesData = {\r\n store: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u062a\u062c\u0631 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\",\r\n titleEn: \"E-Commerce Online Store Design\",\r\n specsAr: [\"\u0645\u062a\u062c\u0631 \u0643\u0628\u064a\u0631\", \"\u0645\u062a\u062c\u0631 \u0645\u062a\u0648\u0633\u0637\", \"\u0645\u062a\u062c\u0631 \u0635\u063a\u064a\u0631\"],\r\n specsEn: [\"Large E-Store\", \"Medium E-Store\", \"Small E-Store\"]\r\n },\r\n website: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\",\r\n titleEn: \"Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\", \"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u062a\u0639\u0631\u064a\u0641\u064a\", \"\u0645\u0648\u0642\u0639 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u062a\u062e\u0635\u0635\"],\r\n specsEn: [\"Dynamic Web Portal\", \"Informational Showcase\", \"Specialized Web Portal\"]\r\n },\r\n realestate: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a\",\r\n titleEn: \"Real Estate Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0639\u0642\u0627\u0631\u064a \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Real Estate Portal\", \"Showcase Real Estate Site\"]\r\n },\r\n company: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629\",\r\n titleEn: \"Company Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0634\u0631\u0643\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Corporate Portal\", \"Informational Corporate Site\"]\r\n },\r\n newspaper: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\",\r\n titleEn: \"Online Newspaper Design\",\r\n specsAr: [\"\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629\", \"\u062c\u0631\u064a\u062f\u0629 \u0627\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629\"],\r\n specsEn: [\"Specialized News Portal\", \"Digital Magazine Showcase\"]\r\n },\r\n educational: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a\",\r\n titleEn: \"Educational Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u062a\u0639\u0644\u064a\u0645\u064a \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized LMS Platform\", \"Educational Showcase\"]\r\n },\r\n academy: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629\",\r\n titleEn: \"Academy Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0627\u0643\u0627\u062f\u064a\u0645\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Academy Portal\", \"Academy Showcase\"]\r\n },\r\n tourism: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a\",\r\n titleEn: \"Tourism Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0633\u064a\u0627\u062d\u064a \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Travel Booking\", \"Tourism Agency Showcase\"]\r\n },\r\n medical: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0637\u0628\u064a\",\r\n titleEn: \"Medical Website Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u0645\u062a\u062e\u0635\u0635\", \"\u0645\u0648\u0642\u0639 \u0637\u0628\u064a \u062a\u0639\u0631\u064a\u0641\u064a\"],\r\n specsEn: [\"Specialized Clinic Platform\", \"Doctor \/ Clinic Showcase\"]\r\n },\r\n blog: {\r\n titleAr: \"\u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629\",\r\n titleEn: \"Personal Website or Blog Design\",\r\n specsAr: [\"\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u0645\u062a\u062e\u0635\u0635\u0629\", \"\u0645\u0648\u0642\u0639 \u0627\u0648 \u0645\u062f\u0648\u0646\u0629 \u0634\u062e\u0635\u064a\u0629 \u062a\u0639\u0631\u064a\u0641\u064a\u0629\"],\r\n specsEn: [\"Specialized Blog \/ Portfolio\", \"Personal Showcase Site\"]\r\n }\r\n };\r\n\r\n \/* ========================================================\r\n 2. TRANSLATION ENGINE\r\n ======================================================== *\/\r\n let currentLanguage = 'ar';\r\n\r\n const translations = {\r\n ar: {\r\n badgeServiceHead: \"\u0642\u0633\u0645 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639\",\r\n btnBackHome: \"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\",\r\n quickChat: \"\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u0641\u0648\u0631\u064a\u0629\",\r\n heroBadgeWeb: \"\u0627\u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0623\u0648\u0644\u0649 | \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\",\r\n heroWebTitle: \"\u062d\u0644\u0648\u0644 \u0648\u064a\u0628 \u0630\u0643\u064a\u0629\u060c \u0641\u0627\u0626\u0642\u0629 \u0627\u0644\u0633\u0631\u0639\u0629 \u0648\u0639\u0627\u0644\u064a\u0629 \u0627\u0644\u062a\u062d\u0648\u064a\u0644\",\r\n heroWebDesc: \"\u0646\u0642\u062f\u0645 \u0644\u0643 10 \u062a\u062e\u0635\u0635\u0627\u062a \u062f\u0642\u064a\u0642\u0629 \u062a\u0634\u0645\u0644 \u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 \u0628\u0645\u062e\u062a\u0644\u0641 \u0623\u062d\u062c\u0627\u0645\u0647\u0627\u060c \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0634\u0631\u0643\u0627\u062a\u060c \u0627\u0644\u0639\u0642\u0627\u0631\u0627\u062a\u060c \u0627\u0644\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a\u060c \u0627\u0644\u0645\u062c\u0644\u0627\u062a\u060c \u0648\u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0637\u0628\u064a\u0629 \u0645\u0639 \u0631\u0628\u0637 \u0628\u0648\u0627\u0628\u0627\u062a \u0627\u0644\u062f\u0641\u0639 \u0627\u0644\u062c\u0632\u0627\u0626\u0631\u064a\u0629 \u0648\u062a\u0648\u0627\u0641\u0642 \u0643\u0627\u0645\u0644 \u0645\u0639 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b.\",\r\n btnBrowseBranches: \"\u0627\u0633\u062a\u0639\u0631\u0627\u0636 \u0643\u0627\u0641\u0629 \u0627\u0644\u0641\u0631\u0648\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a\",\r\n btnDirectOrder: \"\u0637\u0644\u0628 \u0639\u0631\u0636 \u0633\u0639\u0631 \u0645\u0628\u0627\u0634\u0631\",\r\n filterAll: \"\u0627\u0644\u0643\u0644 (10 \u0641\u0631\u0648\u0639)\",\r\n filterEcom: \"\u0645\u062a\u0627\u062c\u0631 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\",\r\n filterBiz: \"\u0634\u0631\u0643\u0627\u062a \u0648\u0639\u0642\u0627\u0631\u0627\u062a\",\r\n filterEdu: \"\u062a\u0639\u0644\u064a\u0645 \u0648\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a\",\r\n filterSpec: \"\u0637\u0628\u064a\u060c \u0633\u064a\u0627\u062d\u064a \u0648\u0625\u062e\u0628\u0627\u0631\u064a\",\r\n catalogTitle: \"\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0641\u0631\u0648\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635\",\r\n catalogSubtitle: \"\u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0645\u0634\u0631\u0648\u0639\u0643\u060c \u0648\u0627\u0636\u063a\u0637 \u0639\u0644\u0649 \\\"\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631\\\" \u0644\u064a\u062a\u0645 \u0645\u0644\u0621 \u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0637\u0644\u0628 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629.\",\r\n tagStore: \"\u062a\u062c\u0627\u0631\u0629 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629\",\r\n tagWeb: \"\u0645\u0648\u0627\u0642\u0639 \u0639\u0627\u0645\u0629\",\r\n tagRealEstate: \"\u0639\u0642\u0627\u0631\u0627\u062a \u0648\u0623\u0645\u0644\u0627\u0643\",\r\n tagCorp: \"\u0634\u0631\u0643\u0627\u062a \u0648\u0645\u0624\u0633\u0633\u0627\u062a\",\r\n tagNews: \"\u0625\u0639\u0644\u0627\u0645 \u0648\u0635\u062d\u0627\u0641\u0629\",\r\n tagEdu: \"\u062a\u0639\u0644\u064a\u0645 \u0648\u062a\u062f\u0631\u064a\u0628\",\r\n tagAcademy: \"\u0623\u0643\u0627\u062f\u064a\u0645\u064a\u0627\u062a \u0643\u0628\u0631\u0649\",\r\n tagTourism: \"\u0633\u064a\u0627\u062d\u0629 \u0648\u0633\u0641\u0631\u064a\u0627\u062a\",\r\n tagMedical: \"\u0635\u062d\u0629 \u0648\u0637\u0628\",\r\n tagPersonal: \"\u0628\u0631\u0648\u0641\u0627\u064a\u0644 \u0648\u0645\u062f\u0648\u0646\u0627\u062a\",\r\n labelSpecs: \"\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635:\",\r\n btnSelectThis: \"\u062a\u062d\u062f\u064a\u062f \u0647\u0630\u0627 \u0627\u0644\u062e\u064a\u0627\u0631 \u0648\u0627\u0644\u0637\u0644\u0628\",\r\n calcTag: \"\u062d\u0627\u0633\u0628\u0629 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062a\u0642\u062f\u064a\u0631\",\r\n calcTitle: \"\u062d\u062f\u062f \u062e\u0635\u0627\u0626\u0635 \u0645\u0648\u0642\u0639\u0643 \u0628\u062f\u0642\u0629 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u062a\u0642\u062f\u064a\u0631 \u0641\u0648\u0631\u064a\",\r\n calcDesc: \"\u0627\u062e\u062a\u0631 \u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629 \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629 \u0627\u0644\u062a\u064a \u062a\u0631\u063a\u0628 \u0628\u0636\u0645\u0647\u0627 \u0644\u0645\u0648\u0642\u0639\u0643\u060c \u0644\u064a\u062a\u0645 \u0627\u062d\u062a\u0633\u0627\u0628 \u062e\u0637\u0629 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0648\u062f\u0645\u062c\u0647\u0627 \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064a \u0637\u0644\u0628\u0643.\",\r\n featPayment: \"\u0631\u0628\u0637 \u0627\u0644\u0628\u0637\u0627\u0642\u0629 \u0627\u0644\u0630\u0647\u0628\u064a\u0629 \u0648 CIB\",\r\n featShipping: \"\u062a\u0643\u0627\u0645\u0644 \u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0634\u062d\u0646 \u0644\u0644\u0640 58 \u0648\u0644\u0627\u064a\u0629\",\r\n featMultiLang: \"\u062f\u0639\u0645 \u0644\u063a\u0627\u062a \u0645\u062a\u0639\u062f\u062f\u0629 (\u0639\u0631\u0628\u064a\/\u0641\u0631\u0646\u0633\u064a\/\u0625\u0646\u062c\u0644\u064a\u0632\u064a)\",\r\n calcReadyPrompt: \"\u062a\u0645 \u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a! \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0644\u0625\u0631\u0633\u0627\u0644 \u062a\u0641\u0627\u0635\u064a\u0644 \u0645\u0634\u0631\u0648\u0639\u0643 \u0623\u062f\u0646\u0627\u0647.\",\r\n badgeOrder: \"\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629 \u0628\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u062d\u062f\u062f\u0629\",\r\n titleOrder: \"\u0646\u0645\u0648\u0630\u062c \u062d\u062c\u0632 \u0648\u0627\u0633\u062a\u0634\u0627\u0631\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639\",\r\n subOrder: \"\u0627\u062e\u062a\u0631 \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0623\u0648 \u062f\u0639\u0647\u0645\u0627 \u0645\u062d\u062f\u062f\u064a\u0646 \u062a\u0644\u0642\u0627\u0626\u064a\u0627\u064b \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u0627\u062e\u062a\u064a\u0627\u0631\u0643 \u0645\u0646 \u0627\u0644\u0643\u062a\u0627\u0644\u0648\u062c \u0623\u0639\u0644\u0627\u0647\u060c \u062b\u0645 \u0627\u062e\u062a\u0631 \u0648\u0633\u064a\u0644\u0629 \u0627\u0644\u0625\u0631\u0633\u0627\u0644.\",\r\n formName: \"\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644\",\r\n formPhone: \"\u0627\u0644\u0647\u0627\u062a\u0641 \/ \u0648\u0627\u062a\u0633\u0627\u0628\",\r\n formEmail: \"\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\",\r\n formCity: \"\u0627\u0644\u0648\u0644\u0627\u064a\u0629 \/ \u0627\u0644\u0645\u062f\u064a\u0646\u0629\",\r\n branchBoxTitle: \"\u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629\",\r\n formBranchLabel: \"\u0627\u0644\u0641\u0631\u0639 \u0627\u0644\u0645\u0637\u0644\u0648\u0628 *\",\r\n formSpecLabel: \"\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a \u0648\u0627\u0644\u062e\u0635\u0627\u0626\u0635 *\",\r\n formNotes: \"\u062a\u0641\u0627\u0635\u064a\u0644 \u0625\u0636\u0627\u0641\u064a\u0629 \u0639\u0646 \u0646\u0634\u0627\u0637\u0643 \u0623\u0648 \u0623\u0641\u0643\u0627\u0631\u0643\",\r\n btnSendEmail: \"\u0625\u0631\u0633\u0627\u0644 \u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0645\u0646\u0635\u0629\",\r\n btnSendWhatsApp: \"\u0625\u0631\u0633\u0627\u0644 \u0648\u062a\u0648\u0627\u0635\u0644 \u0645\u0628\u0627\u0634\u0631 \u0639\u0628\u0631 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628\",\r\n footerWebDesc: \"\u0642\u0633\u0645 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629 - \u0645\u0646\u0635\u0629 BaderInfo. \u062d\u0644\u0648\u0644 \u0628\u0631\u0645\u062c\u064a\u0629 \u0627\u062d\u062a\u0631\u0627\u0641\u064a\u0629 \u062a\u0648\u0627\u0643\u0628 \u0623\u062d\u062f\u062b \u0627\u0644\u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a\u0629.\",\r\n footerQuickLinks: \"\u0631\u0648\u0627\u0628\u0637 \u0633\u0631\u064a\u0639\u0629\",\r\n navHome: \"\u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\",\r\n navCatalog: \"\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0641\u0631\u0648\u0639\",\r\n navOrder: \"\u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629\",\r\n navDirectWhatsApp: \"\u0645\u062d\u0627\u062f\u062b\u0629 \u0648\u0627\u062a\u0633\u0627\u0628 \u0645\u0628\u0627\u0634\u0631\u0629\",\r\n footerContactHeading: \"\u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0645\u0628\u0627\u0634\u0631\",\r\n footerLocation: \"\u0627\u0644\u062c\u0632\u0627\u0626\u0631\u060c \u0628\u0627\u062a\u0646\u0629 \/ \u0643\u0627\u0645\u0644 \u0627\u0644\u062a\u0631\u0627\u0628 \u0627\u0644\u0648\u0637\u0646\u064a\"\r\n },\r\n en: {\r\n badgeServiceHead: \"Web Design & Development Division\",\r\n btnBackHome: \"Home\",\r\n quickChat: \"Direct Consultation\",\r\n heroBadgeWeb: \"Service 01 | Web Design & E-Commerce Engineering\",\r\n heroWebTitle: \"Intelligent, Ultra-Fast & High-Converting Web Platforms\",\r\n heroWebDesc: \"Explore 10 specialized categories covering multi-size online stores, corporate portals, real estate, academies, clinics, and digital media with local payment integrations and SEO optimization.\",\r\n btnBrowseBranches: \"Explore Branches & Specs\",\r\n btnDirectOrder: \"Direct Price Quote\",\r\n filterAll: \"All (10 Branches)\",\r\n filterEcom: \"E-Commerce\",\r\n filterBiz: \"Corporate & Real Estate\",\r\n filterEdu: \"Education & Academies\",\r\n filterSpec: \"Medical, Tourism & Media\",\r\n catalogTitle: \"Branches & Specifications Catalog\",\r\n catalogSubtitle: \"Select the ideal branch and specifications for your venture, then click 'Select This Option' to automatically populate your order details.\",\r\n tagStore: \"E-Commerce\",\r\n tagWeb: \"General Web\",\r\n tagRealEstate: \"Real Estate\",\r\n tagCorp: \"Corporate\",\r\n tagNews: \"Media & Press\",\r\n tagEdu: \"Education\",\r\n tagAcademy: \"Academies\",\r\n tagTourism: \"Travel & Tourism\",\r\n tagMedical: \"Healthcare\",\r\n tagPersonal: \"Profile & Blogs\",\r\n labelSpecs: \"Specifications & Properties:\",\r\n btnSelectThis: \"Select This Option & Order\",\r\n calcTag: \"Specifications Calculator\",\r\n calcTitle: \"Configure Your Project Features for an Instant Plan\",\r\n calcDesc: \"Select extra architectural features to merge them directly into your consultation and delivery scope.\",\r\n featPayment: \"Edahabia & CIB Payment Gateway\",\r\n featShipping: \"58 States Automated Courier Integration\",\r\n featMultiLang: \"Multi-Language Support (AR \/ FR \/ EN)\",\r\n calcReadyPrompt: \"Specifications ready! Proceed below to submit your project requirements.\",\r\n badgeOrder: \"Order Service with Chosen Specs\",\r\n titleOrder: \"Web Development Booking & Inquiry Form\",\r\n subOrder: \"Pick your branch and specifications or let them be automatically configured from the catalog above.\",\r\n formName: \"Full Name\",\r\n formPhone: \"Phone \/ WhatsApp\",\r\n formEmail: \"Email Address\",\r\n formCity: \"State \/ City\",\r\n branchBoxTitle: \"Branch & Specifications Confirmation\",\r\n formBranchLabel: \"Required Branch *\",\r\n formSpecLabel: \"Specifications & Properties *\",\r\n formNotes: \"Additional Project Details\",\r\n btnSendEmail: \"Send to Platform Email\",\r\n btnSendWhatsApp: \"Direct Send via WhatsApp\",\r\n footerWebDesc: \"Web Design & E-Commerce Engineering Division - BaderInfo Platform. Modern high-performance web systems.\",\r\n footerQuickLinks: \"Quick Links\",\r\n navHome: \"Home\",\r\n navCatalog: \"Branches Catalog\",\r\n navOrder: \"Order Service\",\r\n navDirectWhatsApp: \"Direct WhatsApp Chat\",\r\n footerContactHeading: \"Direct Contact\",\r\n footerLocation: \"Algeria, Batna \/ Nationwide & Global\"\r\n }\r\n };\r\n\r\n function toggleLanguage() {\r\n currentLanguage = currentLanguage === 'ar' ? 'en' : 'ar';\r\n applyLanguage(currentLanguage);\r\n }\r\n\r\n function applyLanguage(lang) {\r\n const html = document.documentElement;\r\n const langLabel = document.getElementById('current-lang-label');\r\n \r\n if (lang === 'en') {\r\n html.setAttribute('dir', 'ltr');\r\n html.setAttribute('lang', 'en');\r\n langLabel.innerText = '\u0627\u0644\u0639\u0631\u0628\u064a\u0629';\r\n document.body.style.fontFamily = \"'Outfit', 'Cairo', sans-serif\";\r\n } else {\r\n html.setAttribute('dir', 'rtl');\r\n html.setAttribute('lang', 'ar');\r\n langLabel.innerText = 'English';\r\n document.body.style.fontFamily = \"'Tajawal', 'Cairo', sans-serif\";\r\n }\r\n\r\n document.querySelectorAll('[data-i18n]').forEach(el => {\r\n const key = el.getAttribute('data-i18n');\r\n if (translations[lang] && translations[lang][key]) {\r\n el.innerText = translations[lang][key];\r\n }\r\n });\r\n\r\n refreshBranchSelectDropdown();\r\n showToast(lang === 'en' ? 'Switched to English' : '\u062a\u0645 \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u0644\u063a\u0629 \u0627\u0644\u0639\u0631\u0628\u064a\u0629');\r\n }\r\n\r\n \/* ========================================================\r\n 3. DARK \/ LIGHT MODE\r\n ======================================================== *\/\r\n function toggleDarkMode() {\r\n const html = document.documentElement;\r\n const body = document.body;\r\n const themeIcon = document.getElementById('theme-icon');\r\n\r\n if (body.classList.contains('dark')) {\r\n body.classList.remove('dark');\r\n html.classList.remove('dark');\r\n themeIcon.className = 'fa-solid fa-moon text-sm';\r\n localStorage.setItem('bader_theme', 'light');\r\n showToast(currentLanguage === 'en' ? 'Light mode enabled' : '\u062a\u0645 \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u0641\u0627\u062a\u062d');\r\n } else {\r\n body.classList.add('dark');\r\n html.classList.add('dark');\r\n themeIcon.className = 'fa-solid fa-sun text-sm';\r\n localStorage.setItem('bader_theme', 'dark');\r\n showToast(currentLanguage === 'en' ? 'Dark mode enabled' : '\u062a\u0645 \u062a\u0641\u0639\u064a\u0644 \u0627\u0644\u0648\u0636\u0639 \u0627\u0644\u062f\u0627\u0643\u0646');\r\n }\r\n }\r\n\r\n window.addEventListener('DOMContentLoaded', () => {\r\n const savedTheme = localStorage.getItem('bader_theme');\r\n const themeIcon = document.getElementById('theme-icon');\r\n if (savedTheme === 'light') {\r\n document.body.classList.remove('dark');\r\n document.documentElement.classList.remove('dark');\r\n if (themeIcon) themeIcon.className = 'fa-solid fa-moon text-sm';\r\n }\r\n refreshBranchSelectDropdown();\r\n });\r\n\r\n \/* ========================================================\r\n 4. FILTER BRANCHES CATALOG\r\n ======================================================== *\/\r\n function filterCards(category) {\r\n document.querySelectorAll('.filter-btn').forEach(btn => {\r\n btn.classList.remove('bg-bader-cyan', 'text-bader-navyDeep', 'active');\r\n btn.classList.add('dark:bg-bader-navyCard', 'bg-white', 'dark:text-slate-300', 'text-slate-700');\r\n });\r\n event.target.classList.remove('dark:bg-bader-navyCard', 'bg-white', 'dark:text-slate-300', 'text-slate-700');\r\n event.target.classList.add('bg-bader-cyan', 'text-bader-navyDeep', 'active');\r\n\r\n const cards = document.querySelectorAll('.branch-card');\r\n cards.forEach(card => {\r\n if (category === 'all' || card.getAttribute('data-category') === category) {\r\n card.style.display = 'flex';\r\n } else {\r\n card.style.display = 'none';\r\n }\r\n });\r\n }\r\n\r\n \/* ========================================================\r\n 5. DROPDOWN SELECTION & CARD LINKING\r\n ======================================================== *\/\r\n function refreshBranchSelectDropdown() {\r\n const branchSel = document.getElementById('order-branch');\r\n const currentVal = branchSel.value || 'store';\r\n const isEn = currentLanguage === 'en';\r\n\r\n branchSel.innerHTML = '';\r\n for (const [key, val] of Object.entries(branchesData)) {\r\n const opt = document.createElement('option');\r\n opt.value = key;\r\n opt.textContent = isEn ? val.titleEn : val.titleAr;\r\n if (key === currentVal) opt.selected = true;\r\n branchSel.appendChild(opt);\r\n }\r\n onBranchChange();\r\n }\r\n\r\n function onBranchChange() {\r\n const branchKey = document.getElementById('order-branch').value;\r\n const specSel = document.getElementById('order-spec');\r\n const isEn = currentLanguage === 'en';\r\n\r\n specSel.innerHTML = '';\r\n if (!branchesData[branchKey]) return;\r\n\r\n const specs = isEn ? branchesData[branchKey].specsEn : branchesData[branchKey].specsAr;\r\n specs.forEach(spec => {\r\n const opt = document.createElement('option');\r\n opt.value = spec;\r\n opt.textContent = spec;\r\n specSel.appendChild(opt);\r\n });\r\n }\r\n\r\n function autoFillSpec(branchKey, specName) {\r\n const branchSel = document.getElementById('order-branch');\r\n branchSel.value = branchKey;\r\n onBranchChange();\r\n\r\n const specSel = document.getElementById('order-spec');\r\n for (let i = 0; i < specSel.options.length; i++) {\r\n if (specSel.options[i].value === specName) {\r\n specSel.selectedIndex = i;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n function selectBranchFromCard(branchKey) {\r\n \/\/ Find selected radio inside this card\r\n const radio = document.querySelector(`input[name=\"spec_${branchKey}\"]:checked`);\r\n const specVal = radio ? radio.value : '';\r\n \r\n const branchSel = document.getElementById('order-branch');\r\n branchSel.value = branchKey;\r\n onBranchChange();\r\n\r\n if (specVal) {\r\n const specSel = document.getElementById('order-spec');\r\n for (let i = 0; i < specSel.options.length; i++) {\r\n if (specSel.options[i].value.includes(specVal) || specVal.includes(specSel.options[i].value)) {\r\n specSel.selectedIndex = i;\r\n break;\r\n }\r\n }\r\n }\r\n\r\n const orderSec = document.getElementById('order-section');\r\n orderSec.scrollIntoView({ behavior: 'smooth' });\r\n showToast(currentLanguage === 'en' ? 'Branch & specifications applied to form' : '\u062a\u0645 \u062a\u062b\u0628\u064a\u062a \u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629 \u0641\u064a \u0627\u0644\u0646\u0645\u0648\u0630\u062c \u0628\u0646\u062c\u0627\u062d');\r\n }\r\n\r\n function updateCalcSummary() {\r\n const p = document.getElementById('feature-payment').checked;\r\n const s = document.getElementById('feature-shipping').checked;\r\n const m = document.getElementById('feature-multilang').checked;\r\n const box = document.getElementById('calc-result');\r\n\r\n let extras = [];\r\n if (p) extras.push(currentLanguage === 'en' ? 'Payment Gateway' : '\u062f\u0641\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a');\r\n if (s) extras.push(currentLanguage === 'en' ? 'Shipping Integration' : '\u0631\u0628\u0637 \u0634\u062d\u0646 58 \u0648\u0644\u0627\u064a\u0629');\r\n if (m) extras.push(currentLanguage === 'en' ? 'Multi-Language' : '\u0645\u062a\u0639\u062f\u062f \u0627\u0644\u0644\u063a\u0627\u062a');\r\n\r\n if (extras.length > 0) {\r\n box.innerHTML = (currentLanguage === 'en' ? 'Included Add-ons: ' : '\u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0645\u0636\u0627\u0641\u0629: ') + extras.join(' + ');\r\n } else {\r\n box.innerHTML = currentLanguage === 'en' \r\n ? 'Specifications ready! Proceed below to submit your project requirements.' \r\n : '\u062a\u0645 \u062a\u062c\u0647\u064a\u0632 \u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0627\u062a! \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0644\u0625\u0631\u0633\u0627\u0644 \u062a\u0641\u0627\u0635\u064a\u0644 \u0645\u0634\u0631\u0648\u0639\u0643 \u0623\u062f\u0646\u0627\u0647.';\r\n }\r\n }\r\n\r\n \/* ========================================================\r\n 6. FORM SUBMISSION\r\n ======================================================== *\/\r\n function gatherOrderData() {\r\n const name = document.getElementById('order-name').value.trim();\r\n const phone = document.getElementById('order-phone').value.trim();\r\n const email = document.getElementById('order-email').value.trim();\r\n const city = document.getElementById('order-city').value.trim();\r\n \r\n const bSel = document.getElementById('order-branch');\r\n const sSel = document.getElementById('order-spec');\r\n const branchText = bSel.options[bSel.selectedIndex].text;\r\n const specText = sSel.options[sSel.selectedIndex] ? sSel.options[sSel.selectedIndex].text : '';\r\n\r\n const p = document.getElementById('feature-payment').checked;\r\n const s = document.getElementById('feature-shipping').checked;\r\n const m = document.getElementById('feature-multilang').checked;\r\n let extras = [];\r\n if (p) extras.push(\"\u0628\u0648\u0627\u0628\u0629 \u062f\u0641\u0639 \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\");\r\n if (s) extras.push(\"\u062a\u0643\u0627\u0645\u0644 \u0634\u062d\u0646 58 \u0648\u0644\u0627\u064a\u0629\");\r\n if (m) extras.push(\"\u0645\u062a\u0639\u062f\u062f \u0627\u0644\u0644\u063a\u0627\u062a\");\r\n\r\n const notes = document.getElementById('order-notes').value.trim() || '\u0644\u0627 \u062a\u0648\u062c\u062f \u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629';\r\n\r\n if (!name || !phone || !email || !city) {\r\n showToast(currentLanguage === 'en' ? 'Please fill in all required fields' : '\u064a\u0631\u062c\u0649 \u0645\u0644\u0621 \u062c\u0645\u064a\u0639 \u0627\u0644\u062d\u0642\u0648\u0644 \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629', 'warning');\r\n return null;\r\n }\r\n\r\n return {\r\n name,\r\n phone,\r\n email,\r\n city,\r\n service: `\u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 > ${branchText} (${specText})`,\r\n extras: extras.length > 0 ? extras.join(', ') : '\u0628\u062f\u0648\u0646 \u0625\u0636\u0627\u0641\u0627\u062a \u062e\u0627\u0635\u0629',\r\n notes\r\n };\r\n }\r\n\r\n function submitViaWhatsApp() {\r\n const data = gatherOrderData();\r\n if (!data) return;\r\n\r\n const waMsg = `*\u0637\u0644\u0628 \u062e\u062f\u0645\u0629 \u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u0627\u0642\u0639 \u0648\u0645\u062a\u0627\u062c\u0631 \u0645\u0646 BaderInfo:*%0A` +\r\n `\ud83d\udc64 *\u0627\u0644\u0627\u0633\u0645:* ${encodeURIComponent(data.name)}%0A` +\r\n `\ud83d\udcde *\u0627\u0644\u0647\u0627\u062a\u0641:* ${encodeURIComponent(data.phone)}%0A` +\r\n `\u2709\ufe0f *\u0627\u0644\u0628\u0631\u064a\u062f:* ${encodeURIComponent(data.email)}%0A` +\r\n `\ud83d\udccd *\u0627\u0644\u0648\u0644\u0627\u064a\u0629:* ${encodeURIComponent(data.city)}%0A` +\r\n `\ud83d\udee0\ufe0f *\u0627\u0644\u0641\u0631\u0639 \u0648\u0627\u0644\u0645\u0648\u0627\u0635\u0641\u0629:* ${encodeURIComponent(data.service)}%0A` +\r\n `\u26a1 *\u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0645\u062e\u062a\u0627\u0631\u0629:* ${encodeURIComponent(data.extras)}%0A` +\r\n `\ud83d\udcdd *\u0627\u0644\u0645\u0644\u0627\u062d\u0638\u0627\u062a:* ${encodeURIComponent(data.notes)}`;\r\n\r\n showToast(currentLanguage === 'en' ? 'Opening WhatsApp...' : '\u062c\u0627\u0631\u064a \u0641\u062a\u062d \u0645\u062d\u0627\u062f\u062b\u0629 \u0627\u0644\u0648\u0627\u062a\u0633\u0627\u0628 \u0644\u0625\u0631\u0633\u0627\u0644 \u0628\u064a\u0627\u0646\u0627\u062a \u0637\u0644\u0628\u0643...');\r\n setTimeout(() => {\r\n window.open(`https:\/\/wa.me\/213000000000?text=${waMsg}`, '_blank');\r\n }, 500);\r\n }\r\n\r\n function submitViaEmail() {\r\n const data = gatherOrderData();\r\n if (!data) return;\r\n\r\n const subject = encodeURIComponent(`\u0637\u0644\u0628 \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0645\u0648\u0642\u0639: ${data.service} - ${data.name}`);\r\n const body = encodeURIComponent(\r\n `\u062a\u0641\u0627\u0635\u064a\u0644 \u0637\u0644\u0628 \u0627\u0644\u062e\u062f\u0645\u0629 \u0645\u0646 \u0635\u0641\u062d\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 (BaderInfo):\\n\\n` +\r\n `\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644: ${data.name}\\n` +\r\n `\u0627\u0644\u0647\u0627\u062a\u0641: ${data.phone}\\n` +\r\n `\u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a: ${data.email}\\n` +\r\n `\u0627\u0644\u0648\u0644\u0627\u064a\u0629 \/ \u0627\u0644\u0645\u062f\u064a\u0646\u0629: ${data.city}\\n` +\r\n `\u0627\u0644\u062e\u062f\u0645\u0629 \u0648\u0627\u0644\u0641\u0631\u0639: ${data.service}\\n` +\r\n `\u0627\u0644\u0645\u064a\u0632\u0627\u062a \u0627\u0644\u0625\u0636\u0627\u0641\u064a\u0629: ${data.extras}\\n\\n` +\r\n `\u0645\u0644\u0627\u062d\u0638\u0627\u062a \u0625\u0636\u0627\u0641\u064a\u0629:\\n${data.notes}\\n`\r\n );\r\n\r\n showToast(currentLanguage === 'en' ? 'Redirecting to email...' : '\u062c\u0627\u0631\u064a \u062a\u0648\u062c\u064a\u0647\u0643 \u0644\u0628\u0631\u0646\u0627\u0645\u062c \u0627\u0644\u0628\u0631\u064a\u062f \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a...');\r\n setTimeout(() => {\r\n window.location.href = `mailto:contact@baderinfo.com?subject=${subject}&body=${body}`;\r\n }, 500);\r\n }\r\n\r\n function showToast(message, type = 'success') {\r\n const toast = document.getElementById('app-toast');\r\n const text = document.getElementById('toast-msg');\r\n const icon = document.getElementById('toast-icon');\r\n\r\n text.innerText = message;\r\n if (type === 'warning') {\r\n icon.className = 'fa-solid fa-triangle-exclamation text-amber-400 text-base';\r\n } else {\r\n icon.className = 'fa-solid fa-circle-check text-bader-cyan text-base';\r\n }\r\n\r\n toast.classList.remove('translate-y-28', 'opacity-0');\r\n setTimeout(() => {\r\n toast.classList.add('translate-y-28', 'opacity-0');\r\n }, 3500);\r\n }\r\n\r\n \/* Particles Effect on Hero *\/\r\n const canvas = document.getElementById('tech-canvas');\r\n const ctx = canvas.getContext('2d');\r\n let particlesArray = [];\r\n\r\n function resizeCanvas() {\r\n canvas.width = window.innerWidth;\r\n canvas.height = window.innerHeight;\r\n }\r\n window.addEventListener('resize', resizeCanvas);\r\n resizeCanvas();\r\n\r\n class Particle {\r\n constructor() {\r\n this.x = Math.random() * canvas.width;\r\n this.y = Math.random() * canvas.height;\r\n this.size = Math.random() * 2 + 1;\r\n this.speedX = (Math.random() - 0.5) * 0.7;\r\n this.speedY = (Math.random() - 0.5) * 0.7;\r\n }\r\n update() {\r\n this.x += this.speedX;\r\n this.y += this.speedY;\r\n if (this.x > canvas.width || this.x < 0) this.speedX = -this.speedX;\r\n if (this.y > canvas.height || this.y < 0) this.speedY = -this.speedY;\r\n }\r\n draw() {\r\n const isDark = document.body.classList.contains('dark');\r\n ctx.fillStyle = isDark ? 'rgba(0, 194, 255, 0.75)' : 'rgba(0, 140, 200, 0.5)';\r\n ctx.beginPath();\r\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\r\n ctx.fill();\r\n }\r\n }\r\n\r\n function initParticles() {\r\n particlesArray = [];\r\n const numberOfParticles = Math.min(Math.floor(window.innerWidth \/ 20), 50);\r\n for (let i = 0; i < numberOfParticles; i++) {\r\n particlesArray.push(new Particle());\r\n }\r\n }\r\n initParticles();\r\n\r\n function animateParticles() {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n particlesArray.forEach(p => {\r\n p.update();\r\n p.draw();\r\n });\r\n requestAnimationFrame(animateParticles);\r\n }\r\n animateParticles();\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>BaderInfo | \u062e\u062f\u0645\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0648\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u0648\u0627\u0642\u0639 \u0648\u0627\u0644\u0645\u062a\u0627\u062c\u0631 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"bsp-landing","meta":{"_templately_pack_id":"","_templately_imported_at":"","_templately_source":"","_templately_import_session_id":"","site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2516","page","type-page","status-publish","hentry"],"lang":"en","translations":{"en":2516},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/pages\/2516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/baderinfo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2516"}],"version-history":[{"count":4,"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/pages\/2516\/revisions"}],"predecessor-version":[{"id":2520,"href":"https:\/\/baderinfo.com\/index.php?rest_route=\/wp\/v2\/pages\/2516\/revisions\/2520"}],"wp:attachment":[{"href":"https:\/\/baderinfo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}