{"id":29,"date":"2023-04-20T11:47:20","date_gmt":"2023-04-20T11:47:20","guid":{"rendered":"https:\/\/dummy.xtemos.com\/woodmart2\/furniture2-elementor\/?page_id=29"},"modified":"2026-10-01T23:26:18","modified_gmt":"2026-10-01T19:56:18","slug":"contact-us","status":"publish","type":"page","link":"https:\/\/lumenelectric.ir\/?page_id=29","title":{"rendered":"\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"29\" class=\"elementor elementor-29\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3602e0e e-con e-atomic-element e-flexbox-base e-default-div e-052f44e \" data-id=\"3602e0e\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3602e0e\" data-e-type=\"e-flexbox\" data-id=\"3602e0e\">\n    <div class=\"wd-negative-gap elementor-element elementor-element-db01d74 e-flex e-con-boxed e-con e-parent\" data-id=\"db01d74\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-75851b9 elementor-widget elementor-widget-html\" data-id=\"75851b9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fa\" dir=\"rtl\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 | \u0644\u0648\u0645\u0646 \u0627\u0644\u06a9\u062a\u0631\u06cc\u06a9<\/title>\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        \/* ===== RESET & BASE ===== *\/\r\n        *, *::before, *::after {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        body {\r\n            font-family: 'Vazirmatn', sans-serif;\r\n            background: #0a0a0a;\r\n            color: #ffffff;\r\n            min-height: 100vh;\r\n            overflow-x: hidden;\r\n            position: relative;\r\n        }\r\n\r\n        \/* ===== BACKGROUND GRID PATTERN ===== *\/\r\n        .bg-grid {\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-image: \r\n                linear-gradient(rgba(255, 200, 0, 0.03) 1px, transparent 1px),\r\n                linear-gradient(90deg, rgba(255, 200, 0, 0.03) 1px, transparent 1px);\r\n            background-size: 50px 50px;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* ===== FLOATING ELECTRIC PARTICLES ===== *\/\r\n        .particles-container {\r\n            position: fixed;\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            overflow: hidden;\r\n        }\r\n\r\n        .particle {\r\n            position: absolute;\r\n            width: 3px;\r\n            height: 3px;\r\n            background: #ffd700;\r\n            border-radius: 50%;\r\n            box-shadow: 0 0 6px #ffd700, 0 0 12px #ffa500;\r\n            animation: floatParticle linear infinite;\r\n            opacity: 0;\r\n        }\r\n\r\n        .particle:nth-child(1) { left: 10%; animation-duration: 8s; animation-delay: 0s; }\r\n        .particle:nth-child(2) { left: 20%; animation-duration: 10s; animation-delay: 1s; }\r\n        .particle:nth-child(3) { left: 30%; animation-duration: 7s; animation-delay: 2s; }\r\n        .particle:nth-child(4) { left: 40%; animation-duration: 9s; animation-delay: 0.5s; }\r\n        .particle:nth-child(5) { left: 50%; animation-duration: 11s; animation-delay: 3s; }\r\n        .particle:nth-child(6) { left: 60%; animation-duration: 8s; animation-delay: 1.5s; }\r\n        .particle:nth-child(7) { left: 70%; animation-duration: 10s; animation-delay: 2.5s; }\r\n        .particle:nth-child(8) { left: 80%; animation-duration: 7s; animation-delay: 0.8s; }\r\n        .particle:nth-child(9) { left: 90%; animation-duration: 9s; animation-delay: 3.5s; }\r\n        .particle:nth-child(10) { left: 15%; animation-duration: 12s; animation-delay: 4s; }\r\n        .particle:nth-child(11) { left: 35%; animation-duration: 6s; animation-delay: 1.2s; }\r\n        .particle:nth-child(12) { left: 55%; animation-duration: 13s; animation-delay: 2.8s; }\r\n        .particle:nth-child(13) { left: 75%; animation-duration: 8s; animation-delay: 0.3s; }\r\n        .particle:nth-child(14) { left: 85%; animation-duration: 10s; animation-delay: 3.2s; }\r\n        .particle:nth-child(15) { left: 5%; animation-duration: 9s; animation-delay: 1.8s; }\r\n        .particle:nth-child(16) { left: 45%; animation-duration: 11s; animation-delay: 4.5s; }\r\n        .particle:nth-child(17) { left: 65%; animation-duration: 7s; animation-delay: 0.6s; }\r\n        .particle:nth-child(18) { left: 25%; animation-duration: 14s; animation-delay: 2.2s; }\r\n        .particle:nth-child(19) { left: 95%; animation-duration: 8s; animation-delay: 3.8s; }\r\n        .particle:nth-child(20) { left: 48%; animation-duration: 10s; animation-delay: 1.4s; }\r\n\r\n        @keyframes floatParticle {\r\n            0% { transform: translateY(100vh) scale(0); opacity: 0; }\r\n            10% { opacity: 1; }\r\n            90% { opacity: 1; }\r\n            100% { transform: translateY(-20px) scale(1); opacity: 0; }\r\n        }\r\n\r\n        \/* ===== STRING LIGHTS (\u0631\u06cc\u0633\u0647) ===== *\/\r\n        .string-lights-wrapper {\r\n            position: relative;\r\n            width: 100%;\r\n            padding-top: 20px;\r\n            z-index: 2;\r\n        }\r\n\r\n        .string-lights {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 120px;\r\n            overflow: visible;\r\n        }\r\n\r\n        \/* Wire\/Cable *\/\r\n        .wire {\r\n            position: absolute;\r\n            top: 30px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 60px;\r\n            z-index: 1;\r\n        }\r\n\r\n        .wire svg {\r\n            width: 100%;\r\n            height: 100%;\r\n        }\r\n\r\n        .wire-path {\r\n            fill: none;\r\n            stroke: #333;\r\n            stroke-width: 2.5;\r\n            filter: drop-shadow(0 0 2px rgba(100,100,100,0.3));\r\n        }\r\n\r\n        \/* Light Bulbs *\/\r\n        .bulb-container {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            z-index: 2;\r\n        }\r\n\r\n        .bulb {\r\n            position: absolute;\r\n            width: 18px;\r\n            height: 26px;\r\n            transform: translateX(-50%);\r\n            cursor: pointer;\r\n            transition: transform 0.3s;\r\n        }\r\n\r\n        .bulb:hover {\r\n            transform: translateX(-50%) scale(1.3);\r\n        }\r\n\r\n        .bulb-cap {\r\n            position: absolute;\r\n            top: 0;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 10px;\r\n            height: 8px;\r\n            background: linear-gradient(to bottom, #666, #444);\r\n            border-radius: 2px 2px 0 0;\r\n            z-index: 2;\r\n        }\r\n\r\n        .bulb-glass {\r\n            position: absolute;\r\n            top: 7px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 16px;\r\n            height: 19px;\r\n            border-radius: 50% 50% 45% 45%;\r\n            z-index: 1;\r\n            transition: all 0.3s;\r\n        }\r\n\r\n        \/* Colors for bulbs *\/\r\n        .bulb.red .bulb-glass { background: radial-gradient(circle at 40% 35%, #ff6b6b, #cc0000); }\r\n        .bulb.yellow .bulb-glass { background: radial-gradient(circle at 40% 35%, #fff176, #ffab00); }\r\n        .bulb.blue .bulb-glass { background: radial-gradient(circle at 40% 35%, #64b5f6, #1565c0); }\r\n        .bulb.green .bulb-glass { background: radial-gradient(circle at 40% 35%, #81c784, #2e7d32); }\r\n        .bulb.orange .bulb-glass { background: radial-gradient(circle at 40% 35%, #ffcc02, #ff6d00); }\r\n        .bulb.purple .bulb-glass { background: radial-gradient(circle at 40% 35%, #ce93d8, #7b1fa2); }\r\n        .bulb.pink .bulb-glass { background: radial-gradient(circle at 40% 35%, #f48fb1, #d81b60); }\r\n        .bulb.cyan .bulb-glass { background: radial-gradient(circle at 40% 35%, #4dd0e1, #00838f); }\r\n        .bulb.white .bulb-glass { background: radial-gradient(circle at 40% 35%, #ffffff, #cfd8dc); }\r\n        .bulb.warm .bulb-glass { background: radial-gradient(circle at 40% 35%, #ffe0b2, #e65100); }\r\n\r\n        \/* Glow effect when ON *\/\r\n        .bulb.on.red .bulb-glass { box-shadow: 0 0 8px 4px rgba(255,0,0,0.6), 0 0 20px 8px rgba(255,0,0,0.3), 0 5px 15px rgba(255,0,0,0.4); }\r\n        .bulb.on.yellow .bulb-glass { box-shadow: 0 0 8px 4px rgba(255,200,0,0.6), 0 0 20px 8px rgba(255,200,0,0.3), 0 5px 15px rgba(255,200,0,0.4); }\r\n        .bulb.on.blue .bulb-glass { box-shadow: 0 0 8px 4px rgba(21,101,192,0.6), 0 0 20px 8px rgba(21,101,192,0.3), 0 5px 15px rgba(21,101,192,0.4); }\r\n        .bulb.on.green .bulb-glass { box-shadow: 0 0 8px 4px rgba(46,125,50,0.6), 0 0 20px 8px rgba(46,125,50,0.3), 0 5px 15px rgba(46,125,50,0.4); }\r\n        .bulb.on.orange .bulb-glass { box-shadow: 0 0 8px 4px rgba(255,109,0,0.6), 0 0 20px 8px rgba(255,109,0,0.3), 0 5px 15px rgba(255,109,0,0.4); }\r\n        .bulb.on.purple .bulb-glass { box-shadow: 0 0 8px 4px rgba(123,31,162,0.6), 0 0 20px 8px rgba(123,31,162,0.3), 0 5px 15px rgba(123,31,162,0.4); }\r\n        .bulb.on.pink .bulb-glass { box-shadow: 0 0 8px 4px rgba(216,27,96,0.6), 0 0 20px 8px rgba(216,27,96,0.3), 0 5px 15px rgba(216,27,96,0.4); }\r\n        .bulb.on.cyan .bulb-glass { box-shadow: 0 0 8px 4px rgba(0,131,143,0.6), 0 0 20px 8px rgba(0,131,143,0.3), 0 5px 15px rgba(0,131,143,0.4); }\r\n        .bulb.on.white .bulb-glass { box-shadow: 0 0 8px 4px rgba(255,255,255,0.6), 0 0 20px 8px rgba(255,255,255,0.3), 0 5px 15px rgba(255,255,255,0.4); }\r\n        .bulb.on.warm .bulb-glass { box-shadow: 0 0 8px 4px rgba(230,81,0,0.6), 0 0 20px 8px rgba(230,81,0,0.3), 0 5px 15px rgba(230,81,0,0.4); }\r\n\r\n        \/* Bulb OFF dim state *\/\r\n        .bulb:not(.on) .bulb-glass {\r\n            filter: brightness(0.25);\r\n            box-shadow: none;\r\n        }\r\n\r\n        \/* ===== SECOND ROW STRING LIGHTS ===== *\/\r\n        .string-lights-bottom {\r\n            position: relative;\r\n            width: 100%;\r\n            margin-top: -10px;\r\n            z-index: 2;\r\n        }\r\n\r\n        \/* ===== MAIN CONTAINER ===== *\/\r\n        .contact-page {\r\n            position: relative;\r\n            z-index: 1;\r\n            max-width: 1200px;\r\n            margin: 0 auto;\r\n            padding: 0 20px 60px;\r\n        }\r\n\r\n        \/* ===== PAGE TITLE ===== *\/\r\n        .page-title {\r\n            text-align: center;\r\n            margin-bottom: 15px;\r\n            padding-top: 10px;\r\n        }\r\n\r\n        .page-title h1 {\r\n            font-size: 3rem;\r\n            font-weight: 900;\r\n            background: linear-gradient(135deg, #ffd700, #ffab00, #ff8f00, #ffd700);\r\n            background-size: 300% 300%;\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            animation: shimmerGold 4s ease infinite;\r\n            text-shadow: none;\r\n            position: relative;\r\n            display: inline-block;\r\n        }\r\n\r\n        @keyframes shimmerGold {\r\n            0%, 100% { background-position: 0% 50%; }\r\n            50% { background-position: 100% 50%; }\r\n        }\r\n\r\n        .page-title h1::after {\r\n            content: '\u26a1';\r\n            -webkit-text-fill-color: initial;\r\n            margin-right: 10px;\r\n            font-size: 2.5rem;\r\n            animation: electricPulse 1.5s ease-in-out infinite;\r\n        }\r\n\r\n        .page-title h1::before {\r\n            content: '\u26a1';\r\n            -webkit-text-fill-color: initial;\r\n            margin-left: 10px;\r\n            font-size: 2.5rem;\r\n            animation: electricPulse 1.5s ease-in-out infinite 0.75s;\r\n        }\r\n\r\n        @keyframes electricPulse {\r\n            0%, 100% { opacity: 0.4; transform: scale(0.9); }\r\n            50% { opacity: 1; transform: scale(1.1); }\r\n        }\r\n\r\n        .page-subtitle {\r\n            text-align: center;\r\n            color: rgba(255, 215, 0, 0.6);\r\n            font-size: 1rem;\r\n            font-weight: 300;\r\n            margin-bottom: 50px;\r\n            letter-spacing: 2px;\r\n        }\r\n\r\n        \/* ===== DECORATIVE LINE ===== *\/\r\n        .decorative-line {\r\n            width: 120px;\r\n            height: 2px;\r\n            background: linear-gradient(90deg, transparent, #ffd700, transparent);\r\n            margin: 15px auto 10px;\r\n            position: relative;\r\n        }\r\n\r\n        .decorative-line::before {\r\n            content: '\ud83d\udca1';\r\n            position: absolute;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%);\r\n            font-size: 1.2rem;\r\n            animation: glowIcon 2s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes glowIcon {\r\n            0%, 100% { filter: brightness(0.8); }\r\n            50% { filter: brightness(1.5) drop-shadow(0 0 8px #ffd700); }\r\n        }\r\n\r\n        \/* ===== CONTENT GRID ===== *\/\r\n        .content-grid {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 40px;\r\n            align-items: start;\r\n        }\r\n\r\n        \/* ===== CONTACT INFO SECTION ===== *\/\r\n        .contact-info-section {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 20px;\r\n        }\r\n\r\n        \/* Info Card *\/\r\n        .info-card {\r\n            background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(30, 30, 30, 0.9));\r\n            border: 1px solid rgba(255, 215, 0, 0.15);\r\n            border-radius: 16px;\r\n            padding: 24px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        .info-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.05), transparent);\r\n            transition: left 0.6s;\r\n        }\r\n\r\n        .info-card:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        .info-card:hover {\r\n            border-color: rgba(255, 215, 0, 0.4);\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 10px 40px rgba(255, 215, 0, 0.1);\r\n        }\r\n\r\n        \/* Electric corner accents *\/\r\n        .info-card::after {\r\n            content: '';\r\n            position: absolute;\r\n            top: -1px;\r\n            right: -1px;\r\n            width: 30px;\r\n            height: 30px;\r\n            border-top: 2px solid #ffd700;\r\n            border-right: 2px solid #ffd700;\r\n            border-radius: 0 16px 0 0;\r\n            opacity: 0.5;\r\n            transition: opacity 0.3s;\r\n        }\r\n\r\n        .info-card:hover::after {\r\n            opacity: 1;\r\n            box-shadow: 3px -3px 10px rgba(255, 215, 0, 0.3);\r\n        }\r\n\r\n        .card-header {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 15px;\r\n            margin-bottom: 12px;\r\n        }\r\n\r\n        .card-icon {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 12px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.5rem;\r\n            flex-shrink: 0;\r\n            position: relative;\r\n        }\r\n\r\n        .card-icon.manager-icon {\r\n            background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 152, 0, 0.1));\r\n            border: 1px solid rgba(255, 215, 0, 0.3);\r\n        }\r\n\r\n        .card-icon.phone-icon {\r\n            background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(56, 142, 60, 0.1));\r\n            border: 1px solid rgba(76, 175, 80, 0.3);\r\n        }\r\n\r\n        .card-icon.address-icon {\r\n            background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(25, 118, 210, 0.1));\r\n            border: 1px solid rgba(33, 150, 243, 0.3);\r\n        }\r\n\r\n        .card-icon.website-icon {\r\n            background: linear-gradient(135deg, rgba(156, 39, 176, 0.2), rgba(123, 31, 162, 0.1));\r\n            border: 1px solid rgba(156, 39, 176, 0.3);\r\n        }\r\n\r\n        \/* Icon pulse ring *\/\r\n        .card-icon::after {\r\n            content: '';\r\n            position: absolute;\r\n            inset: -3px;\r\n            border-radius: 14px;\r\n            border: 1px solid rgba(255, 215, 0, 0.2);\r\n            animation: iconRing 3s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes iconRing {\r\n            0%, 100% { opacity: 0; transform: scale(1); }\r\n            50% { opacity: 0.5; transform: scale(1.08); }\r\n        }\r\n\r\n        .card-label {\r\n            font-size: 0.85rem;\r\n            color: rgba(255, 215, 0, 0.7);\r\n            font-weight: 500;\r\n            letter-spacing: 1px;\r\n        }\r\n\r\n        .card-value {\r\n            font-size: 1.1rem;\r\n            color: #e0e0e0;\r\n            font-weight: 600;\r\n            margin-top: 4px;\r\n            line-height: 1.6;\r\n        }\r\n\r\n        .card-value a {\r\n            color: #e0e0e0;\r\n            text-decoration: none;\r\n            transition: color 0.3s;\r\n            position: relative;\r\n        }\r\n\r\n        .card-value a:hover {\r\n            color: #ffd700;\r\n        }\r\n\r\n        .card-value a::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -2px;\r\n            right: 0;\r\n            width: 0;\r\n            height: 1px;\r\n            background: #ffd700;\r\n            transition: width 0.3s;\r\n        }\r\n\r\n        .card-value a:hover::after {\r\n            width: 100%;\r\n        }\r\n\r\n        .phone-numbers {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 8px;\r\n        }\r\n\r\n        .phone-number {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            direction: ltr;\r\n            text-align: right;\r\n            justify-content: flex-end;\r\n        }\r\n\r\n        .phone-number .phone-dot {\r\n            width: 6px;\r\n            height: 6px;\r\n            border-radius: 50%;\r\n            background: #ffd700;\r\n            animation: dotPulse 2s ease-in-out infinite;\r\n            flex-shrink: 0;\r\n        }\r\n\r\n        @keyframes dotPulse {\r\n            0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4); }\r\n            50% { box-shadow: 0 0 0 4px rgba(255, 215, 0, 0); }\r\n        }\r\n\r\n        \/* ===== MAP Card ===== *\/\r\n        .map-card {\r\n            background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(30, 30, 30, 0.9));\r\n            border: 1px solid rgba(255, 215, 0, 0.15);\r\n            border-radius: 16px;\r\n            padding: 4px;\r\n            overflow: hidden;\r\n            margin-top: 0;\r\n            transition: all 0.4s;\r\n        }\r\n\r\n        .map-card:hover {\r\n            border-color: rgba(255, 215, 0, 0.4);\r\n            box-shadow: 0 10px 40px rgba(255, 215, 0, 0.1);\r\n        }\r\n\r\n        .map-card iframe {\r\n            width: 100%;\r\n            height: 200px;\r\n            border: none;\r\n            border-radius: 14px;\r\n            filter: grayscale(0.6) brightness(0.7) contrast(1.2);\r\n            transition: filter 0.4s;\r\n        }\r\n\r\n        .map-card:hover iframe {\r\n            filter: grayscale(0.3) brightness(0.8) contrast(1.1);\r\n        }\r\n\r\n        \/* ===== CONTACT FORM SECTION ===== *\/\r\n        .contact-form-section {\r\n            background: linear-gradient(145deg, rgba(20, 20, 20, 0.95), rgba(25, 25, 25, 0.95));\r\n            border: 1px solid rgba(255, 215, 0, 0.15);\r\n            border-radius: 20px;\r\n            padding: 35px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            backdrop-filter: blur(10px);\r\n        }\r\n\r\n        \/* Corner electric sparks *\/\r\n        .contact-form-section .spark {\r\n            position: absolute;\r\n            width: 4px;\r\n            height: 4px;\r\n            background: #ffd700;\r\n            border-radius: 50%;\r\n        }\r\n\r\n        .spark-1 {\r\n            top: 20px;\r\n            left: 20px;\r\n            animation: sparkAnim 3s ease-in-out infinite;\r\n        }\r\n\r\n        .spark-2 {\r\n            top: 20px;\r\n            right: 20px;\r\n            animation: sparkAnim 3s ease-in-out infinite 1s;\r\n        }\r\n\r\n        .spark-3 {\r\n            bottom: 20px;\r\n            left: 20px;\r\n            animation: sparkAnim 3s ease-in-out infinite 2s;\r\n        }\r\n\r\n        .spark-4 {\r\n            bottom: 20px;\r\n            right: 20px;\r\n            animation: sparkAnim 3s ease-in-out infinite 0.5s;\r\n        }\r\n\r\n        @keyframes sparkAnim {\r\n            0%, 100% { opacity: 0; box-shadow: 0 0 2px #ffd700; transform: scale(0.5); }\r\n            50% { opacity: 1; box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255, 215, 0, 0.5); transform: scale(1.5); }\r\n        }\r\n\r\n        .form-title {\r\n            text-align: center;\r\n            margin-bottom: 30px;\r\n        }\r\n\r\n        .form-title h2 {\r\n            font-size: 1.5rem;\r\n            font-weight: 700;\r\n            color: #ffd700;\r\n            margin-bottom: 8px;\r\n        }\r\n\r\n        .form-title p {\r\n            font-size: 0.85rem;\r\n            color: rgba(255, 255, 255, 0.4);\r\n            font-weight: 300;\r\n        }\r\n\r\n        \/* Form Styles *\/\r\n        .contact-form {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 20px;\r\n        }\r\n\r\n        .form-row {\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 15px;\r\n        }\r\n\r\n        .form-group {\r\n            position: relative;\r\n        }\r\n\r\n        .form-group label {\r\n            display: block;\r\n            font-size: 0.85rem;\r\n            color: rgba(255, 215, 0, 0.7);\r\n            margin-bottom: 8px;\r\n            font-weight: 500;\r\n            transition: color 0.3s;\r\n        }\r\n\r\n        .form-group:focus-within label {\r\n            color: #ffd700;\r\n        }\r\n\r\n        .input-wrapper {\r\n            position: relative;\r\n        }\r\n\r\n        .input-wrapper .input-icon {\r\n            position: absolute;\r\n            right: 14px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            font-size: 1rem;\r\n            opacity: 0.5;\r\n            transition: opacity 0.3s;\r\n            pointer-events: none;\r\n        }\r\n\r\n        .form-group:focus-within .input-icon {\r\n            opacity: 1;\r\n        }\r\n\r\n        .form-group input,\r\n        .form-group textarea,\r\n        .form-group select {\r\n            width: 100%;\r\n            padding: 14px 45px 14px 16px;\r\n            background: rgba(255, 255, 255, 0.04);\r\n            border: 1px solid rgba(255, 215, 0, 0.12);\r\n            border-radius: 12px;\r\n            color: #ffffff;\r\n            font-family: 'Vazirmatn', sans-serif;\r\n            font-size: 0.95rem;\r\n            outline: none;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        .form-group textarea {\r\n            min-height: 130px;\r\n            resize: vertical;\r\n            padding: 14px 45px 14px 16px;\r\n        }\r\n\r\n        .form-group input:focus,\r\n        .form-group textarea:focus,\r\n        .form-group select:focus {\r\n            border-color: rgba(255, 215, 0, 0.5);\r\n            background: rgba(255, 215, 0, 0.04);\r\n            box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.08), 0 0 20px rgba(255, 215, 0, 0.05);\r\n        }\r\n\r\n        .form-group input::placeholder,\r\n        .form-group textarea::placeholder {\r\n            color: rgba(255, 255, 255, 0.2);\r\n            font-weight: 300;\r\n        }\r\n\r\n        .form-group select {\r\n            cursor: pointer;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n        }\r\n\r\n        .form-group select option {\r\n            background: #1a1a1a;\r\n            color: #fff;\r\n        }\r\n\r\n        \/* Submit Button *\/\r\n        .submit-btn {\r\n            position: relative;\r\n            padding: 16px 40px;\r\n            background: linear-gradient(135deg, #ffd700, #ff8f00);\r\n            border: none;\r\n            border-radius: 14px;\r\n            color: #000;\r\n            font-family: 'Vazirmatn', sans-serif;\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            cursor: pointer;\r\n            overflow: hidden;\r\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n            margin-top: 10px;\r\n            letter-spacing: 1px;\r\n        }\r\n\r\n        .submit-btn:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3), 0 0 60px rgba(255, 215, 0, 0.1);\r\n        }\r\n\r\n        .submit-btn:active {\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .submit-btn::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 100%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);\r\n            transition: left 0.5s;\r\n        }\r\n\r\n        .submit-btn:hover::before {\r\n            left: 100%;\r\n        }\r\n\r\n        .submit-btn span {\r\n            position: relative;\r\n            z-index: 1;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            gap: 10px;\r\n        }\r\n\r\n        \/* ===== ELECTRIC BOLT ANIMATIONS ===== *\/\r\n        .electric-bolt {\r\n            position: fixed;\r\n            z-index: 0;\r\n            pointer-events: none;\r\n            opacity: 0.04;\r\n        }\r\n\r\n        .bolt-left {\r\n            left: 20px;\r\n            top: 30%;\r\n            animation: boltFlash 5s ease-in-out infinite;\r\n        }\r\n\r\n        .bolt-right {\r\n            right: 20px;\r\n            bottom: 30%;\r\n            animation: boltFlash 5s ease-in-out infinite 2.5s;\r\n        }\r\n\r\n        @keyframes boltFlash {\r\n            0%, 100% { opacity: 0.02; }\r\n            48% { opacity: 0.02; }\r\n            50% { opacity: 0.15; }\r\n            52% { opacity: 0.02; }\r\n            54% { opacity: 0.12; }\r\n            56% { opacity: 0.02; }\r\n        }\r\n\r\n        .electric-bolt svg {\r\n            width: 80px;\r\n            height: 200px;\r\n        }\r\n\r\n        \/* ===== CABLE ANIMATION ===== *\/\r\n        .cable-decoration {\r\n            position: fixed;\r\n            bottom: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: repeating-linear-gradient(\r\n                90deg,\r\n                #333 0px,\r\n                #333 20px,\r\n                #ffd700 20px,\r\n                #ffd700 22px\r\n            );\r\n            opacity: 0.3;\r\n            z-index: 5;\r\n        }\r\n\r\n        .cable-decoration::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: -100%;\r\n            width: 50%;\r\n            height: 100%;\r\n            background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.8), transparent);\r\n            animation: cableGlow 4s linear infinite;\r\n        }\r\n\r\n        @keyframes cableGlow {\r\n            0% { left: -50%; }\r\n            100% { left: 100%; }\r\n        }\r\n\r\n        \/* ===== WORKING HOURS ===== *\/\r\n        .working-hours {\r\n            background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(30, 30, 30, 0.9));\r\n            border: 1px solid rgba(255, 215, 0, 0.15);\r\n            border-radius: 16px;\r\n            padding: 24px;\r\n            position: relative;\r\n            overflow: hidden;\r\n            transition: all 0.4s;\r\n        }\r\n\r\n        .working-hours:hover {\r\n            border-color: rgba(255, 215, 0, 0.4);\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 10px 40px rgba(255, 215, 0, 0.1);\r\n        }\r\n\r\n        .working-hours::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -1px;\r\n            left: -1px;\r\n            width: 30px;\r\n            height: 30px;\r\n            border-bottom: 2px solid #ffd700;\r\n            border-left: 2px solid #ffd700;\r\n            border-radius: 0 0 0 16px;\r\n            opacity: 0.5;\r\n            transition: opacity 0.3s;\r\n        }\r\n\r\n        .working-hours:hover::after {\r\n            opacity: 1;\r\n        }\r\n\r\n        .hours-header {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            margin-bottom: 16px;\r\n        }\r\n\r\n        .hours-icon {\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 12px;\r\n            background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 143, 0, 0.1));\r\n            border: 1px solid rgba(255, 193, 7, 0.3);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.5rem;\r\n        }\r\n\r\n        .hours-label {\r\n            font-size: 0.85rem;\r\n            color: rgba(255, 215, 0, 0.7);\r\n            font-weight: 500;\r\n            letter-spacing: 1px;\r\n        }\r\n\r\n        .hours-list {\r\n            list-style: none;\r\n        }\r\n\r\n        .hours-list li {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            padding: 10px 0;\r\n            border-bottom: 1px solid rgba(255, 255, 255, 0.04);\r\n            font-size: 0.9rem;\r\n        }\r\n\r\n        .hours-list li:last-child {\r\n            border-bottom: none;\r\n        }\r\n\r\n        .hours-list .day {\r\n            color: rgba(255, 255, 255, 0.6);\r\n        }\r\n\r\n        .hours-list .time {\r\n            color: #e0e0e0;\r\n            font-weight: 500;\r\n            direction: ltr;\r\n        }\r\n\r\n        .hours-list .closed {\r\n            color: #ef5350;\r\n            font-weight: 500;\r\n        }\r\n\r\n        .status-badge {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 6px;\r\n            padding: 4px 12px;\r\n            border-radius: 20px;\r\n            font-size: 0.75rem;\r\n            font-weight: 600;\r\n            margin-top: 12px;\r\n        }\r\n\r\n        .status-badge.open {\r\n            background: rgba(76, 175, 80, 0.15);\r\n            border: 1px solid rgba(76, 175, 80, 0.3);\r\n            color: #81c784;\r\n        }\r\n\r\n        .status-dot {\r\n            width: 7px;\r\n            height: 7px;\r\n            border-radius: 50%;\r\n            background: #4caf50;\r\n            animation: statusPulse 1.5s ease-in-out infinite;\r\n        }\r\n\r\n        @keyframes statusPulse {\r\n            0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5); }\r\n            50% { box-shadow: 0 0 0 5px rgba(76, 175, 80, 0); }\r\n        }\r\n\r\n        \/* ===== BOTTOM BRAND SECTION ===== *\/\r\n        .brand-section {\r\n            text-align: center;\r\n            margin-top: 50px;\r\n            padding: 30px;\r\n            position: relative;\r\n            z-index: 2;\r\n        }\r\n\r\n        .brand-logo-text {\r\n            font-size: 2rem;\r\n            font-weight: 900;\r\n            background: linear-gradient(135deg, #ffd700, #ff8f00);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            letter-spacing: 3px;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .brand-tagline {\r\n            font-size: 0.85rem;\r\n            color: rgba(255, 255, 255, 0.3);\r\n            letter-spacing: 4px;\r\n            font-weight: 300;\r\n        }\r\n\r\n        .brand-divider {\r\n            width: 60px;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, #ffd700, transparent);\r\n            margin: 15px auto;\r\n        }\r\n\r\n        \/* ===== RESPONSIVE ===== *\/\r\n        @media (max-width: 900px) {\r\n            .content-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 30px;\r\n            }\r\n\r\n            .page-title h1 {\r\n                font-size: 2.2rem;\r\n            }\r\n\r\n            .form-row {\r\n                grid-template-columns: 1fr;\r\n            }\r\n\r\n            .contact-form-section {\r\n                padding: 25px;\r\n            }\r\n\r\n            .string-lights-wrapper {\r\n                display: none;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            .page-title h1 {\r\n                font-size: 1.8rem;\r\n            }\r\n\r\n            .page-title h1::before,\r\n            .page-title h1::after {\r\n                font-size: 1.5rem;\r\n            }\r\n\r\n            .contact-page {\r\n                padding: 0 15px 40px;\r\n            }\r\n\r\n            .info-card {\r\n                padding: 18px;\r\n            }\r\n\r\n            .contact-form-section {\r\n                padding: 20px;\r\n                border-radius: 16px;\r\n            }\r\n\r\n            .brand-logo-text {\r\n                font-size: 1.5rem;\r\n            }\r\n        }\r\n\r\n        \/* ===== SCROLLBAR ===== *\/\r\n        ::-webkit-scrollbar {\r\n            width: 6px;\r\n        }\r\n\r\n        ::-webkit-scrollbar-track {\r\n            background: #0a0a0a;\r\n        }\r\n\r\n        ::-webkit-scrollbar-thumb {\r\n            background: rgba(255, 215, 0, 0.3);\r\n            border-radius: 3px;\r\n        }\r\n\r\n        ::-webkit-scrollbar-thumb:hover {\r\n            background: rgba(255, 215, 0, 0.5);\r\n        }\r\n\r\n        \/* ===== SELECTION ===== *\/\r\n        ::selection {\r\n            background: rgba(255, 215, 0, 0.3);\r\n            color: #fff;\r\n        }\r\n\r\n        \/* ===== SOCIAL LINKS ===== *\/\r\n        .social-links {\r\n            display: flex;\r\n            gap: 12px;\r\n            margin-top: 15px;\r\n            justify-content: center;\r\n        }\r\n\r\n        .social-link {\r\n            width: 42px;\r\n            height: 42px;\r\n            border-radius: 10px;\r\n            border: 1px solid rgba(255, 215, 0, 0.2);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            font-size: 1.1rem;\r\n            text-decoration: none;\r\n            transition: all 0.3s;\r\n            background: rgba(255, 255, 255, 0.02);\r\n        }\r\n\r\n        .social-link:hover {\r\n            border-color: #ffd700;\r\n            background: rgba(255, 215, 0, 0.1);\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 5px 15px rgba(255, 215, 0, 0.15);\r\n        }\r\n\r\n        \/* ===== MOBILE STRING LIGHTS REPLACEMENT ===== *\/\r\n        .mobile-glow-bar {\r\n            display: none;\r\n            width: 100%;\r\n            height: 4px;\r\n            background: linear-gradient(90deg, \r\n                #ff0000, #ffd700, #00ff00, #0088ff, #ff00ff, \r\n                #ff0000, #ffd700, #00ff00, #0088ff, #ff00ff\r\n            );\r\n            background-size: 200% 100%;\r\n            animation: glowBarMove 3s linear infinite;\r\n            border-radius: 2px;\r\n            margin-bottom: 20px;\r\n            box-shadow: 0 0 10px rgba(255, 215, 0, 0.3), 0 0 20px rgba(255, 215, 0, 0.1);\r\n        }\r\n\r\n        @keyframes glowBarMove {\r\n            0% { background-position: 0% 50%; }\r\n            100% { background-position: 200% 50%; }\r\n        }\r\n\r\n        @media (max-width: 900px) {\r\n            .mobile-glow-bar {\r\n                display: block;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <!-- Background Grid -->\r\n    <div class=\"bg-grid\"><\/div>\r\n\r\n    <!-- Floating Particles -->\r\n    <div class=\"particles-container\">\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n        <div class=\"particle\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Electric Bolt Decorations -->\r\n    <div class=\"electric-bolt bolt-left\">\r\n        <svg viewBox=\"0 0 80 200\">\r\n            <path d=\"M40 0 L50 60 L35 65 L55 130 L30 135 L50 200\" \r\n                  stroke=\"#ffd700\" stroke-width=\"2\" fill=\"none\" opacity=\"0.6\"\/>\r\n            <path d=\"M40 0 L50 60 L35 65 L55 130 L30 135 L50 200\" \r\n                  stroke=\"#fff\" stroke-width=\"0.5\" fill=\"none\" opacity=\"0.3\"\/>\r\n        <\/svg>\r\n    <\/div>\r\n    <div class=\"electric-bolt bolt-right\">\r\n        <svg viewBox=\"0 0 80 200\">\r\n            <path d=\"M40 0 L30 70 L45 75 L25 140 L50 145 L30 200\" \r\n                  stroke=\"#ffd700\" stroke-width=\"2\" fill=\"none\" opacity=\"0.6\"\/>\r\n            <path d=\"M40 0 L30 70 L45 75 L25 140 L50 145 L30 200\" \r\n                  stroke=\"#fff\" stroke-width=\"0.5\" fill=\"none\" opacity=\"0.3\"\/>\r\n        <\/svg>\r\n    <\/div>\r\n\r\n    <!-- ===== STRING LIGHTS (\u0631\u06cc\u0633\u0647 \u0628\u0627\u0644\u0627) ===== -->\r\n    <div class=\"string-lights-wrapper\">\r\n        <div class=\"string-lights\">\r\n            <!-- Wire SVG -->\r\n            <div class=\"wire\">\r\n                <svg viewBox=\"0 0 1200 60\" preserveAspectRatio=\"none\">\r\n                    <path class=\"wire-path\" \r\n                          d=\"M0,5 Q60,5 75,25 Q90,45 120,45 Q150,45 165,25 Q180,5 210,5 Q240,5 255,25 Q270,45 300,45 Q330,45 345,25 Q360,5 390,5 Q420,5 435,25 Q450,45 480,45 Q510,45 525,25 Q540,5 570,5 Q600,5 615,25 Q630,45 660,45 Q690,45 705,25 Q720,5 750,5 Q780,5 795,25 Q810,45 840,45 Q870,45 885,25 Q900,5 930,5 Q960,5 975,25 Q990,45 1020,45 Q1050,45 1065,25 Q1080,5 1110,5 Q1140,5 1155,25 Q1170,45 1200,45\"\/>\r\n                <\/svg>\r\n            <\/div>\r\n\r\n            <!-- Bulbs -->\r\n            <div class=\"bulb-container\" id=\"bulbContainer1\">\r\n                <!-- Bulbs will be generated by JS -->\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Page Content -->\r\n    <div class=\"contact-page\">\r\n\r\n        <!-- Mobile glow bar -->\r\n        <div class=\"mobile-glow-bar\"><\/div>\r\n\r\n        <!-- Page Title -->\r\n        <div class=\"page-title\">\r\n            <h1>\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/h1>\r\n            <div class=\"decorative-line\"><\/div>\r\n        <\/div>\r\n        <p class=\"page-subtitle\">\u0644\u0648\u0645\u0646 \u0627\u0644\u06a9\u062a\u0631\u06cc\u06a9 &bull; \u0631\u0648\u0634\u0646\u0627\u06cc\u06cc &bull; \u0633\u06cc\u0645 \u0648 \u06a9\u0627\u0628\u0644<\/p>\r\n\r\n        <!-- Content Grid -->\r\n        <div class=\"content-grid\">\r\n\r\n            <!-- Left: Contact Info -->\r\n            <div class=\"contact-info-section\">\r\n\r\n                <!-- Manager Card -->\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-header\">\r\n                        <div class=\"card-icon manager-icon\">\ud83d\udc64<\/div>\r\n                        <div>\r\n                            <div class=\"card-label\">\u0645\u062f\u06cc\u0631\u06cc\u062a<\/div>\r\n                            <div class=\"card-value\">\u0622\u0642\u0627\u06cc \u0633\u0639\u06cc\u062f\u06cc \u062e\u0648\u0627\u0647<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Phone Card -->\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-header\">\r\n                        <div class=\"card-icon phone-icon\">\ud83d\udcde<\/div>\r\n                        <div style=\"flex:1\">\r\n                            <div class=\"card-label\">\u0634\u0645\u0627\u0631\u0647 \u062a\u0645\u0627\u0633<\/div>\r\n                            <div class=\"card-value\">\r\n                                <div class=\"phone-numbers\">\r\n                                    <div class=\"phone-number\">\r\n                                        <a href=\"tel:09386566099\">0938 656 6099<\/a>\r\n                                        <span class=\"phone-dot\"><\/span>\r\n                                    <\/div>\r\n                                    <div class=\"phone-number\">\r\n                                        <a href=\"tel:09043293869\">0904 329 3869<\/a>\r\n                                        <span class=\"phone-dot\"><\/span>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Address Card -->\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-header\">\r\n                        <div class=\"card-icon address-icon\">\ud83d\udccd<\/div>\r\n                        <div>\r\n                            <div class=\"card-label\">\u0622\u062f\u0631\u0633<\/div>\r\n                            <div class=\"card-value\">\u062a\u0647\u0631\u0627\u0646\u060c \u0644\u0627\u0644\u0647\u200c\u0632\u0627\u0631<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Website Card -->\r\n                <div class=\"info-card\">\r\n                    <div class=\"card-header\">\r\n                        <div class=\"card-icon website-icon\">\ud83c\udf10<\/div>\r\n                        <div>\r\n                            <div class=\"card-label\">\u0648\u0628\u200c\u0633\u0627\u06cc\u062a<\/div>\r\n                            <div class=\"card-value\">\r\n                                <a href=\"https:\/\/lumenelectric.ir\/\" target=\"_blank\">lumenelectric.ir<\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Working Hours -->\r\n                <div class=\"working-hours\">\r\n                    <div class=\"hours-header\">\r\n                        <div class=\"hours-icon\">\ud83d\udd50<\/div>\r\n                        <div>\r\n                            <div class=\"hours-label\">\u0633\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u06cc<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <ul class=\"hours-list\">\r\n                        <li>\r\n                            <span class=\"day\">\u0634\u0646\u0628\u0647 \u062a\u0627 \u0686\u0647\u0627\u0631\u0634\u0646\u0628\u0647<\/span>\r\n                            <span class=\"time\">9:00 - 18:00<\/span>\r\n                        <\/li>\r\n                        <li>\r\n                            <span class=\"day\">\u067e\u0646\u062c\u200c\u0634\u0646\u0628\u0647<\/span>\r\n                            <span class=\"time\">9:00 - 14:00<\/span>\r\n                        <\/li>\r\n                        <li>\r\n                            <span class=\"day\">\u062c\u0645\u0639\u0647<\/span>\r\n                            <span class=\"closed\">\u062a\u0639\u0637\u06cc\u0644<\/span>\r\n                        <\/li>\r\n                    <\/ul>\r\n                    <div class=\"status-badge open\">\r\n                        <span class=\"status-dot\"><\/span>\r\n                        \u0622\u0645\u0627\u062f\u0647 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0647\u0633\u062a\u06cc\u0645\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Map -->\r\n                <div class=\"map-card\">\r\n                    <iframe \r\n                        src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d3239.9!2d51.4215!3d35.6892!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzXCsDQxJzIxLjEiTiA1McKwMjUnMTcuNCJF!5e0!3m2!1sfa!2sir!4v1\"\r\n                        allowfullscreen=\"\" \r\n                        loading=\"lazy\">\r\n                    <\/iframe>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Right: Contact Form -->\r\n            <div class=\"contact-form-section\">\r\n                <div class=\"spark spark-1\"><\/div>\r\n                <div class=\"spark spark-2\"><\/div>\r\n                <div class=\"spark spark-3\"><\/div>\r\n                <div class=\"spark spark-4\"><\/div>\r\n\r\n                <div class=\"form-title\">\r\n                    <h2>\ud83d\udce8 \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645<\/h2>\r\n                    <p>\u0641\u0631\u0645 \u0632\u06cc\u0631 \u0631\u0627 \u067e\u0631 \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631 \u0627\u0633\u0631\u0639 \u0648\u0642\u062a \u067e\u0627\u0633\u062e\u06af\u0648 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0648\u062f<\/p>\r\n                <\/div>\r\n\r\n                <form class=\"contact-form\" onsubmit=\"return handleSubmit(event)\">\r\n                    <div class=\"form-row\">\r\n                        <div class=\"form-group\">\r\n                            <label>\u0646\u0627\u0645 \u0648 \u0646\u0627\u0645 \u062e\u0627\u0646\u0648\u0627\u062f\u06af\u06cc<\/label>\r\n                            <div class=\"input-wrapper\">\r\n                                <span class=\"input-icon\">\ud83d\udc64<\/span>\r\n                                <input type=\"text\" placeholder=\"\u0646\u0627\u0645 \u0634\u0645\u0627...\" required>\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"form-group\">\r\n                            <label>\u0634\u0645\u0627\u0631\u0647 \u062a\u0645\u0627\u0633<\/label>\r\n                            <div class=\"input-wrapper\">\r\n                                <span class=\"input-icon\">\ud83d\udcf1<\/span>\r\n                                <input type=\"tel\" placeholder=\"09xxxxxxxxx\" required dir=\"ltr\" style=\"text-align:right\">\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"form-group\">\r\n                        <label>\u0627\u06cc\u0645\u06cc\u0644 (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)<\/label>\r\n                        <div class=\"input-wrapper\">\r\n                            <span class=\"input-icon\">\u2709\ufe0f<\/span>\r\n                            <input type=\"email\" placeholder=\"example@email.com\" dir=\"ltr\" style=\"text-align:right\">\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"form-group\">\r\n                        <label>\u0645\u0648\u0636\u0648\u0639<\/label>\r\n                        <div class=\"input-wrapper\">\r\n                            <span class=\"input-icon\">\ud83d\udccb<\/span>\r\n                            <select required>\r\n                                <option value=\"\" disabled selected>\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f...<\/option>\r\n                                <option value=\"buy\">\u0627\u0633\u062a\u0639\u0644\u0627\u0645 \u0642\u06cc\u0645\u062a<\/option>\r\n                                <option value=\"order\">\u067e\u06cc\u06af\u06cc\u0631\u06cc \u0633\u0641\u0627\u0631\u0634<\/option>\r\n                                <option value=\"wholesale\">\u062e\u0631\u06cc\u062f \u0639\u0645\u062f\u0647<\/option>\r\n                                <option value=\"consult\">\u0645\u0634\u0627\u0648\u0631\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0631\u0648\u0634\u0646\u0627\u06cc\u06cc<\/option>\r\n                                <option value=\"cable\">\u0645\u0634\u0627\u0648\u0631\u0647 \u0633\u06cc\u0645 \u0648 \u06a9\u0627\u0628\u0644<\/option>\r\n                                <option value=\"cooperation\">\u0647\u0645\u06a9\u0627\u0631\u06cc<\/option>\r\n                                <option value=\"complaint\">\u0634\u06a9\u0627\u06cc\u0627\u062a \u0648 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f\u0627\u062a<\/option>\r\n                                <option value=\"other\">\u0633\u0627\u06cc\u0631 \u0645\u0648\u0627\u0631\u062f<\/option>\r\n                            <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"form-group\">\r\n                        <label>\u0645\u062a\u0646 \u067e\u06cc\u0627\u0645<\/label>\r\n                        <div class=\"input-wrapper\">\r\n                            <span class=\"input-icon\" style=\"top:18px;transform:none\">\ud83d\udcac<\/span>\r\n                            <textarea placeholder=\"\u067e\u06cc\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f...\" required><\/textarea>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <button type=\"submit\" class=\"submit-btn\">\r\n                        <span>\u26a1 \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645<\/span>\r\n                    <\/button>\r\n                <\/form>\r\n\r\n                <!-- Social Links -->\r\n                <div style=\"margin-top:25px; text-align:center;\">\r\n                    <p style=\"font-size:0.8rem; color:rgba(255,255,255,0.3); margin-bottom:12px;\">\u0627\u0631\u062a\u0628\u0627\u0637 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc<\/p>\r\n                    <div class=\"social-links\">\r\n                        <a href=\"https:\/\/wa.me\/989386566099\" class=\"social-link\" title=\"\u0648\u0627\u062a\u0633\u0627\u067e\" target=\"_blank\" rel=\"noopener\">\ud83d\udcac<\/a>\r\n                        <a href=\"tel:09386566099\" class=\"social-link\" title=\"\u062a\u0645\u0627\u0633 \u0645\u0633\u062a\u0642\u06cc\u0645\">\ud83d\udcde<\/a>\r\n                        <a href=\"https:\/\/lumenelectric.ir\/\" class=\"social-link\" title=\"\u0648\u0628\u200c\u0633\u0627\u06cc\u062a\" target=\"_blank\">\ud83c\udf10<\/a>\r\n                        <a href=\"sms:09386566099\" class=\"social-link\" title=\"\u067e\u06cc\u0627\u0645\u06a9\">\ud83d\udcf1<\/a>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Brand Section -->\r\n        <div class=\"brand-section\">\r\n            <div class=\"brand-divider\"><\/div>\r\n            <div class=\"brand-logo-text\">LUMEN ELECTRIC<\/div>\r\n            <div class=\"brand-tagline\">\u0631\u0648\u0634\u0646\u0627\u06cc\u06cc &bull; \u0633\u06cc\u0645 \u0648 \u06a9\u0627\u0628\u0644 &bull; \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u0627\u0644\u06a9\u062a\u0631\u06cc\u06a9\u06cc<\/div>\r\n            <div class=\"brand-divider\"><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Cable Decoration Bottom -->\r\n    <div class=\"cable-decoration\"><\/div>\r\n\r\n    <!-- ===== JAVASCRIPT ===== -->\r\n    <script>\r\n        \/\/ ===== Generate String Light Bulbs =====\r\n        const colors = ['red', 'yellow', 'blue', 'green', 'orange', 'purple', 'pink', 'cyan', 'white', 'warm'];\r\n        \r\n        function createBulbs(containerId, count) {\r\n            const container = document.getElementById(containerId);\r\n            if (!container) return;\r\n            \r\n            const bulbs = [];\r\n            \r\n            for (let i = 0; i < count; i++) {\r\n                const bulb = document.createElement('div');\r\n                const color = colors[i % colors.length];\r\n                bulb.className = `bulb ${color}`;\r\n                \r\n                \/\/ Position along the catenary curve\r\n                const progress = (i + 0.5) \/ count;\r\n                const x = progress * 100;\r\n                \r\n                \/\/ Calculate Y position to follow the wire path\r\n                \/\/ The wire creates a series of arcs\r\n                const segment = progress * 8; \/\/ 8 arcs\r\n                const segmentProgress = segment % 1;\r\n                const segmentIndex = Math.floor(segment);\r\n                const isDown = segmentIndex % 2 === 0;\r\n                \r\n                let y;\r\n                if (isDown) {\r\n                    y = 15 + Math.sin(segmentProgress * Math.PI) * 30;\r\n                } else {\r\n                    y = 45 - Math.sin(segmentProgress * Math.PI) * 30;\r\n                }\r\n                \r\n                bulb.style.left = `${x}%`;\r\n                bulb.style.top = `${y}px`;\r\n                \r\n                bulb.innerHTML = `\r\n                    <div class=\"bulb-cap\"><\/div>\r\n                    <div class=\"bulb-glass\"><\/div>\r\n                `;\r\n                \r\n                container.appendChild(bulb);\r\n                bulbs.push(bulb);\r\n            }\r\n            \r\n            return bulbs;\r\n        }\r\n\r\n        const bulbs1 = createBulbs('bulbContainer1', 20);\r\n\r\n        \/\/ ===== Animate Bulbs (Chase Pattern) =====\r\n        let animationFrame = 0;\r\n        const patterns = [\r\n            \/\/ Pattern 1: Sequential chase\r\n            (bulbs, frame) => {\r\n                bulbs.forEach((bulb, i) => {\r\n                    const phase = (frame + i * 3) % 30;\r\n                    if (phase < 15) {\r\n                        bulb.classList.add('on');\r\n                    } else {\r\n                        bulb.classList.remove('on');\r\n                    }\r\n                });\r\n            },\r\n            \/\/ Pattern 2: Alternating\r\n            (bulbs, frame) => {\r\n                bulbs.forEach((bulb, i) => {\r\n                    const isEven = i % 2 === 0;\r\n                    const phase = Math.floor(frame \/ 8) % 2 === 0;\r\n                    if (isEven === phase) {\r\n                        bulb.classList.add('on');\r\n                    } else {\r\n                        bulb.classList.remove('on');\r\n                    }\r\n                });\r\n            },\r\n            \/\/ Pattern 3: Wave\r\n            (bulbs, frame) => {\r\n                bulbs.forEach((bulb, i) => {\r\n                    const wave = Math.sin((frame * 0.1) + (i * 0.5));\r\n                    if (wave > 0) {\r\n                        bulb.classList.add('on');\r\n                    } else {\r\n                        bulb.classList.remove('on');\r\n                    }\r\n                });\r\n            },\r\n            \/\/ Pattern 4: Random twinkle\r\n            (bulbs, frame) => {\r\n                if (frame % 5 === 0) {\r\n                    bulbs.forEach((bulb) => {\r\n                        if (Math.random() > 0.4) {\r\n                            bulb.classList.add('on');\r\n                        } else {\r\n                            bulb.classList.remove('on');\r\n                        }\r\n                    });\r\n                }\r\n            },\r\n            \/\/ Pattern 5: All on then all off\r\n            (bulbs, frame) => {\r\n                const phase = Math.floor(frame \/ 15) % 2;\r\n                bulbs.forEach((bulb) => {\r\n                    if (phase === 0) {\r\n                        bulb.classList.add('on');\r\n                    } else {\r\n                        bulb.classList.remove('on');\r\n                    }\r\n                });\r\n            },\r\n            \/\/ Pattern 6: Groups of 3\r\n            (bulbs, frame) => {\r\n                bulbs.forEach((bulb, i) => {\r\n                    const group = Math.floor(i \/ 3) % 3;\r\n                    const phase = Math.floor(frame \/ 10) % 3;\r\n                    if (group === phase) {\r\n                        bulb.classList.add('on');\r\n                    } else {\r\n                        bulb.classList.remove('on');\r\n                    }\r\n                });\r\n            }\r\n        ];\r\n\r\n        let currentPattern = 0;\r\n        let patternTimer = 0;\r\n\r\n        function animateLights() {\r\n            animationFrame++;\r\n            patternTimer++;\r\n\r\n            \/\/ Switch pattern every ~5 seconds (150 frames at ~30fps)\r\n            if (patternTimer > 150) {\r\n                patternTimer = 0;\r\n                currentPattern = (currentPattern + 1) % patterns.length;\r\n            }\r\n\r\n            if (bulbs1) patterns[currentPattern](bulbs1, animationFrame);\r\n\r\n            setTimeout(animateLights, 33); \/\/ ~30fps\r\n        }\r\n\r\n        animateLights();\r\n\r\n        \/\/ ===== Form Submit Handler =====\r\n        function handleSubmit(e) {\r\n            e.preventDefault();\r\n            \r\n            const btn = e.target.querySelector('.submit-btn');\r\n            const originalContent = btn.innerHTML;\r\n            \r\n            btn.innerHTML = '<span>\u26a1 \u062f\u0631 \u062d\u0627\u0644 \u0627\u0631\u0633\u0627\u0644...<\/span>';\r\n            btn.style.opacity = '0.7';\r\n            btn.disabled = true;\r\n            \r\n            setTimeout(() => {\r\n                btn.innerHTML = '<span>\u2705 \u067e\u06cc\u0627\u0645 \u0627\u0631\u0633\u0627\u0644 \u0634\u062f!<\/span>';\r\n                btn.style.background = 'linear-gradient(135deg, #4caf50, #2e7d32)';\r\n                btn.style.opacity = '1';\r\n                \r\n                setTimeout(() => {\r\n                    btn.innerHTML = originalContent;\r\n                    btn.style.background = 'linear-gradient(135deg, #ffd700, #ff8f00)';\r\n                    btn.disabled = false;\r\n                    e.target.reset();\r\n                }, 2500);\r\n            }, 1500);\r\n            \r\n            return false;\r\n        }\r\n\r\n        \/\/ ===== Random Electric Spark Effect =====\r\n        function createSpark() {\r\n            const spark = document.createElement('div');\r\n            spark.style.cssText = `\r\n                position: fixed;\r\n                width: 2px;\r\n                height: 2px;\r\n                background: #ffd700;\r\n                border-radius: 50%;\r\n                pointer-events: none;\r\n                z-index: 0;\r\n                left: ${Math.random() * 100}%;\r\n                top: ${Math.random() * 100}%;\r\n                box-shadow: 0 0 6px #ffd700, 0 0 12px rgba(255, 215, 0, 0.5);\r\n                animation: microSpark 0.6s ease-out forwards;\r\n            `;\r\n            document.body.appendChild(spark);\r\n            setTimeout(() => spark.remove(), 600);\r\n        }\r\n\r\n        \/\/ Add micro spark keyframes\r\n        const sparkStyle = document.createElement('style');\r\n        sparkStyle.textContent = `\r\n            @keyframes microSpark {\r\n                0% { opacity: 1; transform: scale(1); }\r\n                100% { opacity: 0; transform: scale(0) translateY(-20px); }\r\n            }\r\n        `;\r\n        document.head.appendChild(sparkStyle);\r\n\r\n        \/\/ Random sparks\r\n        setInterval(() => {\r\n            if (Math.random() > 0.6) createSpark();\r\n        }, 500);\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 | \u0644\u0648\u0645\u0646 \u0627\u0644\u06a9\u062a\u0631\u06cc\u06a9 \u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 \u0644\u0648\u0645\u0646 \u0627\u0644\u06a9\u062a\u0631\u06cc\u06a9 &bull; \u0631\u0648\u0634\u0646\u0627\u06cc\u06cc &bull; \u0633\u06cc\u0645 \u0648 \u06a9\u0627\u0628\u0644 \ud83d\udc64 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0622\u0642\u0627\u06cc<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lumenelectric.ir\/index.php?rest_route=\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lumenelectric.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lumenelectric.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lumenelectric.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lumenelectric.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=29"}],"version-history":[{"count":7,"href":"https:\/\/lumenelectric.ir\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":2359,"href":"https:\/\/lumenelectric.ir\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions\/2359"}],"wp:attachment":[{"href":"https:\/\/lumenelectric.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}