\u0627\u0633\u0644\u0627\u06cc\u062f\u0631 | \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627<\/title><br \/>\n <\/p>\n<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n \/* \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0648\u0646\u062a B Nazanin \u0646\u0635\u0628 \u0634\u062f\u0647 \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0627\u0631\u0628\u0631 *\/\n font-family: 'B Nazanin', 'BNazanin', 'B Nazanin', 'Traditional Arabic', 'Tahoma', sans-serif;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n position: relative;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.08) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.06) 1px, transparent 1px);\n background-size: 40px 40px;\n pointer-events: none;\n animation: particleDrift 20s linear infinite;\n }<\/p>\n<p> @keyframes particleDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 40px 40px; }\n }<\/p>\n<p> .page-container {\n max-width: 1600px;\n margin: 0 auto;\n padding: 0 32px;\n position: relative;\n z-index: 1;\n }<\/p>\n<p> .site-header {\n background: rgba(11, 43, 59, 0.85);\n backdrop-filter: blur(16px);\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(196, 154, 108, 0.2);\n position: sticky;\n top: 0;\n z-index: 1000;\n border-bottom: 1px solid rgba(196, 154, 108, 0.3);\n margin-bottom: 2rem;\n }<\/p>\n<p> .nav-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 80px;\n position: relative;\n }<\/p>\n<p> .logo-area {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1001;\n }<\/p>\n<p> .company-logo {\n height: 55px;\n width: auto;\n max-width: 180px;\n object-fit: contain;\n transition: all 0.3s ease;\n filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));\n }<\/p>\n<p> .company-logo:hover {\n transform: scale(1.05);\n filter: drop-shadow(0 4px 10px rgba(196, 154, 108, 0.3));\n }<\/p>\n<p> .main-menu {\n display: flex;\n list-style: none;\n gap: 8px;\n margin: 0;\n padding: 0;\n }<\/p>\n<p> .main-menu > li {\n position: relative;\n }<\/p>\n<p> .main-menu li a {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 24px;\n color: #E2E8F0;\n text-decoration: none;\n font-weight: 550;\n font-size: 1rem;\n transition: all 0.25s ease;\n border-radius: 60px;\n position: relative;\n }<\/p>\n<p> .main-menu li a::after {\n content: '';\n position: absolute;\n bottom: 2px;\n right: 50%;\n width: 0;\n height: 2px;\n background: linear-gradient(90deg, #c49a6c, #e6c8a0);\n border-radius: 4px;\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n }<\/p>\n<p> .main-menu li a:hover {\n color: #e6c8a0;\n background: rgba(196, 154, 108, 0.1);\n }<\/p>\n<p> .main-menu li a:hover::after {\n width: 70%;\n right: 15%;\n }<\/p>\n<p> .main-menu li:first-child a {\n color: #e6c8a0;\n }\n .main-menu li:first-child a::after {\n width: 60%;\n right: 20%;\n background: linear-gradient(90deg, #c49a6c, #e6c8a0);\n }<\/p>\n<p> .dropdown-toggle {\n font-size: 0.7rem;\n transition: transform 0.25s ease;\n margin-right: 6px;\n opacity: 0.7;\n }\n .dropdown-toggle::before {\n content: \"\u25bc\";\n font-size: 0.6rem;\n display: inline-block;\n color: #c49a6c;\n }\n .menu-item-has-children:hover .dropdown-toggle::before {\n transform: rotate(180deg);\n }<\/p>\n<p> .submenu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n left: auto;\n min-width: 260px;\n background: rgba(17, 34, 44, 0.96);\n backdrop-filter: blur(20px);\n border-radius: 20px;\n list-style: none;\n padding: 12px 8px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.25s ease;\n transform: translateY(12px) scale(0.97);\n box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(196, 154, 108, 0.3);\n z-index: 1200;\n border: 1px solid rgba(196, 154, 108, 0.25);\n }<\/p>\n<p> .main-menu > li:last-child .submenu {\n right: auto;\n left: 0;\n }<\/p>\n<p> .submenu.mega {\n width: 540px;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 8px;\n padding: 20px;\n }<\/p>\n<p> .submenu li a {\n padding: 12px 20px;\n font-weight: 500;\n font-size: 0.9rem;\n color: #CBD5E1;\n border-radius: 14px;\n background: rgba(255, 255, 255, 0.02);\n transition: all 0.2s;\n display: block;\n }<\/p>\n<p> .submenu li a:hover {\n background: rgba(196, 154, 108, 0.18);\n color: #e6c8a0;\n transform: translateX(-4px);\n padding-right: 26px;\n }<\/p>\n<p> .menu-item-has-children:hover > .submenu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0) scale(1);\n }<\/p>\n<p> .slider-container {\n position: relative;\n width: 100%;\n height: 85vh;\n min-height: 600px;\n border-radius: 2rem;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);\n }<\/p>\n<p> .slider-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 1s ease-in-out;\n background-size: cover;\n background-position: center;\n border-radius: 2rem;\n }<\/p>\n<p> .slider-slide.active {\n opacity: 1;\n }<\/p>\n<p> .slider-slide::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3));\n border-radius: 2rem;\n }<\/p>\n<p> .slide-content {\n position: absolute;\n bottom: 25%;\n right: 10%;\n left: 10%;\n text-align: center;\n color: white;\n z-index: 10;\n }<\/p>\n<p> .slide-title {\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 1rem;\n text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);\n }<\/p>\n<p> .typed-text {\n font-size: 2rem;\n font-weight: 600;\n margin-top: 1rem;\n direction: ltr;\n display: inline-block;\n }<\/p>\n<p> .typed-text::after {\n content: '|';\n animation: blink 0.8s infinite;\n }<\/p>\n<p> @keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n }<\/p>\n<p> .slider-nav {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 20;\n }<\/p>\n<p> .slider-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.5);\n cursor: pointer;\n transition: all 0.3s ease;\n }<\/p>\n<p> .slider-dot.active {\n background: #c49a6c;\n width: 30px;\n border-radius: 10px;\n }<\/p>\n<p> .scroll-down {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 20;\n cursor: pointer;\n animation: bounce 2s infinite;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(8px);\n padding: 12px 20px;\n border-radius: 40px;\n display: flex;\n align-items: center;\n gap: 12px;\n transition: all 0.3s ease;\n border: 1px solid rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> .scroll-down a {\n display: flex;\n align-items: center;\n gap: 12px;\n text-decoration: none;\n color: white;\n font-size: 0.9rem;\n font-weight: 500;\n }<\/p>\n<p> .mouse-wheel {\n width: 24px;\n height: 38px;\n border: 2px solid white;\n border-radius: 20px;\n position: relative;\n background: rgba(255, 255, 255, 0.1);\n }<\/p>\n<p> .mouse-wheel::before {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 4px;\n height: 8px;\n background: white;\n border-radius: 2px;\n animation: scrollWheel 1.5s infinite;\n }<\/p>\n<p> @keyframes scrollWheel {\n 0% { opacity: 1; transform: translateX(-50%) translateY(0); }\n 80% { opacity: 0; transform: translateX(-50%) translateY(15px); }\n 100% { opacity: 0; transform: translateX(-50%) translateY(0); }\n }<\/p>\n<p> @keyframes bounce {\n 0%, 100% { transform: translateX(-50%) translateY(0); }\n 50% { transform: translateX(-50%) translateY(8px); }\n }<\/p>\n<p> .slider-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(0, 0, 0, 0.5);\n color: white;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 20;\n transition: all 0.3s ease;\n backdrop-filter: blur(4px);\n font-size: 2rem;\n font-weight: bold;\n }<\/p>\n<p> .slider-arrow.prev {\n right: 20px;\n }<\/p>\n<p> .slider-arrow.next {\n left: 20px;\n }<\/p>\n<p> .target-section {\n scroll-margin-top: 80px;\n height: 1px;\n }<\/p>\n<p> .mobile-menu-toggle {\n display: none;\n background: rgba(11, 43, 59, 0.95);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(196, 154, 108, 0.6);\n border-radius: 40px;\n padding: 8px 20px;\n font-size: 1rem;\n font-weight: 500;\n color: #e6c8a0;\n cursor: pointer;\n position: absolute;\n left: 16px;\n top: 16px;\n z-index: 1100;\n gap: 8px;\n align-items: center;\n }<\/p>\n<p> @media (max-width: 980px) {\n .mobile-menu-toggle {\n display: flex;\n }\n .nav-wrapper {\n justify-content: flex-start;\n }\n .main-menu {\n position: fixed;\n top: 0;\n right: -100%;\n width: 80%;\n max-width: 340px;\n height: 100vh;\n background: rgba(8, 30, 42, 0.98);\n backdrop-filter: blur(28px);\n flex-direction: column;\n padding: 90px 20px 30px;\n gap: 10px;\n transition: right 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n z-index: 1050;\n border-left: 2px solid rgba(196, 154, 108, 0.6);\n }\n .main-menu.active {\n right: 0;\n }\n .main-menu li {\n width: 100%;\n position: static;\n }\n .submenu, .submenu.mega {\n position: static;\n opacity: 1;\n visibility: visible;\n transform: none;\n width: 100%;\n display: none;\n grid-template-columns: 1fr;\n }\n .menu-item-has-children.open .submenu {\n display: block;\n }\n .logo-area {\n position: relative;\n right: auto;\n top: auto;\n transform: none;\n margin-left: auto;\n margin-right: 60px;\n }\n .company-logo {\n height: 40px;\n }\n }<\/p>\n<p> @media (max-width: 780px) {\n .page-container { padding: 0 20px; }\n .slider-container { height: 60vh; min-height: 450px; }\n .slide-title { font-size: 1.8rem; }\n .typed-text { font-size: 1.3rem; }\n .company-logo { height: 40px; }\n }<\/p>\n<p> @media (max-width: 480px) {\n .slider-container { height: 50vh; min-height: 400px; }\n .slide-title { font-size: 1.4rem; }\n .typed-text { font-size: 1rem; }\n .company-logo { height: 35px; }\n }<\/p>\n<p> .overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.55);\n backdrop-filter: blur(3px);\n z-index: 1040;\n display: none;\n }\n .overlay.active { display: block; }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"page-container\">\n<header class=\"site-header\">\n<div class=\"nav-wrapper\">\n <\/p>\n<div class=\"logo-area\">\n <img decoding=\"async\" class=\"company-logo\" \n src=\"https:\/\/tuca-co.ir\/wp-content\/uploads\/2026\/04\/Logo.png\" \n alt=\"\u0644\u0648\u06af\u0648\u06cc \u0634\u0631\u06a9\u062a\"\n style=\"background: transparent !important; mix-blend-mode: multiply;\">\n<\/div>\n<p> <button class=\"mobile-menu-toggle\" id=\"mobileMenuToggle\"><br \/>\n <span>\u2630<\/span> <span>\u0645\u0646\u0648<\/span><br \/>\n <\/button><\/p>\n<ul class=\"main-menu\" id=\"mainMenu\">\n<li><a href=\"#\">\u062e\u0627\u0646\u0647<\/a><\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u0645\u062d\u0635\u0648\u0644\u0627\u062a <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu mega\">\n<li><a href=\"http:\/\/62.60.205.52\/index.php\/extroder\/\">\u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631<\/a><\/li>\n<li><a href=\"#\">\u0642\u0637\u0639\u0627\u062a \u06cc\u062f\u06a9\u06cc<\/a><\/li>\n<li><a href=\"#\">\u062a\u0648\u0631\u0628\u0648\u0627\u06a9\u0633\u067e\u0646\u062f\u0631<\/a><\/li>\n<li><a href=\"#\">\u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632<\/a><\/li>\n<li><a href=\"#\">\u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631<\/a><\/li>\n<li><a href=\"#\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631<\/a><\/li>\n<li><a href=\"#\">\u067e\u0645\u067e<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u062e\u062f\u0645\u0627\u062a <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u062a\u0639\u0645\u06cc\u0631 \u0648 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc<\/a><\/li>\n<li><a href=\"#\">\u0645\u0647\u0646\u062f\u0633\u06cc \u0645\u0639\u06a9\u0648\u0633<\/a><\/li>\n<li><a href=\"#\">\u062e\u062f\u0645\u0627\u062a \u062f\u0631 \u0633\u0627\u06cc\u062a<\/a><\/li>\n<li><a href=\"#\">\u062a\u0627\u0645\u06cc\u0646 \u0648 \u0628\u0627\u0632\u0631\u06af\u0627\u0646\u06cc<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062c\u0627\u0631\u06cc<\/a><\/li>\n<li><a href=\"http:\/\/62.60.205.52\/index.php\/end-project\/\">\u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0627\u062a\u0645\u0647 \u06cc\u0627\u0641\u062a\u0647<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u0645\u0639\u0631\u0641\u06cc \u0634\u0631\u06a9\u062a <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu mega\">\n<li><a href=\"#\">\u0686\u0627\u0631\u062a \u0633\u0627\u0632\u0645\u0627\u0646\u06cc<\/a><\/li>\n<li><a href=\"#\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/a><\/li>\n<li><a href=\"#\">\u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><\/li>\n<li><a href=\"#\">HSE<\/a><\/li>\n<li><a href=\"#\">\u06a9\u0627\u062a\u0627\u0644\u0648\u06af<\/a><\/li>\n<li><a href=\"#\">\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u062a\u062d\u0642\u06cc\u0642 \u0648 \u062a\u0648\u0633\u0639\u0647 <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u067e\u0627\u06cc\u0634 \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/a><\/li>\n<li><a href=\"#\">\u062a\u0648\u0631\u0628\u06cc\u0646<\/a><\/li>\n<li><a href=\"#\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631<\/a><\/li>\n<li><a href=\"#\">\u067e\u0645\u067e<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u0631\u0633\u0627\u0646\u0647 <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u06af\u0627\u0644\u0631\u06cc<\/a><\/li>\n<li><a href=\"#\">\u062a\u0642\u062f\u06cc\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627<\/a><\/li>\n<li><a href=\"#\">\u0646\u0645\u0627\u06cc\u0634\u06af\u0627\u0647<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u0631\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637\u06cc<\/a><\/li>\n<li><a href=\"#\">\u0647\u0645\u06a9\u0627\u0631\u06cc<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"overlay\" id=\"overlay\"><\/div>\n<\/p><\/div>\n<\/header>\n<div class=\"slider-container\">\n<div class=\"slider-slide active\" style=\"background-image: url('https:\/\/tuca-co.ir\/wp-content\/uploads\/2026\/04\/Turbine Gas.png');\">\n<div class=\"slide-content\">\n<h2 class=\"slide-title\">\u062a\u0648\u0631\u0628\u06cc\u0646\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0635\u0646\u0639\u062a\u06cc<\/h2>\n<div class=\"typed-text\" id=\"typed1\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"slider-slide\" style=\"background-image: url('https:\/\/tuca-co.ir\/wp-content\/uploads\/2026\/04\/Turbine Gas1.jpg');\">\n<div class=\"slide-content\">\n<h2 class=\"slide-title\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u0628\u0627\u0644\u0627<\/h2>\n<div class=\"typed-text\" id=\"typed2\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"slider-slide\" style=\"background-image: url('https:\/\/picsum.photos\/id\/53\/1600\/900?grayscale');\">\n<div class=\"slide-content\">\n<h2 class=\"slide-title\">\u062e\u062f\u0645\u0627\u062a \u062a\u062e\u0635\u0635\u06cc \u062a\u0639\u0645\u06cc\u0631\u0627\u062a<\/h2>\n<div class=\"typed-text\" id=\"typed3\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"slider-arrow prev\" id=\"prevSlide\">\u276e<\/div>\n<div class=\"slider-arrow next\" id=\"nextSlide\">\u276f<\/div>\n<div class=\"slider-nav\" id=\"sliderNav\">\n<div class=\"slider-dot active\" data-slide=\"0\"><\/div>\n<div class=\"slider-dot\" data-slide=\"1\"><\/div>\n<div class=\"slider-dot\" data-slide=\"2\"><\/div>\n<\/p><\/div>\n<div class=\"scroll-down\">\n <a href=\"#targetSection\"><\/p>\n<div class=\"mouse-icon\">\n<div class=\"mouse-wheel\"><\/div>\n<\/p><\/div>\n<p> <span>\u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646<\/span><br \/>\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"white\">\n <path d=\"M12 16L6 10H18L12 16Z\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div id=\"targetSection\" class=\"target-section\"><\/div>\n<\/div>\n<p><script>\n (function() {\n const toggleBtn = document.getElementById('mobileMenuToggle');\n const mainMenu = document.getElementById('mainMenu');\n const overlay = document.getElementById('overlay');\n const body = document.body;<\/p>\n<p> function closeMenu() {\n mainMenu.classList.remove('active');\n if(overlay) overlay.classList.remove('active');\n body.classList.remove('menu-open');\n document.querySelectorAll('.menu-item-has-children.open').forEach(el => {\n el.classList.remove('open');\n });\n }<\/p>\n<p> function openMenu() {\n mainMenu.classList.add('active');\n if(overlay) overlay.classList.add('active');\n body.classList.add('menu-open');\n }<\/p>\n<p> if(toggleBtn) {\n toggleBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n if(mainMenu.classList.contains('active')) closeMenu();\n else openMenu();\n });\n }<\/p>\n<p> if(overlay) overlay.addEventListener('click', closeMenu);<\/p>\n<p> function isMobile() { return window.innerWidth <= 980; }\n\n function mobileSubmenuHandler(e) {\n if(window.innerWidth <= 980) {\n const parentLi = this.parentElement;\n const submenu = parentLi.querySelector('.submenu');\n if(submenu) {\n e.preventDefault();\n if(!parentLi.classList.contains('open')) {\n document.querySelectorAll('.menu-item-has-children.open').forEach(el => {\n if(el !== parentLi) el.classList.remove('open');\n });\n }\n parentLi.classList.toggle('open');\n }\n }\n }<\/p>\n<p> function attachMobileEvents() {\n const parentItems = document.querySelectorAll('.menu-item-has-children > a');\n parentItems.forEach(item => {\n item.removeEventListener('click', mobileSubmenuHandler);\n if(isMobile()) item.addEventListener('click', mobileSubmenuHandler);\n });\n }<\/p>\n<p> window.addEventListener('resize', function() {\n if(window.innerWidth > 980) {\n closeMenu();\n document.querySelectorAll('.menu-item-has-children.open').forEach(el => el.classList.remove('open'));\n }\n attachMobileEvents();\n });<\/p>\n<p> const parentLinks = document.querySelectorAll('.menu-item-has-children > a');\n parentLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n const sub = link.parentElement.querySelector('.submenu');\n if(sub && window.innerWidth > 980) e.preventDefault();\n });\n });<\/p>\n<p> const allSubLinks = document.querySelectorAll('.submenu li a');\n allSubLinks.forEach(link => {\n link.addEventListener('click', () => { if(window.innerWidth <= 980) closeMenu(); });\n });\n\n attachMobileEvents();\n })();\n\n (function() {\n const slides = document.querySelectorAll('.slider-slide');\n const dots = document.querySelectorAll('.slider-dot');\n const prevBtn = document.getElementById('prevSlide');\n const nextBtn = document.getElementById('nextSlide');\n let currentSlide = 0;\n let slideInterval;\n let typingActive = false;\n\n const typedTexts = [\n \"\u0642\u062f\u0631\u062a \u062f\u0631 \u062d\u0631\u06a9\u062a | \u06f4\u06f0 \u0645\u06af\u0627\u0648\u0627\u062a \u062a\u0648\u0627\u0646\",\n \"\u06a9\u06cc\u0641\u06cc\u062a | \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f API619\",\n \"\u062a\u062e\u0635\u0635 | \u06f1\u06f4 \u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647\"\n ];\n\n function startTyping(text, elementId) {\n const element = document.getElementById(elementId);\n if (!element) return;\n element.innerHTML = '';\n let i = 0;\n typingActive = true;\n function type() {\n if (i < text.length) {\n element.innerHTML += text.charAt(i);\n i++;\n setTimeout(type, 80);\n } else {\n typingActive = false;\n }\n }\n type();\n }\n\n function showSlide(index) {\n if (typingActive) return;\n \n slides.forEach(slide => slide.classList.remove('active'));\n dots.forEach(dot => dot.classList.remove('active'));<\/p>\n<p> slides[index].classList.add('active');\n dots[index].classList.add('active');\n currentSlide = index;<\/p>\n<p> const typedId = `typed${index + 1}`;\n startTyping(typedTexts[index], typedId);\n }<\/p>\n<p> function nextSlide() {\n let newIndex = currentSlide + 1;\n if (newIndex >= slides.length) newIndex = 0;\n showSlide(newIndex);\n resetInterval();\n }<\/p>\n<p> function prevSlide() {\n let newIndex = currentSlide - 1;\n if (newIndex < 0) newIndex = slides.length - 1;\n showSlide(newIndex);\n resetInterval();\n }\n\n function resetInterval() {\n clearInterval(slideInterval);\n slideInterval = setInterval(nextSlide, 5000);\n }\n\n prevBtn.addEventListener('click', prevSlide);\n nextBtn.addEventListener('click', nextSlide);\n \n dots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n showSlide(index);\n resetInterval();\n });\n });<\/p>\n<p> showSlide(0);\n slideInterval = setInterval(nextSlide, 5000);\n })();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 | TCA | \u067e\u06cc\u0634\u0631\u0648 \u062f\u0631 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631<\/title><br \/>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n<style>\n \/* \u062a\u0639\u0631\u06cc\u0641 \u0642\u0648\u06cc \u0648 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0641\u0648\u0646\u062a \u0633\u06cc\u0633\u062a\u0645\u06cc B Nazanin *\/\n @font-face {\n font-family: 'BNazaninLocal';\n src: local('B Nazanin'), local('BNazanin'), local('B Nazanin Bold'), local('B Nazanin regular');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n padding: 2rem;\n position: relative;\n }<\/p>\n<p> \/* \u0627\u0639\u0645\u0627\u0644 \u0645\u062c\u062f\u062f \u0641\u0648\u0646\u062a \u0628\u0647 \u062a\u0645\u0627\u0645 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 *\/\n body, body * {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> \/* \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0628\u0627 \u0630\u0631\u0627\u062a \u0637\u0644\u0627\u06cc\u06cc *\/\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.08) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.06) 1px, transparent 1px);\n background-size: 40px 40px;\n pointer-events: none;\n animation: particleDrift 20s linear infinite;\n }<\/p>\n<p> @keyframes particleDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 40px 40px; }\n }<\/p>\n<p> .main-wrapper {\n max-width: 1600px;\n width: 100%;\n margin: 0 auto;\n padding: 0 32px;\n }<\/p>\n<p> \/* \u0628\u0627\u06a9\u0633 \u0627\u0635\u0644\u06cc \u0633\u0641\u06cc\u062f \u0628\u0627 \u062d\u0627\u0634\u06cc\u0647 \u0637\u0644\u0627\u06cc\u06cc *\/\n .main-company-box {\n background: rgba(255, 255, 255, 0.96);\n backdrop-filter: blur(2px);\n border-radius: 2.5rem;\n box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(196, 154, 108, 0.2);\n overflow: hidden;\n transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n position: relative;\n animation: mainBoxFadeIn 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;\n }<\/p>\n<p> @keyframes mainBoxFadeIn {\n from {\n opacity: 0;\n transform: scale(0.98) translateY(20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }<\/p>\n<p> .main-company-box::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(196, 154, 108, 0.1), transparent 70%);\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n z-index: 1;\n }<\/p>\n<p> .main-company-box:hover::before {\n opacity: 1;\n animation: lightRotate 4s ease-in-out infinite;\n }<\/p>\n<p> @keyframes lightRotate {\n 0% { transform: translate(0%, 0%) rotate(0deg); }\n 50% { transform: translate(3%, 3%) rotate(3deg); }\n 100% { transform: translate(0%, 0%) rotate(0deg); }\n }<\/p>\n<p> .main-company-box:hover {\n transform: translateY(-8px) scale(1.01);\n box-shadow: 0 40px 70px -20px rgba(196, 154, 108, 0.3), 0 0 0 1px rgba(196, 154, 108, 0.4);\n }<\/p>\n<p> \/* \u0646\u0648\u0627\u0631 \u0637\u0644\u0627\u06cc\u06cc \u0645\u062a\u062d\u0631\u06a9 \u062f\u0631 \u0628\u0627\u0644\u0627 *\/\n .gold-strip-main {\n height: 10px;\n background: linear-gradient(90deg, #0b3b5f, #0072ff, #ffffff, #ff6262, #0b3b5f);\n background-size: 200% auto;\n animation: shimmer 6s linear infinite;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> @keyframes shimmer {\n 0% { background-position: 0% 0; }\n 100% { background-position: 200% 0; }\n }<\/p>\n<p> .main-content {\n padding: 3rem 3.5rem 3.5rem 3.5rem;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> \/* \u0647\u062f\u0631 *\/\n .company-header {\n text-align: center;\n margin-bottom: 3rem;\n position: relative;\n }<\/p>\n<p> .company-header::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 3px;\n background: linear-gradient(90deg, #c49a6c, #e6c8a0);\n animation: headerLineGlow 2s ease-in-out infinite;\n }<\/p>\n<p> @keyframes headerLineGlow {\n 0%, 100% { width: 100px; opacity: 0.6; }\n 50% { width: 160px; opacity: 1; box-shadow: 0 0 10px #c49a6c; }\n }<\/p>\n<p> .company-title {\n font-size: 2.8rem;\n font-weight: 800;\n background: linear-gradient(135deg, #10436b, #c49a6c, #e6c8a0, #c49a6c);\n background-size: 300% auto;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: -0.5px;\n margin-bottom: 0.5rem;\n animation: titleShine 4s linear infinite;\n display: inline-block;\n position: relative;\n }<\/p>\n<p> @keyframes titleShine {\n 0% { background-position: 0% 0; }\n 100% { background-position: 100% 0; }\n }<\/p>\n<p> .company-title::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #c49a6c, #e6c8a0);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n filter: blur(12px);\n opacity: 0.3;\n z-index: -1;\n }<\/p>\n<p> .subtitle {\n text-align: center;\n color: #7a9bb3;\n font-size: 1rem;\n margin-top: 1.2rem;\n font-weight: 450;\n }<\/p>\n<p> \/* \u0634\u0628\u06a9\u0647 \u062f\u0648 \u0633\u062a\u0648\u0646\u06cc *\/\n .two-columns {\n display: flex;\n flex-wrap: wrap;\n gap: 2.5rem;\n margin-top: 2rem;\n }<\/p>\n<p> .info-col {\n flex: 1.4;\n min-width: 260px;\n }<\/p>\n<p> .visual-col {\n flex: 1;\n min-width: 260px;\n }<\/p>\n<p> \/* \u062a\u06af\u200c\u0647\u0627\u06cc \u0627\u0641\u062a\u062e\u0627\u0631 *\/\n .honor-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin: 1.5rem 0 1.8rem;\n }<\/p>\n<p> .honor-tag {\n background: rgba(255, 255, 255, 0.98);\n border: 1px solid rgba(196, 154, 108, 0.4);\n border-radius: 40px;\n padding: 0.4rem 1.2rem;\n font-size: 0.75rem;\n font-weight: 600;\n color: #10436b;\n transition: all 0.2s;\n }<\/p>\n<p> .honor-tag i {\n color: #c49a6c;\n margin-left: 6px;\n }<\/p>\n<p> .honor-tag:hover {\n background: #c49a6c10;\n border-color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> \/* \u0622\u0645\u0627\u0631 *\/\n .stats-group {\n display: flex;\n flex-wrap: wrap;\n gap: 2rem;\n margin: 2rem 0;\n background: rgba(196, 154, 108, 0.05);\n padding: 1rem 1.5rem;\n border-radius: 2rem;\n border: 1px solid rgba(196, 154, 108, 0.2);\n }<\/p>\n<p> .stat-item {\n flex: 1;\n text-align: center;\n }<\/p>\n<p> .stat-number {\n font-size: 2.2rem;\n font-weight: 800;\n color: #c49a6c;\n font-family: monospace;\n line-height: 1.2;\n }<\/p>\n<p> .stat-label {\n font-size: 0.7rem;\n font-weight: 600;\n color: #5a7a92;\n letter-spacing: 0.5px;\n }<\/p>\n<p> \/* \u062f\u06a9\u0645\u0647 *\/\n .btn-gold {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, #10436b, #1a5a7a);\n color: white;\n padding: 0.8rem 2rem;\n border-radius: 50px;\n text-decoration: none;\n font-weight: 600;\n font-size: 0.9rem;\n transition: all 0.3s;\n border: none;\n cursor: pointer;\n margin-top: 0.5rem;\n position: relative;\n overflow: hidden;\n }<\/p>\n<p> .btn-gold::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n transition: left 0.5s ease;\n }<\/p>\n<p> .btn-gold:hover::before {\n left: 100%;\n }<\/p>\n<p> .btn-gold:hover {\n background: linear-gradient(135deg, #1a5a7a, #c49a6c);\n transform: translateX(-5px);\n box-shadow: 0 8px 20px rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> \/* \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0642\u0627\u0628 \u0637\u0644\u0627\u06cc\u06cc *\/\n .image-frame {\n background: #fff;\n border-radius: 1.5rem;\n padding: 0.5rem;\n border: 1px solid rgba(196, 154, 108, 0.5);\n transition: all 0.3s;\n overflow: hidden;\n }<\/p>\n<p> .image-frame img {\n width: 100%;\n height: auto;\n border-radius: 1.2rem;\n display: block;\n transition: transform 0.4s ease;\n }<\/p>\n<p> .image-frame:hover img {\n transform: scale(1.02);\n }<\/p>\n<p> .img-caption {\n text-align: center;\n margin-top: 0.8rem;\n font-size: 0.75rem;\n color: #c49a6c;\n font-weight: 500;\n }<\/p>\n<p> \/* \u0634\u0628\u06a9\u0647 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc *\/\n .social-section {\n margin-top: 2rem;\n border-top: 1px dashed rgba(196, 154, 108, 0.4);\n padding-top: 1.2rem;\n }<\/p>\n<p> .social-title {\n font-size: 0.8rem;\n font-weight: 700;\n color: #10436b;\n margin-bottom: 0.8rem;\n }<\/p>\n<p> .social-icons {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n }<\/p>\n<p> .social-icon {\n width: 42px;\n height: 42px;\n background: #f5f5f5;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: #1a5a7a;\n font-size: 1.2rem;\n text-decoration: none;\n transition: all 0.3s;\n border: 1px solid rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> .social-icon:hover {\n background: #c49a6c;\n color: white;\n transform: translateY(-4px);\n border-color: #c49a6c;\n }<\/p>\n<p> \/* \u0641\u0648\u062a\u0631 *\/\n .footer-company {\n margin-top: 3rem;\n padding-top: 1.5rem;\n text-align: center;\n font-size: 0.8rem;\n color: #7a9bb3;\n border-top: 1px solid rgba(196, 154, 108, 0.2);\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n flex-wrap: wrap;\n }<\/p>\n<p> .footer-company span {\n transition: all 0.3s;\n cursor: default;\n }<\/p>\n<p> .footer-company span:hover {\n color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\n @media (max-width: 900px) {\n body { padding: 1rem; }\n .main-wrapper { padding: 0 16px; }\n .main-content { padding: 2rem; }\n .company-title { font-size: 2rem; }\n .two-columns { gap: 1.5rem; }\n .stats-group { gap: 1rem; }\n }<\/p>\n<p> @media (max-width: 600px) {\n .main-content { padding: 1.5rem; }\n .company-title { font-size: 1.5rem; }\n .stats-group { flex-direction: column; align-items: center; gap: 0.8rem; }\n .btn-gold { font-size: 0.8rem; padding: 0.6rem 1.2rem; }\n }<\/p>\n<p> \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 *\/\n .info-col, .visual-col {\n opacity: 0;\n transform: translateY(20px);\n animation: cardFloatIn 0.6s ease forwards;\n }\n .info-col { animation-delay: 0.1s; }\n .visual-col { animation-delay: 0.2s; }<\/p>\n<p> @keyframes cardFloatIn {\n 0% {\n opacity: 0;\n transform: translateY(30px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }<\/p>\n<p> .desc-text {\n line-height: 1.8;\n margin-bottom: 1rem;\n text-align: justify;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"main-wrapper\">\n<div class=\"main-company-box\">\n<div class=\"gold-strip-main\"><\/div>\n<div class=\"main-content\">\n<div class=\"company-header\">\n<h1 class=\"company-title\" data-text=\"\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627\">\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627<\/h1>\n<p class=\"subtitle\">\u2699\ufe0f \u062f\u0627\u0646\u0634\u200c\u0628\u0646\u06cc\u0627\u0646 \u00b7 \u067e\u06cc\u0634\u06af\u0627\u0645 \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0648 \u0633\u0627\u062e\u062a \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631<\/p>\n<\/p><\/div>\n<div class=\"two-columns\">\n<div class=\"info-col\">\n<p class=\"desc-text\">\n \u0634\u0640\u0640\u0631\u06a9\u062a \u062f\u0627\u0646\u0634\u200c\u0628\u0646\u06cc\u0627\u0646 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 \u062f\u0631 \u0633\u0627\u0644 1390 \u0628\u0631\u0627\u06cc \u0646\u06cc\u0644 \u0628\u0647 \u062e\u0648\u062f\u06a9\u0641\u0627\u06cc\u06cc \u0648 \u06a9\u0633\u0628 \u062f\u0627\u0646\u0634 \u0641\u0646\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648 \u0633\u0627\u062e\u062a\u060c \u0646\u0635\u0628 \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u062a\u0639\u0645\u06cc\u0631 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0627\u0646\u0648\u0627\u0639 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631 \u0627\u0632 \u062c\u0645\u0644\u0647 \u062a\u0648\u0631\u0628\u06cc\u0646\u200c\u0647\u0627\u06cc \u06af\u0627\u0632 \u0648 \u0628\u062e\u0627\u0631\u060c \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u060c \u067e\u0645\u067e\u200c\u0647\u0627 \u0648 \u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631 \u062a\u0623\u0633\u06cc\u0633 \u06af\u0631\u062f\u06cc\u062f.\n <\/p>\n<p class=\"desc-text\">\n \u0627\u06cc\u0646 \u0634\u0631\u06a9\u062a \u0637\u06cc 14 \u0633\u0627\u0644 \u06af\u0630\u0634\u062a\u0647 \u062e\u062f\u0645\u0627\u062a \u06af\u0633\u062a\u0631\u062f\u0647\u200c\u0627\u06cc \u062f\u0631 \u0635\u0646\u0627\u06cc\u0639 \u0646\u0641\u062a\u060c \u06af\u0627\u0632\u060c \u0646\u06cc\u0631\u0648\u06af\u0627\u0647\u06cc\u060c \u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc \u0648 \u0645\u0639\u062f\u0646\u06cc \u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u0648\u062f\u0647 \u0648 \u0645\u0648\u0641\u0642 \u0628\u0647 \u0627\u062e\u0630 \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0648\u0641\u0642 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062e\u0648\u062f \u06af\u0631\u062f\u06cc\u062f\u0647 \u0627\u0633\u062a.\n <\/p>\n<div class=\"honor-tags\">\n <span class=\"honor-tag\"><i class=\"fas fa-flask\"><\/i> \u062f\u0627\u0646\u0634\u200c\u0628\u0646\u06cc\u0627\u0646 \u0646\u0648\u0639 \u06f1<\/span><br \/>\n <span class=\"honor-tag\"><i class=\"fas fa-medal\"><\/i> \u06a9\u06cc\u0641\u06cc\u062a \u0645\u0645\u062a\u0627\u0632<\/span><br \/>\n <span class=\"honor-tag\"><i class=\"fas fa-certificate\"><\/i> \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 API<\/span><br \/>\n <span class=\"honor-tag\"><i class=\"fas fa-chart-line\"><\/i> \u06f1\u06f4 \u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647<\/span>\n <\/div>\n<div class=\"stats-group\">\n<div class=\"stat-item\">\n<div class=\"stat-number\" id=\"years\">\u06f1\u06f4<\/div>\n<div class=\"stat-label\">\u0633\u0627\u0644 \u0627\u0641\u062a\u062e\u0627\u0631<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\" id=\"projects\">\u06f1\u06f3\u06f0<\/div>\n<div class=\"stat-label\">\u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\" id=\"experts\">\u06f5\u06f0<\/div>\n<div class=\"stat-label\">\u0645\u062a\u062e\u0635\u0635 \u0627\u0631\u0634\u062f<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <a href=\"#\" class=\"btn-gold\"><br \/>\n <span>\u0645\u0634\u0627\u0648\u0631\u0647 \u0648 \u0647\u0645\u06a9\u0627\u0631\u06cc<\/span><br \/>\n <i class=\"fas fa-arrow-left\"><\/i><br \/>\n <\/a>\n <\/div>\n<div class=\"visual-col\">\n<div class=\"image-frame\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/IMG_0846-scaled.jpg\" alt=\"\u062a\u06cc\u0645 \u0645\u0647\u0646\u062f\u0633\u06cc \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627\">\n <\/div>\n<div class=\"img-caption\">\n <i class=\"fas fa-users\"><\/i> \u062a\u06cc\u0645 \u062a\u062e\u0635\u0635\u06cc \u0645\u0647\u0646\u062f\u0633\u06cc \u0648 \u0627\u062c\u0631\u0627\n <\/div>\n<div style=\"font-size: 0.7rem; margin-top: 0.6rem; color:#7a9bb3;\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06f2\u06f4\/\u06f7 \u00b7 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0641\u0648\u0631\u06cc<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"footer-company\">\n <span><i class=\"fas fa-industry\"><\/i> \u0647\u0645\u0631\u0627\u0647 \u0645\u0637\u0645\u0626\u0646 \u0635\u0646\u0627\u06cc\u0639 \u0627\u0646\u0631\u0698\u06cc \u0627\u06cc\u0631\u0627\u0646<\/span><br \/>\n <span><i class=\"fas fa-trophy\"><\/i> \u0628\u0631\u0646\u062f \u0645\u0644\u06cc \u062f\u0627\u0646\u0634\u200c\u0628\u0646\u06cc\u0627\u0646<\/span><br \/>\n <span><i class=\"fas fa-globe\"><\/i> \u0635\u0627\u062f\u0631\u0627\u062a \u0641\u0646\u0627\u0648\u0631\u06cc \u0628\u0647 \u06a9\u0634\u0648\u0631\u0647\u0627\u06cc \u0647\u0645\u0633\u0627\u06cc\u0647<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n \/\/ \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0634\u0645\u0627\u0631\u0634 \u0627\u0639\u062f\u0627\u062f \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0648\u06cc\u0648\u067e\u0648\u0631\u062a\n const yearsEl = document.getElementById('years');\n const projectsEl = document.getElementById('projects');\n const expertsEl = document.getElementById('experts');\n let animated = false;<\/p>\n<p> function animateNumbers() {\n if (animated) return;\n const targets = [14, 130, 50];\n const elements = [yearsEl, projectsEl, expertsEl];\n elements.forEach((el, idx) => {\n let current = 0;\n const target = targets[idx];\n const step = Math.ceil(target \/ 45);\n const interval = setInterval(() => {\n current += step;\n if (current >= target) {\n el.innerText = target;\n clearInterval(interval);\n } else {\n el.innerText = current;\n }\n }, 20);\n });\n animated = true;\n }<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting && !animated) {\n animateNumbers();\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.3 });\n const statsContainer = document.querySelector('.stats-group');\n if (statsContainer) observer.observe(statsContainer);<\/p>\n<p> \/\/ fallback \u0627\u06af\u0631 \u0632\u0648\u062f\u062a\u0631 \u062f\u06cc\u062f\u0647 \u0634\u062f\n window.addEventListener('load', () => {\n if (statsContainer && statsContainer.getBoundingClientRect().top < window.innerHeight - 100) {\n animateNumbers();\n }\n });\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u0645\u062d\u0635\u0648\u0644\u0627\u062a | \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627<\/title><\/p>\n<style>\n \/* \u062a\u0639\u0631\u06cc\u0641 \u0642\u0648\u06cc \u0648 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0641\u0648\u0646\u062a \u0633\u06cc\u0633\u062a\u0645\u06cc B Nazanin *\/\n @font-face {\n font-family: 'BNazaninLocal';\n src: local('B Nazanin'), local('BNazanin'), local('B Nazanin Bold'), local('B Nazanin regular');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n \/* \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0648\u0646\u062a B Nazanin \u0628\u0627 \u0627\u0648\u0644\u0648\u06cc\u062a \u0628\u0627\u0644\u0627 \u0648 !important \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 *\/\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n padding: 2rem;\n position: relative;\n }<\/p>\n<p> \/* \u0627\u0639\u0645\u0627\u0644 \u0645\u062c\u062f\u062f \u0641\u0648\u0646\u062a \u0628\u0647 \u062a\u0645\u0627\u0645 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 *\/\n body, body * {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> \/* \u0628\u0631\u0627\u06cc \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u0648\u0646\u062a \u062e\u0627\u0635 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f *\/\n input, button, textarea, select, a, p, h1, h2, h3, h4, h5, h6, div, span, li, .product-name, .product-desc, .product-btn, .subtitle, .footer-products span {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.08) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> \/* \u0630\u0631\u0627\u062a \u0645\u062a\u062d\u0631\u06a9 \u0637\u0644\u0627\u06cc\u06cc *\/\n body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.06) 1px, transparent 1px);\n background-size: 40px 40px;\n pointer-events: none;\n animation: particleDrift 20s linear infinite;\n }<\/p>\n<p> @keyframes particleDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 40px 40px; }\n }<\/p>\n<p> .products-wrapper {\n max-width: 1600px;\n width: 100%;\n margin: 0 auto;\n padding: 0 32px;\n }<\/p>\n<p> \/* \u0628\u0627\u06a9\u0633 \u06a9\u0644\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a *\/\n .main-products-box {\n background: rgba(255, 255, 255, 0.96);\n backdrop-filter: blur(2px);\n border-radius: 2.5rem;\n box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(196, 154, 108, 0.2);\n overflow: hidden;\n transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n position: relative;\n }<\/p>\n<p> .main-products-box::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(196, 154, 108, 0.1), transparent 70%);\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n z-index: 1;\n }<\/p>\n<p> .main-products-box:hover::before {\n opacity: 1;\n animation: lightRotate 4s ease-in-out infinite;\n }<\/p>\n<p> @keyframes lightRotate {\n 0% { transform: translate(0%, 0%) rotate(0deg); }\n 50% { transform: translate(3%, 3%) rotate(3deg); }\n 100% { transform: translate(0%, 0%) rotate(0deg); }\n }<\/p>\n<p> .main-products-box:hover {\n transform: translateY(-8px) scale(1.01);\n box-shadow: 0 40px 70px -20px rgba(196, 154, 108, 0.3), 0 0 0 1px rgba(196, 154, 108, 0.4);\n }<\/p>\n<p> .gold-strip-main {\n height: 10px;\n background: linear-gradient(90deg, #0b3b5f, #0072ff, #ffffff, #ff6262, #0b3b5f);\n background-size: 200% auto;\n animation: shimmer 6s linear infinite;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> @keyframes shimmer {\n 0% { background-position: 0% 0; }\n 100% { background-position: 200% 0; }\n }<\/p>\n<p> .main-products-content {\n padding: 3rem 3.5rem 3.5rem 3.5rem;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> .products-header {\n text-align: center;\n margin-bottom: 3.5rem;\n position: relative;\n }<\/p>\n<p> .products-header::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 3px;\n background: linear-gradient(90deg, #c49a6c, #e6c8a0);\n animation: headerLineGlow 2s ease-in-out infinite;\n }<\/p>\n<p> @keyframes headerLineGlow {\n 0%, 100% { width: 100px; opacity: 0.6; }\n 50% { width: 160px; opacity: 1; box-shadow: 0 0 10px #c49a6c; }\n }<\/p>\n<p> .products-title {\n font-size: 2.5rem;\n font-weight: 800;\n background: linear-gradient(135deg, #10436b, #c49a6c, #e6c8a0, #c49a6c);\n background-size: 300% auto;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: -0.5px;\n margin-bottom: 0.5rem;\n animation: titleShine 4s linear infinite;\n position: relative;\n display: inline-block;\n }<\/p>\n<p> @keyframes titleShine {\n 0% { background-position: 0% 0; }\n 100% { background-position: 100% 0; }\n }<\/p>\n<p> .products-title::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #c49a6c, #e6c8a0);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n filter: blur(12px);\n opacity: 0.3;\n z-index: -1;\n }<\/p>\n<p> .subtitle {\n text-align: center;\n color: #7a9bb3;\n font-size: 1rem;\n margin-top: 1.2rem;\n font-weight: 450;\n }<\/p>\n<p> .products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n gap: 2rem;\n margin-top: 2.5rem;\n }<\/p>\n<p> \/* ========== \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 \u0628\u0627 \u0639\u06a9\u0633 ========== *\/\n .product-card {\n background: rgba(255, 255, 255, 0.98);\n border-radius: 1.8rem;\n padding: 1.8rem;\n box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.1);\n transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n border: 2px solid rgba(196, 154, 108, 0.25);\n position: relative;\n overflow: hidden;\n opacity: 0;\n transform: translateY(30px) scale(0.95);\n }<\/p>\n<p> .product-card:nth-child(1) { animation: cardFloatIn 0.6s ease forwards 0.1s; }\n .product-card:nth-child(2) { animation: cardFloatIn 0.6s ease forwards 0.2s; }\n .product-card:nth-child(3) { animation: cardFloatIn 0.6s ease forwards 0.3s; }\n .product-card:nth-child(4) { animation: cardFloatIn 0.6s ease forwards 0.4s; }\n .product-card:nth-child(5) { animation: cardFloatIn 0.6s ease forwards 0.5s; }\n .product-card:nth-child(6) { animation: cardFloatIn 0.6s ease forwards 0.6s; }<\/p>\n<p> @keyframes cardFloatIn {\n 0% {\n opacity: 0;\n transform: translateY(40px) scale(0.92);\n filter: blur(2px);\n }\n 50% {\n opacity: 0.5;\n transform: translateY(-5px) scale(0.98);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n filter: blur(0);\n }\n }<\/p>\n<p> \/* \u062d\u0627\u0634\u06cc\u0647 \u0686\u0631\u062e\u0627\u0646 \u0637\u0644\u0627\u06cc\u06cc *\/\n .product-card::before {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n border-radius: 1.8rem;\n background: linear-gradient(135deg, #c49a6c, #e6c8a0, #f5d09e, #c49a6c);\n background-size: 300% 300%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n }<\/p>\n<p> .product-card:hover::before {\n opacity: 1;\n animation: borderRotate 0.8s ease forwards;\n }<\/p>\n<p> @keyframes borderRotate {\n 0% { background-position: 0% 0%; }\n 100% { background-position: 100% 100%; }\n }<\/p>\n<p> \/* \u0627\u0641\u06a9\u062a \u0634\u0627\u06cc\u0646 \u0631\u0648\u06cc \u06a9\u0627\u0631\u062a *\/\n .product-card::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -60%;\n width: 200%;\n height: 200%;\n background: linear-gradient(115deg, transparent, rgba(196, 154, 108, 0.12), transparent);\n transform: rotate(25deg);\n transition: all 0.7s ease;\n opacity: 0;\n pointer-events: none;\n }<\/p>\n<p> .product-card:hover::after {\n left: 100%;\n opacity: 1;\n }<\/p>\n<p> .product-card:hover {\n transform: translateY(-10px) scale(1.02);\n border-color: rgba(196, 154, 108, 0.6);\n box-shadow: 0 25px 40px -15px rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> \/* ========== \u0627\u0633\u062a\u0627\u06cc\u0644 \u0639\u06a9\u0633 \u0645\u062d\u0635\u0648\u0644 ========== *\/\n .product-image {\n width: 100%;\n height: 200px;\n background: linear-gradient(145deg, #f5f5f5, #e8e8e8);\n border-radius: 1.2rem;\n margin-bottom: 1.2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n border: 1px solid rgba(196, 154, 108, 0.2);\n transition: all 0.3s ease;\n }<\/p>\n<p> .product-card:hover .product-image {\n border-color: #c49a6c;\n box-shadow: 0 8px 20px rgba(196, 154, 108, 0.2);\n }<\/p>\n<p> \/* \u0639\u06a9\u0633 \u0648\u0627\u0642\u0639\u06cc *\/\n .product-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }<\/p>\n<p> .product-card:hover .product-image img {\n transform: scale(1.08);\n }<\/p>\n<p> .product-name {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(135deg, #10436b, #c49a6c);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n margin-bottom: 0.8rem;\n padding-bottom: 0.5rem;\n border-bottom: 2px solid rgba(196, 154, 108, 0.3);\n display: inline-block;\n transition: all 0.3s ease;\n }<\/p>\n<p> .product-card:hover .product-name {\n background: linear-gradient(135deg, #c49a6c, #10436b);\n background-clip: text;\n -webkit-background-clip: text;\n }<\/p>\n<p> .product-desc {\n font-size: 0.95rem;\n line-height: 1.8;\n color: #4a6f88;\n margin: 1rem 0;\n text-align: justify;\n }<\/p>\n<p> .product-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: linear-gradient(135deg, #10436b, #1a5a7a);\n color: white;\n padding: 0.7rem 1.5rem;\n border-radius: 40px;\n text-decoration: none;\n font-size: 0.9rem;\n font-weight: 500;\n transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n border: none;\n cursor: pointer;\n margin-top: 0.5rem;\n position: relative;\n overflow: hidden;\n }<\/p>\n<p> .product-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.5s ease;\n }<\/p>\n<p> .product-btn:hover::before {\n left: 100%;\n }<\/p>\n<p> .product-btn:hover {\n background: linear-gradient(135deg, #1a5a7a, #c49a6c);\n transform: translateX(-5px);\n box-shadow: 0 8px 20px rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> .product-btn::after {\n content: \"\u2190\";\n transition: transform 0.3s ease;\n }<\/p>\n<p> .product-btn:hover::after {\n transform: translateX(-5px);\n }<\/p>\n<p> .footer-products {\n margin-top: 3rem;\n padding-top: 1.5rem;\n text-align: center;\n font-size: 0.85rem;\n color: #7a9bb3;\n border-top: 1px solid rgba(196, 154, 108, 0.2);\n display: flex;\n justify-content: center;\n gap: 15px;\n flex-wrap: wrap;\n }<\/p>\n<p> .footer-products span {\n transition: all 0.3s ease;\n cursor: default;\n }<\/p>\n<p> .footer-products span:hover {\n color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 fadeIn \u0628\u0631\u0627\u06cc \u06a9\u0644 \u0628\u0627\u06a9\u0633 *\/\n .main-products-box {\n animation: mainBoxFadeIn 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;\n }<\/p>\n<p> @keyframes mainBoxFadeIn {\n from {\n opacity: 0;\n transform: scale(0.98) translateY(20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }<\/p>\n<p> \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\n @media (max-width: 1100px) {\n .products-title {\n font-size: 2rem;\n }\n .products-grid {\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n }\n }<\/p>\n<p> @media (max-width: 780px) {\n body {\n padding: 1rem;\n }\n .products-wrapper {\n padding: 0 20px;\n }\n .main-products-content {\n padding: 2rem;\n }\n .products-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n .products-title {\n font-size: 1.8rem;\n }\n .product-name {\n font-size: 1.3rem;\n }\n .product-desc {\n font-size: 0.9rem;\n }\n .product-image {\n height: 170px;\n }\n .subtitle {\n font-size: 0.9rem;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .products-wrapper {\n padding: 0 16px;\n }\n .main-products-content {\n padding: 1.5rem;\n }\n .product-card {\n padding: 1.2rem;\n }\n .product-image {\n height: 140px;\n }\n .products-title {\n font-size: 1.5rem;\n }\n .footer-products {\n font-size: 0.7rem;\n gap: 8px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"products-wrapper\">\n<div class=\"main-products-box\">\n<div class=\"gold-strip-main\"><\/div>\n<div class=\"main-products-content\">\n<div class=\"products-header\">\n<h1 class=\"products-title\" data-text=\"\u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0627\">\u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0627<\/h1>\n<p class=\"subtitle\">\ud83d\udd27 \u0627\u0631\u0627\u0626\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u200c\u062a\u0631\u06cc\u0646 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631 \u0635\u0646\u0639\u062a\u06cc<\/p>\n<\/p><\/div>\n<div class=\"products-grid\">\n <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/adobestock_56159073-min-scaled.jpeg\" alt=\"\u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631\">\n <\/div>\n<h3 class=\"product-name\">\u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631<\/h3>\n<p class=\"product-desc\">\n \u067e\u06a9\u06cc\u062c \u06a9\u0627\u0645\u0644\u060c \u0631\u0648\u062a\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0648 \u0642\u0637\u0639\u0627\u062a \u0627\u0646\u0648\u0627\u0639 \u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631 \u062a\u0627 \u062a\u0648\u0627\u0646 \u06f4\u06f0 \u0645\u06af\u0627\u0648\u0627\u062a.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/SS_2000184994.png\" alt=\"\u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0627\u0633\u06a9\u0631\u0648\">\n <\/div>\n<h3 class=\"product-name\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0627\u0633\u06a9\u0631\u0648<\/h3>\n<p class=\"product-desc\">\n \u0628\u0627\u0632\u0637\u0631\u0627\u062d\u06cc \u0648 \u0633\u0627\u062e\u062a \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u0627\u0633\u06a9\u0631\u0648 \u0628\u0631\u0627\u0633\u0627\u0633 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f API619.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/adobestock_134030859-min-scaled.jpeg\" alt=\"\u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632\">\n <\/div>\n<h3 class=\"product-name\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632<\/h3>\n<p class=\"product-desc\">\n \u0633\u0627\u062e\u062a \u0631\u0648\u062a\u0648\u0631\u060c \u067e\u0648\u0633\u062a\u0647 \u06a9\u0627\u0645\u0644 \u0627\u0646\u0648\u0627\u0639 \u067e\u0645\u067e \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632 \u0627\u0632 \u0628\u0631\u0646\u062f\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062c\u0627\u0646\u0628\u06cc \u0622\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 API 610.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/shutterstock_1642049224-min-scaled.jpg\" alt=\"\u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631\">\n <\/div>\n<h3 class=\"product-name\">\u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631<\/h3>\n<p class=\"product-desc\">\n \u0633\u0627\u062e\u062a \u0631\u0648\u062a\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0648 \u0642\u0637\u0639\u0627\u062a \u0627\u0635\u0644\u06cc \u0628\u0647\u0645\u0631\u0627\u0647 \u062a\u0639\u0645\u06cc\u0631 \u0648 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0627\u0646\u0648\u0627\u0639 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u0633\u0627\u0646\u062a\u0631\u06cc\u0641\u06cc\u0648\u0698 \u0647\u0648\u0627\u06cc \u0641\u0634\u0631\u062f\u0647.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/2-scaled.png\" alt=\"\u062f\u0633\u062a\u06af\u0627\u0647 \u062d\u0630\u0641 \u0648\u0627\u0631\u0646\u06cc\u0634 \u0631\u0648\u063a\u0646\">\n <\/div>\n<h3 class=\"product-name\">\u062f\u0633\u062a\u06af\u0627\u0647 \u062d\u0630\u0641 \u0648\u0627\u0631\u0646\u06cc\u0634 \u0631\u0648\u063a\u0646<\/h3>\n<p class=\"product-desc\">\n \u062d\u0630\u0641 \u0648\u0627\u0631\u0646\u06cc\u0634 \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0631\u0648\u063a\u0646\u200c\u06a9\u0627\u0631\u06cc \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0639\u0645\u0631 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u0646\u0648\u06cc\u0646 \u0641\u06cc\u0644\u062a\u0631\u0627\u0633\u06cc\u0648\u0646 \u0648 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0648\u0627\u0631\u0646\u06cc\u0634 \u0627\u0632 \u0631\u0648\u063a\u0646\u200c\u0647\u0627\u06cc \u0635\u0646\u0639\u062a\u06cc.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/adobestock_216987993-min-scaled.jpeg\" alt=\"\u067e\u0645\u067e \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632\">\n <\/div>\n<h3 class=\"product-name\">\u067e\u0645\u067e \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632<\/h3>\n<p class=\"product-desc\">\n \u0628\u0627\u0632 \u0637\u0631\u0627\u062d\u06cc \u0648 \u0645\u0647\u0646\u062f\u0633\u06cc \u0645\u062c\u062f\u062f\u060c \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u0648 \u067e\u06a9\u06cc\u062c\u06cc\u0646\u06af.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p><\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 | \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627<\/title><br \/>\n <\/p>\n<style>\n \/* \u062a\u0639\u0631\u06cc\u0641 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u06cc\u0633\u062a\u0645\u06cc *\/\n @font-face {\n font-family: 'BTitrLocal';\n src: local('B Titr'), local('BTitr'), local('B Titr Bold');\n font-weight: bold;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> @font-face {\n font-family: 'BNazaninLocal';\n src: local('B Nazanin'), local('BNazanin'), local('B Nazanin regular');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n \/* \u0641\u0648\u0646\u062a \u067e\u0627\u06cc\u0647 B Nazanin *\/\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'Tahoma', 'Arial', sans-serif !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n position: relative;\n overflow-x: hidden;\n }<\/p>\n<p> \/* \u0627\u0639\u0645\u0627\u0644 \u0641\u0648\u0646\u062a B Nazanin \u0628\u0647 \u062a\u0645\u0627\u0645 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 \u0628\u0647 \u062c\u0632 \u062a\u06cc\u062a\u0631\u0647\u0627 *\/\n body, body *:not(.section-title):not(.project-title):not(.nav-btn) {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> \/* \u0641\u0648\u0646\u062a \u0645\u062e\u0635\u0648\u0635 \u062a\u06cc\u062a\u0631\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0648 \u062a\u06cc\u062a\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 - B Titr *\/\n .section-title, .project-title {\n font-family: 'BTitrLocal', 'B Titr', 'BTitr', 'B Nazanin', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.12) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.05) 1.5px, transparent 1.5px);\n background-size: 35px 35px;\n pointer-events: none;\n animation: slowDrift 25s linear infinite;\n }<\/p>\n<p> @keyframes slowDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 35px 35px; }\n }<\/p>\n<p> \/* \u0628\u0627\u06a9\u0633 \u0627\u0635\u0644\u06cc \u0628\u0627 \u0639\u0631\u0636 1550px - \u0645\u0637\u0627\u0628\u0642 \u062e\u0648\u0627\u0633\u062a\u0647 \u0634\u0645\u0627 *\/\n .marquee-container {\n max-width: 1550px;\n width: 95%;\n margin: 0 auto;\n padding: 0;\n }<\/p>\n<p> .premium-card {\n background: rgba(255, 255, 255, 0.97);\n backdrop-filter: blur(2px);\n border-radius: 2.2rem;\n box-shadow: 0 35px 60px -20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(196, 154, 108, 0.25);\n overflow: hidden;\n transition: transform 0.4s ease, box-shadow 0.4s ease;\n }<\/p>\n<p> .premium-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 45px 70px -22px rgba(196, 154, 108, 0.35);\n }<\/p>\n<p> .gold-top {\n height: 8px;\n background: linear-gradient(90deg, #0b3b5f, #c49a6c, #e9cf9e, #c49a6c, #0b3b5f);\n background-size: 250% auto;\n animation: goldShimmer 5s linear infinite;\n }<\/p>\n<p> @keyframes goldShimmer {\n 0% { background-position: 0% 0; }\n 100% { background-position: 250% 0; }\n }<\/p>\n<p> .section-header {\n text-align: center;\n padding: 2.5rem 2rem 1.5rem 2rem;\n }<\/p>\n<p> .section-title {\n font-size: 2.5rem;\n font-weight: 800;\n background: linear-gradient(125deg, #10436b, #c49a6c, #e9cf9e, #c49a6c);\n background-size: 300% auto;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n display: inline-block;\n animation: titleFlow 6s linear infinite;\n }<\/p>\n<p> @keyframes titleFlow {\n 0% { background-position: 0% 0; }\n 100% { background-position: 100% 0; }\n }<\/p>\n<p> .section-subtitle {\n color: #6c8ea0;\n margin-top: 0.8rem;\n font-size: 1rem;\n font-weight: 450;\n }<\/p>\n<p> \/* \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 *\/\n .projects-slider {\n position: relative;\n padding: 1rem 2rem 2rem;\n overflow: hidden;\n }<\/p>\n<p> .projects-wrapper {\n overflow: hidden;\n border-radius: 1.5rem;\n }<\/p>\n<p> .projects-track {\n display: flex;\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n gap: 2rem;\n }<\/p>\n<p> \/* \u0647\u0631 \u06a9\u0627\u0631\u062a \u067e\u0631\u0648\u0698\u0647 - \u0628\u0632\u0631\u06af *\/\n .project-card {\n flex: 0 0 calc(33.333% - 1.35rem);\n min-width: calc(33.333% - 1.35rem);\n background: white;\n border-radius: 1.8rem;\n overflow: hidden;\n box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15);\n transition: all 0.3s ease;\n border: 1px solid rgba(196, 154, 108, 0.2);\n cursor: pointer;\n }<\/p>\n<p> .project-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 25px 45px -12px rgba(196, 154, 108, 0.35);\n border-color: #c49a6c;\n }<\/p>\n<p> .project-image {\n width: 100%;\n height: 260px;\n object-fit: cover;\n transition: transform 0.5s ease;\n }<\/p>\n<p> .project-card:hover .project-image {\n transform: scale(1.05);\n }<\/p>\n<p> .image-placeholder {\n width: 100%;\n height: 260px;\n background: linear-gradient(135deg, #e8eef3, #dce5ed);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 4rem;\n color: #c49a6c;\n }<\/p>\n<p> .project-content {\n padding: 1.8rem;\n }<\/p>\n<p> .project-title {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(135deg, #1a4a6e, #c49a6c);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n margin-bottom: 0.75rem;\n }<\/p>\n<p> .project-location {\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n color: #c49a6c;\n font-size: 0.9rem;\n margin-bottom: 1rem;\n background: rgba(196, 154, 108, 0.1);\n padding: 0.3rem 1rem;\n border-radius: 25px;\n }<\/p>\n<p> .project-desc {\n color: #5a6874;\n font-size: 0.95rem;\n line-height: 1.7;\n margin-bottom: 1.2rem;\n }<\/p>\n<p> .project-progress {\n margin-top: 1rem;\n }<\/p>\n<p> .progress-label {\n display: flex;\n justify-content: space-between;\n font-size: 0.8rem;\n color: #7a8e9b;\n margin-bottom: 0.5rem;\n }<\/p>\n<p> .progress-bar {\n height: 8px;\n background: #e2e8f0;\n border-radius: 10px;\n overflow: hidden;\n }<\/p>\n<p> .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #c49a6c, #e9cf9e);\n border-radius: 10px;\n width: 0%;\n transition: width 0.5s ease;\n }<\/p>\n<p> \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc *\/\n .nav-buttons {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n margin-top: 2rem;\n margin-bottom: 1.5rem;\n }<\/p>\n<p> .nav-btn {\n background: linear-gradient(135deg, #1a4a6e, #0b2b3b);\n border: none;\n width: 55px;\n height: 55px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 1.5rem;\n color: #c49a6c;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n }<\/p>\n<p> .nav-btn:hover {\n transform: scale(1.1);\n background: linear-gradient(135deg, #c49a6c, #e9cf9e);\n color: #1a4a6e;\n box-shadow: 0 6px 16px rgba(196, 154, 108, 0.4);\n }<\/p>\n<p> .nav-btn:active {\n transform: scale(0.95);\n }<\/p>\n<p> \/* \u0645\u0633\u062a\u0637\u06cc\u0644\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc *\/\n .rectangles-container {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-top: 1rem;\n margin-bottom: 1rem;\n }<\/p>\n<p> .rect {\n width: 50px;\n height: 8px;\n background: #cbd5e1;\n cursor: pointer;\n transition: all 0.3s ease;\n border-radius: 4px;\n }<\/p>\n<p> .rect.active {\n width: 80px;\n background: linear-gradient(90deg, #c49a6c, #e9cf9e);\n box-shadow: 0 0 8px rgba(196, 154, 108, 0.5);\n }<\/p>\n<p> .rect:hover {\n background: #c49a6c;\n transform: scaleY(1.3);\n }<\/p>\n<p> \/* \u0641\u0648\u062a\u0631 *\/\n .footer-stats {\n display: flex;\n justify-content: center;\n gap: 2rem;\n flex-wrap: wrap;\n padding: 1.8rem 2rem 2rem;\n border-top: 1px solid rgba(196, 154, 108, 0.2);\n margin-top: 0.5rem;\n color: #537e99;\n font-size: 0.9rem;\n }<\/p>\n<p> .stat-item {\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s;\n }<\/p>\n<p> .stat-item:hover {\n color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\n @media (max-width: 1200px) {\n .project-card {\n flex: 0 0 calc(50% - 1rem);\n min-width: calc(50% - 1rem);\n }\n .project-image { height: 230px; }\n }<\/p>\n<p> @media (max-width: 768px) {\n body { padding: 1rem; }\n .marquee-container { padding: 0; }\n .section-title { font-size: 1.8rem; }\n .project-card {\n flex: 0 0 100%;\n min-width: 100%;\n }\n .project-image { height: 200px; }\n .project-title { font-size: 1.3rem; }\n .nav-btn { width: 45px; height: 45px; font-size: 1.2rem; }\n .rect { width: 35px; }\n .rect.active { width: 55px; }\n .footer-stats { gap: 1rem; flex-direction: column; align-items: center; text-align: center; }\n }<\/p>\n<p> @media (max-width: 480px) {\n .section-title { font-size: 1.5rem; }\n .section-header { padding: 1.5rem 1rem 1rem 1rem; }\n .projects-slider { padding: 0.5rem 1rem 1.5rem; }\n .project-content { padding: 1.2rem; }\n .project-title { font-size: 1.1rem; }\n .project-desc { font-size: 0.85rem; }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"marquee-container\">\n<div class=\"premium-card\">\n<div class=\"gold-top\"><\/div>\n<div class=\"section-header\">\n<h2 class=\"section-title\">\u26a1 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u26a1<\/h2>\n<div class=\"section-subtitle\">\u0627\u0641\u062a\u062e\u0627\u0631 \u0645\u0627 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0648 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0635\u0646\u0639\u062a\u06cc \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0627\u06cc\u0631\u0627\u0646<\/div>\n<\/p><\/div>\n<div class=\"projects-slider\">\n<div class=\"projects-wrapper\">\n<div class=\"projects-track\" id=\"projectsTrack\">\n \n <\/div>\n<\/p><\/div>\n<div class=\"nav-buttons\">\n <button class=\"nav-btn\" id=\"prevBtn\">\u25c0<\/button><br \/>\n <button class=\"nav-btn\" id=\"nextBtn\">\u25b6<\/button>\n <\/div>\n<div class=\"rectangles-container\" id=\"rectanglesContainer\">\n \n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n \/\/ ==================== \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 ====================\n const projects = [\n {\n id: 1,\n title: \"\u0646\u0635\u0628 \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632\u06cc\",\n location: \"\u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0633\u06cc\u06a9\u0644 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0633\u0645\u0646\u0627\u0646\",\n description: \"\u0646\u0635\u0628 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06f2\u06f5 \u0645\u06af\u0627\u0648\u0627\u062a\u06cc \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0646\u062a\u0631\u0644 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0627 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0631\u0648\u0632 \u062f\u0646\u06cc\u0627\",\n progress: 75,\n imageUrl: \"https:\/\/cdn.donya-e-eqtesad.com\/thumbnail\/2Ydqo2xkFM5X\/QHn8O9nsSzT8qCU7RegsN6Pbb5v74eEtbKeSOh05RaZI8qV6Z6Fm1kt7TZyzEhnm\/%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-%D8%AA%D9%88%D8%B1%D8%A8%DB%8C%D9%86-%DA%AF%D8%A7%D8%B2-Gas-turbine+copy.jpg\"\n },\n {\n id: 2,\n title: \"\u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632\",\n location: \"\u067e\u0627\u0644\u0627\u06cc\u0634\u06af\u0627\u0647 \u0646\u0641\u062a \u0622\u0628\u0627\u062f\u0627\u0646\",\n description: \"\u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u06f4 \u062f\u0633\u062a\u06af\u0627\u0647 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0631\u0627\u0646\u062f\u0645\u0627\u0646 \u06f1\u06f8\u066a \u062f\u0631 \u0628\u0627\u0632\u0647 \u0632\u0645\u0627\u0646\u06cc \u06f6 \u0645\u0627\u0647\u0647\",\n progress: 60,\n imageUrl: \"https:\/\/blog.havasazantabriz.com\/wp-content\/uploads\/2020\/09\/AF.jpg\"\n },\n {\n id: 3,\n title: \"\u062a\u0639\u0645\u06cc\u0631\u0627\u062a \u0627\u0633\u0627\u0633\u06cc \u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631\",\n location: \"\u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc \u0628\u0646\u062f\u0631 \u0627\u0645\u0627\u0645\",\n description: \"\u062a\u0639\u0645\u06cc\u0631\u0627\u062a \u0627\u0633\u0627\u0633\u06cc \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0648\u0631\u0628\u06cc\u0646 \u06f5\u06f0 \u0645\u06af\u0627\u0648\u0627\u062a\u06cc \u0628\u0627 \u0622\u062e\u0631\u06cc\u0646 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc\",\n progress: 90,\n imageUrl: \"https:\/\/pamco.ir\/wp-content\/uploads\/2021\/11\/1000-654-1.jpg\"\n },\n {\n id: 4,\n title: \"\u0627\u0631\u062a\u0642\u0627\u0621 \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0646\u062a\u0631\u0644 \u062a\u0648\u0631\u0628\u06cc\u0646\",\n location: \"\u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0634\u0647\u06cc\u062f \u0631\u062c\u0627\u06cc\u06cc\",\n description: \"\u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0646\u062a\u0631\u0644 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u062c\u062f\u06cc\u062f \u0648 \u0647\u0648\u0634\u0645\u0646\u062f\u0633\u0627\u0632\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a\u06cc\",\n progress: 45,\n imageUrl: \"https:\/\/images.unsplash.com\/photo-1581092160562-40aa08e78837?w=800&h=500&fit=crop\"\n },\n {\n id: 5,\n title: \"\u062a\u0627\u0645\u06cc\u0646 \u0642\u0637\u0639\u0627\u062a \u06cc\u062f\u06a9\u06cc \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\",\n location: \"\u0641\u0648\u0644\u0627\u062f \u0645\u0628\u0627\u0631\u06a9\u0647 \u0627\u0635\u0641\u0647\u0627\u0646\",\n description: \"\u062a\u0627\u0645\u06cc\u0646 \u0648 \u0646\u0635\u0628 \u0642\u0637\u0639\u0627\u062a \u0627\u0635\u0644\u06cc \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u0645\u062d\u0648\u0631\u06cc \u0628\u0627 \u06af\u0627\u0631\u0627\u0646\u062a\u06cc \u06f2\u06f4 \u0645\u0627\u0647\u0647\",\n progress: 100,\n imageUrl: \"https:\/\/images.unsplash.com\/photo-1581091226033-d5c48150dbaa?w=800&h=500&fit=crop\"\n },\n {\n id: 6,\n title: \"\u0627\u0648\u0631\u0647\u0627\u0644 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632\u06cc \u06f3\u06f0 \u0645\u06af\u0627\u0648\u0627\u062a\u06cc\",\n location: \"\u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0628\u0639\u062b\u062a \u062a\u0647\u0631\u0627\u0646\",\n description: \"\u0627\u0648\u0631\u0647\u0627\u0644 \u06a9\u0627\u0645\u0644 \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0631\u0627\u0646\u062f\u0645\u0627\u0646 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632\u06cc \u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0628\u0639\u062b\u062a\",\n progress: 35,\n imageUrl: \"https:\/\/images.unsplash.com\/photo-1542736667-069246bdbc6d?w=800&h=500&fit=crop\"\n }\n ];<\/p>\n<p> \/\/ \u062d\u0627\u0644\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\n let currentIndex = 0;\n let slidesToShow = 3;\n const track = document.getElementById('projectsTrack');\n const rectanglesContainer = document.getElementById('rectanglesContainer');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');<\/p>\n<p> \/\/ \u062a\u0634\u062e\u06cc\u0635 \u062a\u0639\u062f\u0627\u062f \u0627\u0633\u0644\u0627\u06cc\u062f\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0646\u0645\u0627\u06cc\u0634\n function updateSlidesToShow() {\n if (window.innerWidth <= 768) {\n slidesToShow = 1;\n } else if (window.innerWidth <= 1200) {\n slidesToShow = 2;\n } else {\n slidesToShow = 3;\n }\n }\n \n \/\/ \u0633\u0627\u062e\u062a \u06a9\u0627\u0631\u062a \u067e\u0631\u0648\u0698\u0647\n function createProjectCard(project) {\n const card = document.createElement('div');\n card.className = 'project-card';\n \n const imageContainer = document.createElement('div');\n imageContainer.style.overflow = 'hidden';\n imageContainer.style.position = 'relative';\n \n const img = document.createElement('img');\n img.className = 'project-image';\n img.src = project.imageUrl;\n img.alt = project.title;\n img.loading = 'lazy';\n img.onerror = function() {\n this.style.display = 'none';\n const placeholder = document.createElement('div');\n placeholder.className = 'image-placeholder';\n placeholder.innerHTML = '\ud83c\udfed';\n imageContainer.appendChild(placeholder);\n };\n imageContainer.appendChild(img);\n \n const content = document.createElement('div');\n content.className = 'project-content';\n content.innerHTML = `\n \n\n<h3 class=\"project-title\">${project.title}<\/h3>\n<div class=\"project-location\">\n \ud83d\udccd ${project.location}\n <\/div>\n<p class=\"project-desc\">${project.description}<\/p>\n<div class=\"project-progress\">\n<div class=\"progress-label\">\n <span>\u067e\u06cc\u0634\u0631\u0641\u062a \u067e\u0631\u0648\u0698\u0647<\/span>\n <span>${project.progress}%<\/span>\n <\/div>\n<div class=\"progress-bar\">\n<div class=\"progress-fill\" style=\"width: ${project.progress}%\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> card.appendChild(imageContainer);\n card.appendChild(content);<\/p>\n<p> return card;\n }<\/p>\n<p> function renderSlides() {\n updateSlidesToShow();\n track.innerHTML = '';<\/p>\n<p> const endIndex = Math.min(currentIndex + slidesToShow, projects.length);\n for (let i = currentIndex; i < endIndex; i++) {\n const card = createProjectCard(projects[i]);\n track.appendChild(card);\n }\n \n const displayedCount = endIndex - currentIndex;\n const gap = slidesToShow - displayedCount;\n if (gap > 0 && gap < slidesToShow) {\n for (let i = 0; i < gap; i++) {\n const emptyDiv = document.createElement('div');\n emptyDiv.style.flex = `0 0 calc(${100\/slidesToShow}% - 1.35rem)`;\n emptyDiv.style.minWidth = `calc(${100\/slidesToShow}% - 1.35rem)`;\n emptyDiv.style.visibility = 'hidden';\n track.appendChild(emptyDiv);\n }\n }\n \n updateRectangles();\n updateButtons();\n }\n \n function updateRectangles() {\n rectanglesContainer.innerHTML = '';\n const totalPages = Math.ceil(projects.length \/ slidesToShow);\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n \n for (let i = 0; i < totalPages; i++) {\n const rect = document.createElement('div');\n rect.className = 'rect';\n if (i === currentPage) {\n rect.classList.add('active');\n }\n rect.addEventListener('click', () => {\n currentIndex = i * slidesToShow;\n if (currentIndex >= projects.length) {\n currentIndex = projects.length - slidesToShow;\n }\n if (currentIndex < 0) currentIndex = 0;\n renderSlides();\n });\n rectanglesContainer.appendChild(rect);\n }\n }\n \n function updateButtons() {\n const totalPages = Math.ceil(projects.length \/ slidesToShow);\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n \n prevBtn.disabled = currentPage === 0;\n nextBtn.disabled = currentPage === totalPages - 1;\n \n prevBtn.style.opacity = prevBtn.disabled ? '0.4' : '1';\n nextBtn.style.opacity = nextBtn.disabled ? '0.4' : '1';\n prevBtn.style.cursor = prevBtn.disabled ? 'not-allowed' : 'pointer';\n nextBtn.style.cursor = nextBtn.disabled ? 'not-allowed' : 'pointer';\n }\n \n function nextSlide() {\n const totalPages = Math.ceil(projects.length \/ slidesToShow);\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n \n if (currentPage + 1 < totalPages) {\n currentIndex = (currentPage + 1) * slidesToShow;\n renderSlides();\n }\n }\n \n function prevSlide() {\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n if (currentPage - 1 >= 0) {\n currentIndex = (currentPage - 1) * slidesToShow;\n renderSlides();\n }\n }<\/p>\n<p> prevBtn.addEventListener('click', prevSlide);\n nextBtn.addEventListener('click', nextSlide);<\/p>\n<p> let resizeTimer;\n window.addEventListener('resize', () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n currentIndex = currentPage * slidesToShow;\n if (currentIndex >= projects.length) {\n currentIndex = Math.max(0, projects.length - slidesToShow);\n }\n renderSlides();\n }, 150);\n });<\/p>\n<p> renderSlides();\n<\/script><br \/>\n<\/body><br \/>\n<\/html> <\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 | \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0647\u0645\u0631\u0627\u0647\u0627\u0646 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u06a9<\/title><\/p>\n<style>\n @font-face {\n font-family: 'BTitrLocal';\n src: local('B Titr'), local('BTitr'), local('B Titr Bold');\n font-weight: bold;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> @font-face {\n font-family: 'BNazaninLocal';\n src: local('B Nazanin'), local('BNazanin'), local('B Nazanin regular');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'Tahoma', sans-serif !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n position: relative;\n overflow-x: hidden;\n }<\/p>\n<p> body, body *:not(.main-title) {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'Tahoma', sans-serif !important;\n }<\/p>\n<p> .main-title {\n font-family: 'BTitrLocal', 'B Titr', 'BTitr', 'B Nazanin', 'Tahoma', sans-serif !important;\n font-size: 2.3rem;\n font-weight: 800;\n background: linear-gradient(125deg, #10436b, #c49a6c, #e9cf9e, #c49a6c);\n background-size: 300% auto;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: -0.3px;\n display: inline-block;\n animation: titleFlow 6s linear infinite;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.12) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.05) 1.5px, transparent 1.5px);\n background-size: 35px 35px;\n pointer-events: none;\n animation: slowDrift 25s linear infinite;\n }<\/p>\n<p> @keyframes slowDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 35px 35px; }\n }<\/p>\n<p> @keyframes titleFlow {\n 0% { background-position: 0% 0; }\n 100% { background-position: 100% 0; }\n }<\/p>\n<p> .marquee-container {\n max-width: 1550px;\n width: 100%;\n margin: 0 auto;\n }<\/p>\n<p> .premium-card {\n background: rgba(255, 255, 255, 0.97);\n backdrop-filter: blur(2px);\n border-radius: 2.2rem;\n box-shadow: 0 35px 60px -20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(196, 154, 108, 0.25);\n overflow: hidden;\n transition: transform 0.4s ease, box-shadow 0.4s ease;\n }<\/p>\n<p> .premium-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 45px 70px -22px rgba(196, 154, 108, 0.35), 0 0 0 1px rgba(196, 154, 108, 0.5);\n }<\/p>\n<p> .gold-top {\n height: 8px;\n background: linear-gradient(90deg, #0b3b5f, #0072ff, #ffffff, #ff6262, #0b3b5f);\n background-size: 250% auto;\n animation: goldShimmer 5s linear infinite;\n }<\/p>\n<p> @keyframes goldShimmer {\n 0% { background-position: 0% 0; }\n 100% { background-position: 250% 0; }\n }<\/p>\n<p> .card-header {\n text-align: center;\n padding: 2rem 2rem 1rem 2rem;\n }<\/p>\n<p> .subhead {\n color: #6c8ea0;\n margin-top: 0.8rem;\n font-size: 0.95rem;\n font-weight: 450;\n border-top: 1px dashed rgba(196, 154, 108, 0.3);\n display: inline-block;\n padding-top: 0.6rem;\n }<\/p>\n<p> .slider-box {\n background: #fefcf7;\n margin: 1.2rem 0rem 2rem 0rem;\n border-radius: 1rem;\n padding: 2rem 0rem;\n box-shadow: inset 0 1px 4px rgba(0,0,0,0.02), 0 10px 20px -8px rgba(0,0,0,0.1);\n position: relative;\n overflow: hidden;\n border: 1px solid rgba(196, 154, 108, 0.35);\n }<\/p>\n<p> .marquee-track {\n overflow: hidden;\n white-space: nowrap;\n position: relative;\n width: 100%;\n }<\/p>\n<p> .marquee-content {\n display: inline-block;\n white-space: nowrap;\n will-change: transform;\n }<\/p>\n<p> \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0644\u0648\u06af\u0648\u06cc \u0645\u062a\u0646\u06cc (\u0628\u062f\u0648\u0646 \u0639\u06a9\u0633 \u062e\u0627\u0631\u062c\u06cc) *\/\n .logo-item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 210px;\n height: 115px;\n margin: 0 18px;\n background: white;\n border-radius: 28px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0,0,0,0.03);\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n vertical-align: middle;\n border: 1px solid rgba(196, 154, 108, 0.25);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(2px);\n }<\/p>\n<p> .logo-item::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(120deg, transparent, rgba(196, 154, 108, 0.15), transparent);\n transform: translateX(-100%);\n transition: transform 0.6s ease;\n }<\/p>\n<p> .logo-item:hover::before {\n transform: translateX(100%);\n }<\/p>\n<p> .logo-item:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 30px -10px rgba(196, 154, 108, 0.35);\n border-color: #c49a6c;\n }<\/p>\n<p> \/* \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0644\u0648\u06af\u0648 *\/\n .logo-content {\n text-align: center;\n width: 100%;\n padding: 0 0.5rem;\n }<\/p>\n<p> .logo-icon {\n font-size: 2.5rem;\n display: block;\n margin-bottom: 6px;\n }<\/p>\n<p> .logo-name {\n font-size: 0.85rem;\n font-weight: 700;\n line-height: 1.4;\n word-break: keep-all;\n display: inline-block;\n max-width: 100%;\n }<\/p>\n<p> .controls-info {\n text-align: center;\n margin-top: 1.2rem;\n font-size: 0.75rem;\n color: #9bafbf;\n }<\/p>\n<p> .controls-info i {\n font-style: normal;\n background: rgba(196, 154, 108, 0.15);\n padding: 0.2rem 1rem;\n border-radius: 50px;\n display: inline-block;\n }<\/p>\n<p> .footer-stats {\n display: flex;\n justify-content: center;\n gap: 1.8rem;\n flex-wrap: wrap;\n padding: 1.5rem 2rem 2rem;\n border-top: 1px solid rgba(196, 154, 108, 0.2);\n margin-top: 0.5rem;\n color: #537e99;\n font-size: 0.85rem;\n }<\/p>\n<p> .stat-item {\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s;\n }<\/p>\n<p> .stat-item:hover {\n color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> @media (max-width: 768px) {\n body { padding: 1rem; }\n .main-title { font-size: 1.7rem; }\n .logo-item { width: 170px; height: 95px; margin: 0 12px; }\n .logo-icon { font-size: 2rem; }\n .logo-name { font-size: 0.75rem; }\n .slider-box { margin: 1rem 0rem 1.5rem 0rem; padding: 1.5rem 0; }\n }<\/p>\n<p> @media (max-width: 480px) {\n .logo-item { width: 145px; height: 85px; margin: 0 8px; }\n .logo-icon { font-size: 1.7rem; }\n .logo-name { font-size: 0.7rem; }\n .main-title { font-size: 1.4rem; }\n .card-header { padding: 1.2rem 1rem 0.5rem 1rem; }\n .slider-box { margin: 0.8rem 0rem 1rem 0rem; }\n }\n <\/style>\n<p> \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n<\/head><br \/>\n<body><\/p>\n<div class=\"marquee-container\">\n<div class=\"premium-card\">\n<div class=\"gold-top\"><\/div>\n<div class=\"card-header\">\n<h1 class=\"main-title\">\u258d \u0647\u0645\u0631\u0627\u0647\u0627\u0646 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u06a9 \u258d<\/h1>\n<div class=\"subhead\">\u0627\u0641\u062a\u062e\u0627\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u0628\u0631\u0646\u062f\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0635\u0646\u0639\u062a\u06cc \u0627\u06cc\u0631\u0627\u0646<\/div>\n<\/p><\/div>\n<div class=\"slider-box\">\n<div class=\"marquee-track\">\n<div class=\"marquee-content\" id=\"marqueeContent\"><\/div>\n<\/p><\/div>\n<div class=\"controls-info\">\n <i class=\"fas fa-arrows-alt-h\"><\/i> \u0646\u0634\u0627\u0646 \u0645\u0648\u0633 \u2013 \u062a\u0648\u0642\u0641 \u062d\u0631\u06a9\u062a\n <\/div>\n<\/p><\/div>\n<div class=\"footer-stats\">\n<div class=\"stat-item\"><i class=\"fas fa-chart-line\"><\/i> \u0628\u06cc\u0634 \u0627\u0632 \u06f1\u06f4\u06f0 \u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div>\n<div class=\"stat-item\"><i class=\"fas fa-users\"><\/i> \u06f5\u06f0+ \u0645\u062a\u062e\u0635\u0635 \u0627\u0631\u0634\u062f<\/div>\n<div class=\"stat-item\"><i class=\"fas fa-globe\"><\/i> \u0635\u0627\u062f\u0631\u0627\u062a \u0628\u0647 \u06f7 \u06a9\u0634\u0648\u0631<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n \/\/ \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a\u200c\u0647\u0627 (\u0646\u0627\u0645\u060c \u0631\u0646\u06af \u0645\u062a\u0646\u060c \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647\u060c \u0622\u06cc\u06a9\u0648\u0646)\n const companies = [\n { name: \"\u0641\u0648\u0644\u0627\u062f \u0645\u0628\u0627\u0631\u06a9\u0647\", bgColor: \"#FFF8F0\", textColor: \"#b3572c\", icon: \"\ud83c\udfed\" },\n { name: \"\u067e\u0627\u0644\u0627\u06cc\u0634 \u0646\u0641\u062a \u0622\u0628\u0627\u062f\u0627\u0646\", bgColor: \"#EFF6FF\", textColor: \"#1f6daf\", icon: \"\u26fd\" },\n { name: \"\u0633\u067e\u0627\u0647\u0627\u0646 \u0627\u0646\u0631\u0698\u06cc\", bgColor: \"#FFF2E6\", textColor: \"#c25d2c\", icon: \"\u26a1\" },\n { name: \"\u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc \u0634\u0627\u0632\u0646\u062f\", bgColor: \"#EBF5FF\", textColor: \"#0f5b8c\", icon: \"\ud83e\uddea\" },\n { name: \"\u06af\u0644\u200c\u06af\u0647\u0631 \u0633\u06cc\u0631\u062c\u0627\u0646\", bgColor: \"#F2F8EA\", textColor: \"#557a33\", icon: \"\u26cf\ufe0f\" },\n { name: \"\u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0634\u0647\u06cc\u062f \u0631\u062c\u0627\u06cc\u06cc\", bgColor: \"#FEF1E5\", textColor: \"#b85a2b\", icon: \"\ud83d\udd25\" },\n { name: \"\u0630\u0648\u0628\u200c\u0622\u0647\u0646 \u0627\u0635\u0641\u0647\u0627\u0646\", bgColor: \"#F5F0FD\", textColor: \"#6b3fa0\", icon: \"\u2699\ufe0f\" },\n { name: \"\u06af\u0631\u0648\u0647 \u0645\u067e\u0646\u0627\", bgColor: \"#FFF9EF\", textColor: \"#c88f3c\", icon: \"\ud83d\udd27\" },\n { name: \"\u0634\u0631\u06a9\u062a \u0646\u0641\u062a \u0648 \u06af\u0627\u0632 \u067e\u0627\u0631\u0633\", bgColor: \"#E8F2F5\", textColor: \"#327a8a\", icon: \"\ud83d\udee2\ufe0f\" },\n { name: \"\u0645\u0633 \u0633\u0631\u0686\u0634\u0645\u0647\", bgColor: \"#FEF6E0\", textColor: \"#b5622e\", icon: \"\u26f0\ufe0f\" },\n { name: \"\u067e\u0627\u0644\u0627\u06cc\u0634 \u0646\u0641\u062a \u0627\u0635\u0641\u0647\u0627\u0646\", bgColor: \"#F0F7FF\", textColor: \"#2c6e9e\", icon: \"\ud83c\udfed\" },\n { name: \"\u0635\u0646\u0627\u06cc\u0639 \u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc \u062e\u0644\u06cc\u062c \u0641\u0627\u0631\u0633\", bgColor: \"#FFF4EA\", textColor: \"#b55b2a\", icon: \"\ud83c\udf0a\" },\n { name: \"\u0634\u0631\u06a9\u062a \u0645\u0644\u06cc \u0646\u0641\u062a \u0627\u06cc\u0631\u0627\u0646\", bgColor: \"#E8F0F8\", textColor: \"#1a5f8b\", icon: \"\ud83d\udee2\ufe0f\" },\n { name: \"\u0641\u0648\u0644\u0627\u062f \u062e\u0648\u0632\u0633\u062a\u0627\u0646\", bgColor: \"#FFF3E8\", textColor: \"#b45a2c\", icon: \"\ud83c\udfed\" }\n ];<\/p>\n<p> const marqueeContentDiv = document.getElementById('marqueeContent');<\/p>\n<p> \/\/ \u0633\u0627\u062e\u062a \u0622\u06cc\u062a\u0645 \u0644\u0648\u06af\u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 DOM (\u0628\u062f\u0648\u0646 canvas \u0648 \u0628\u062f\u0648\u0646 \u0639\u06a9\u0633 \u062e\u0627\u0631\u062c\u06cc)\n function createLogoItem(company) {\n const itemDiv = document.createElement('div');\n itemDiv.className = 'logo-item';\n \/\/ \u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0627\u0632 \u0631\u0648\u06cc \u0634\u0631\u06a9\u062a\n itemDiv.style.backgroundColor = company.bgColor;<\/p>\n<p> const contentDiv = document.createElement('div');\n contentDiv.className = 'logo-content';<\/p>\n<p> const iconSpan = document.createElement('div');\n iconSpan.className = 'logo-icon';\n iconSpan.innerText = company.icon;<\/p>\n<p> const nameSpan = document.createElement('div');\n nameSpan.className = 'logo-name';\n nameSpan.innerText = company.name;\n nameSpan.style.color = company.textColor;<\/p>\n<p> contentDiv.appendChild(iconSpan);\n contentDiv.appendChild(nameSpan);\n itemDiv.appendChild(contentDiv);<\/p>\n<p> return itemDiv;\n }<\/p>\n<p> \/\/ \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u0628\u0627 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0627\u0641\u06cc\n function buildInfiniteMarquee() {\n marqueeContentDiv.innerHTML = '';<\/p>\n<p> \/\/ \u0633\u0627\u062e\u062a \u0622\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc\n const items = companies.map(company => createLogoItem(company));<\/p>\n<p> \/\/ \u0628\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u0628\u062f\u0648\u0646 \u0648\u0642\u0641\u0647\u060c \u062d\u062f\u0627\u0642\u0644 \u06f3 \u0628\u0627\u0631 \u062a\u06a9\u0631\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\n const repeatCount = 3;\n for (let i = 0; i < repeatCount; i++) {\n for (let item of items) {\n const clone = item.cloneNode(true);\n marqueeContentDiv.appendChild(clone);\n }\n }\n \n \/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u0639\u0631\u0636 \u06a9\u0644 \u0645\u062d\u062a\u0648\u0627 \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\n setTimeout(() => {\n const content = marqueeContentDiv;\n const totalWidth = content.scrollWidth;\n const singleSetWidth = totalWidth \/ repeatCount;<\/p>\n<p> \/\/ \u0633\u0631\u0639\u062a \u062d\u0631\u06a9\u062a: 50 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631 \u062b\u0627\u0646\u06cc\u0647\n const speed = 55;\n const duration = totalWidth \/ speed;<\/p>\n<p> \/\/ \u0633\u0627\u062e\u062a \u06a9\u0644\u06cc\u062f\u0641\u0631\u06cc\u0645 \u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\n const style = document.createElement('style');\n const animationName = 'infiniteMarquee_' + Date.now();\n style.textContent = `\n @keyframes ${animationName} {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-${singleSetWidth}px); }\n }\n .marquee-content {\n animation: ${animationName} ${duration}s linear infinite !important;\n }\n `;\n \/\/ \u062d\u0630\u0641 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0642\u062f\u06cc\u0645\u06cc \u0627\u06af\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\n const oldStyle = document.getElementById('dynamicMarqueeStyle');\n if (oldStyle) oldStyle.remove();\n style.id = 'dynamicMarqueeStyle';\n document.head.appendChild(style);<\/p>\n<p> console.log(`\u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u0633\u0631\u0639\u062a ${speed}px\/s \u0648 \u0645\u062f\u062a ${duration.toFixed(2)} \u062b\u0627\u0646\u06cc\u0647 \u0622\u063a\u0627\u0632 \u0634\u062f`);\n }, 100);\n }<\/p>\n<p> \/\/ \u062a\u0648\u0642\u0641 \u0648 \u0634\u0631\u0648\u0639 \u062d\u0631\u06a9\u062a \u0631\u0648\u06cc \u0647\u0627\u0648\u0631 (\u0645\u0627\u0648\u0633 \u0648 \u0644\u0645\u0633\u06cc)\n const sliderBox = document.querySelector('.slider-box');\n if (sliderBox) {\n const pauseAnimation = () => {\n const marquee = document.querySelector('.marquee-content');\n if (marquee) marquee.style.animationPlayState = 'paused';\n };\n const resumeAnimation = () => {\n const marquee = document.querySelector('.marquee-content');\n if (marquee) marquee.style.animationPlayState = 'running';\n };\n sliderBox.addEventListener('mouseenter', pauseAnimation);\n sliderBox.addEventListener('mouseleave', resumeAnimation);\n sliderBox.addEventListener('touchstart', pauseAnimation);\n sliderBox.addEventListener('touchend', resumeAnimation);\n }<\/p>\n<p> \/\/ \u0627\u062c\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647\n buildInfiniteMarquee();<\/p>\n<p> \/\/ \u062f\u0631 \u0635\u0648\u0631\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647\u060c \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0631\u0627 \u0645\u062d\u0627\u0633\u0628\u0647 \u06a9\u0646\n let resizeTimer;\n window.addEventListener('resize', () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n buildInfiniteMarquee();\n }, 250);\n });\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 | \u0641\u0648\u062a\u0631 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/title><br \/>\n <\/p>\n<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n \/* \u0641\u0642\u0637 \u0648 \u0641\u0642\u0637 \u0641\u0648\u0646\u062a B Koodak - \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u0641\u0648\u0646\u062a \u062f\u06cc\u06af\u0631\u06cc *\/\n font-family: 'B Koodak', 'BKoodak', 'B Koodak Bold', Tahoma, Arial !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n position: relative;\n overflow-x: hidden;\n }<\/p>\n<p> \/* \u0627\u0639\u0645\u0627\u0644 \u0627\u062c\u0628\u0627\u0631\u06cc \u0641\u0648\u0646\u062a B Koodak \u0628\u0647 \u062a\u06a9 \u062a\u06a9 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 *\/\n body, body *,\n h1, h2, h3, h4, h5, h6,\n p, span, div, a, li, ul, ol,\n .footer, .footer *, .footer-col h3,\n .footer-links a, .contact-info p,\n .social-links a, .expertise-badge,\n .copyright, .footer-logo span {\n font-family: 'B Koodak', 'BKoodak', 'B Koodak Bold', Tahoma, Arial !important;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(52, 152, 219, 0.08) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(52, 152, 219, 0.04) 1.5px, transparent 1.5px);\n background-size: 35px 35px;\n pointer-events: none;\n animation: slowDrift 25s linear infinite;\n }<\/p>\n<p> @keyframes slowDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 35px 35px; }\n }<\/p>\n<p> \/* \u0628\u0627\u06a9\u0633 \u0627\u0635\u0644\u06cc \u062e\u0627\u0644\u06cc (\u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0641\u0648\u062a\u0631) *\/\n .empty-space {\n max-width: 1550px;\n width: 100%;\n margin: 0 auto;\n height: 100px;\n }<\/p>\n<p> \/* ==================== \u0641\u0648\u062a\u0631 \u062c\u0630\u0627\u0628 \u0648 \u0645\u062f\u0631\u0646 \u0628\u0627 \u062a\u0645 \u0622\u0628\u06cc ==================== *\/\n .footer {\n max-width: 1550px;\n width: 100%;\n margin: 0 auto;\n border-radius: 2rem;\n overflow: hidden;\n position: relative;\n background: linear-gradient(135deg, #0a1620 0%, #0f1e2e 50%, #0a1620 100%);\n box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(52, 152, 219, 0.25);\n }<\/p>\n<p> \/* \u0627\u0641\u06a9\u062a \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u062a \u0645\u062a\u062d\u0631\u06a9 \u062f\u0631 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0641\u0648\u062a\u0631 *\/\n .footer::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(45deg, \n transparent 30%, \n rgba(52, 152, 219, 0.05) 50%, \n transparent 70%);\n background-size: 200% 200%;\n animation: footerShine 8s ease infinite;\n pointer-events: none;\n }<\/p>\n<p> @keyframes footerShine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }<\/p>\n<p> \/* \u062e\u0637 \u0622\u0628\u06cc \u0628\u0627\u0644\u0627\u06cc \u0641\u0648\u062a\u0631 *\/\n .footer-blue {\n height: 3px;\n background: linear-gradient(90deg, \n transparent, \n #3498db, \n #5dade2, \n #2980b9, \n transparent);\n background-size: 200% auto;\n animation: blueLineMove 3s linear infinite;\n }<\/p>\n<p> @keyframes blueLineMove {\n 0% { background-position: 0% 0; }\n 100% { background-position: 200% 0; }\n }<\/p>\n<p> .footer-content {\n padding: 3rem 2.5rem 2rem;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> .footer-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2rem;\n margin-bottom: 2.5rem;\n }<\/p>\n<p> \/* \u0647\u0631 \u0633\u062a\u0648\u0646 \u0641\u0648\u062a\u0631 *\/\n .footer-col h3 {\n color: #5dade2;\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 1.5rem;\n position: relative;\n display: inline-block;\n }<\/p>\n<p> .footer-col h3::after {\n content: '';\n position: absolute;\n bottom: -8px;\n right: 0;\n width: 40px;\n height: 3px;\n background: linear-gradient(90deg, #3498db, #5dade2);\n border-radius: 3px;\n transition: width 0.3s ease;\n }<\/p>\n<p> .footer-col:hover h3::after {\n width: 70px;\n }<\/p>\n<p> .footer-links {\n list-style: none;\n }<\/p>\n<p> .footer-links li {\n margin-bottom: 0.8rem;\n }<\/p>\n<p> .footer-links a {\n color: #a0b4c8;\n text-decoration: none;\n transition: all 0.3s ease;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9rem;\n }<\/p>\n<p> .footer-links a i {\n font-size: 0.8rem;\n opacity: 0;\n transform: translateX(-10px);\n transition: all 0.3s ease;\n color: #3498db;\n }<\/p>\n<p> .footer-links a:hover {\n color: #5dade2;\n transform: translateX(-5px);\n }<\/p>\n<p> .footer-links a:hover i {\n opacity: 1;\n transform: translateX(0);\n }<\/p>\n<p> \/* \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062a\u0645\u0627\u0633 *\/\n .contact-info p {\n display: flex;\n align-items: center;\n gap: 0.8rem;\n margin-bottom: 1rem;\n color: #a0b4c8;\n font-size: 0.9rem;\n transition: all 0.3s ease;\n }<\/p>\n<p> .contact-info p i {\n width: 30px;\n height: 30px;\n background: rgba(52, 152, 219, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n color: #3498db;\n transition: all 0.3s ease;\n }<\/p>\n<p> .contact-info p:hover {\n color: #5dade2;\n transform: translateX(-5px);\n }<\/p>\n<p> .contact-info p:hover i {\n background: rgba(52, 152, 219, 0.2);\n transform: scale(1.1);\n }<\/p>\n<p> \/* \u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc *\/\n .social-links {\n display: flex;\n gap: 1rem;\n margin-top: 1.5rem;\n flex-wrap: wrap;\n }<\/p>\n<p> .social-links a {\n width: 40px;\n height: 40px;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #a0b4c8;\n font-size: 1.2rem;\n transition: all 0.3s ease;\n text-decoration: none;\n border: 1px solid rgba(52, 152, 219, 0.25);\n }<\/p>\n<p> .social-links a:hover {\n background: linear-gradient(135deg, #3498db, #2980b9);\n color: #fff;\n transform: translateY(-5px) rotate(360deg);\n border-color: transparent;\n }<\/p>\n<p> \/* \u0628\u0631\u0686\u0633\u0628 \u062a\u062e\u0635\u0635 *\/\n .expertise-badge {\n margin-top: 1.5rem;\n padding: 0.8rem 1rem;\n background: rgba(52, 152, 219, 0.08);\n border-radius: 12px;\n text-align: center;\n font-size: 0.85rem;\n color: #3498db;\n border-right: 3px solid #3498db;\n }<\/p>\n<p> \/* \u06a9\u067e\u06cc\u200c\u0631\u0627\u06cc\u062a *\/\n .copyright {\n text-align: center;\n padding-top: 1.8rem;\n margin-top: 1rem;\n border-top: 1px solid rgba(52, 152, 219, 0.15);\n color: #6a8098;\n font-size: 0.8rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n }<\/p>\n<p> .copyright .heart {\n color: #3498db;\n display: inline-flex;\n align-items: center;\n gap: 0.2rem;\n }<\/p>\n<p> .copyright a {\n color: #3498db;\n text-decoration: none;\n transition: opacity 0.3s;\n }<\/p>\n<p> .copyright a:hover {\n opacity: 0.8;\n }<\/p>\n<p> \/* \u0644\u0648\u06af\u0648 \u06cc\u0627 \u0646\u0634\u0627\u0646 \u0634\u0631\u06a9\u062a (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc) *\/\n .footer-logo {\n margin-bottom: 1rem;\n }<\/p>\n<p> .footer-logo span {\n font-size: 1.5rem;\n font-weight: 800;\n background: linear-gradient(135deg, #5dade2, #3498db, #2980b9);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n }<\/p>\n<p> \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0641\u0648\u062a\u0631 *\/\n @media (max-width: 1000px) {\n .footer-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n }<\/p>\n<p> @media (max-width: 768px) {\n body { padding: 1rem; }\n .footer-content { padding: 2rem 1.5rem; }\n .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n .copyright { flex-direction: column; text-align: center; }\n }<\/p>\n<p> @media (max-width: 480px) {\n .social-links { justify-content: center; }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"empty-space\"><\/div>\n<p><\/p>\n<footer class=\"footer\">\n<div class=\"footer-blue\"><\/div>\n<div class=\"footer-content\">\n<div class=\"footer-grid\">\n <\/p>\n<div class=\"footer-col\">\n<h3>\u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\u06cc \u0645\u0647\u0645<\/h3>\n<ul class=\"footer-links\">\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u062e\u062f\u0645\u0627\u062a<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/a><\/li>\n<\/ul><\/div>\n<p> <\/p>\n<div class=\"footer-col\">\n<h3>\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/h3>\n<div class=\"contact-info\">\n<p><i class=\"fas fa-map-marker-alt\"><\/i> \u062a\u0647\u0631\u0627\u0646\u060c \u06a9\u06cc\u0644\u0648\u0645\u062a\u0631 \u06f1\u06f8 \u062c\u0627\u062f\u0647 \u0642\u062f\u06cc\u0645 \u06a9\u0631\u062c<\/p>\n<p><i class=\"fas fa-phone\"><\/i> \u06f0\u06f2\u06f1\u2011\u06f4\u06f1\u06f4\u06f5\u06f7\u06f7\u06f1\u06f4<\/p>\n<p><i class=\"fas fa-envelope\"><\/i> info@tuca-co.com<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"footer-col\">\n<h3>\u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc<\/h3>\n<div class=\"social-links\">\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a><br \/>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a><br \/>\n <a href=\"#\"><i class=\"fab fa-telegram\"><\/i><\/a><br \/>\n <a href=\"#\"><i class=\"fab fa-whatsapp\"><\/i><\/a><br \/>\n <a href=\"#\"><i class=\"fab fa-aparat\"><\/i><\/a>\n <\/div>\n<div class=\"expertise-badge\">\n <i class=\"fas fa-cogs\"><\/i> \u062a\u062e\u0635\u0635 \u062f\u0631 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631 \u0635\u0646\u0639\u062a\u06cc \u2013 \u062a\u0648\u0631\u0628\u06cc\u0646\u060c \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0648 \u067e\u0645\u067e\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"footer-col\">\n<div class=\"footer-logo\">\n <span>TUCA<\/span>\n <\/div>\n<ul class=\"footer-links\" style=\"margin-top: 1rem;\">\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0641\u0631\u0635\u062a\u200c\u0647\u0627\u06cc \u0634\u063a\u0644\u06cc<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062e\u0635\u0635\u06cc<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc\u200c\u0647\u0627<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062e\u062f\u0645\u0627\u062a<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<div class=\"copyright\">\n <span>\u00a9 \u06f1\u06f4\u06f0\u06f4 \u0634\u0631\u06a9\u062a \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 \u2014 \u062a\u0645\u0627\u0645\u06cc \u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a.<\/span><br \/>\n <span class=\"heart\"><br \/>\n <i class=\"fas fa-heart\"><\/i> <a href=\"#\">TUCA.CO<\/a><br \/>\n <\/span>\n <\/div>\n<\/p><\/div>\n<\/footer>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0633\u0644\u0627\u06cc\u062f\u0631 | \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 \u2630 \u0645\u0646\u0648 \u062e\u0627\u0646\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631 \u0642\u0637\u0639\u0627\u062a \u06cc\u062f\u06a9\u06cc \u062a\u0648\u0631\u0628\u0648\u0627\u06a9\u0633\u067e\u0646\u062f\u0631 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632 \u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u067e\u0645\u067e \u062e\u062f\u0645\u0627\u062a \u062a\u0639\u0645\u06cc\u0631 \u0648 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0645\u0647\u0646\u062f\u0633\u06cc \u0645\u0639\u06a9\u0648\u0633 \u062e\u062f\u0645\u0627\u062a \u062f\u0631 \u0633\u0627\u06cc\u062a \u062a\u0627\u0645\u06cc\u0646 \u0648 \u0628\u0627\u0632\u0631\u06af\u0627\u0646\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062c\u0627\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0627\u062a\u0645\u0647 \u06cc\u0627\u0641\u062a\u0647 \u0645\u0639\u0631\u0641\u06cc \u0634\u0631\u06a9\u062a \u0686\u0627\u0631\u062a \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc HSE \u06a9\u0627\u062a\u0627\u0644\u0648\u06af \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u062a\u062d\u0642\u06cc\u0642 \u0648 \u062a\u0648\u0633\u0639\u0647 \u067e\u0627\u06cc\u0634 \u0648 […]<\/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-283","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/pages\/283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/comments?post=283"}],"version-history":[{"count":6,"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/pages\/283\/revisions"}],"predecessor-version":[{"id":528,"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/pages\/283\/revisions\/528"}],"wp:attachment":[{"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/media?parent=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":283,"date":"2026-05-04T08:24:29","date_gmt":"2026-05-04T08:24:29","guid":{"rendered":"https:\/\/62.60.205.52\/?page_id=283"},"modified":"2026-05-06T09:33:16","modified_gmt":"2026-05-06T09:33:16","slug":"home","status":"publish","type":"page","link":"https:\/\/tuca-co.ir\/","title":{"rendered":"Home"},"content":{"rendered":"

\n
\n
\n
\n
\n \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 | \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627<\/title><br \/>\n <\/p>\n<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n \/* \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0648\u0646\u062a B Nazanin \u0646\u0635\u0628 \u0634\u062f\u0647 \u0631\u0648\u06cc \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0627\u0631\u0628\u0631 *\/\n font-family: 'B Nazanin', 'BNazanin', 'B Nazanin', 'Traditional Arabic', 'Tahoma', sans-serif;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n position: relative;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.08) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.06) 1px, transparent 1px);\n background-size: 40px 40px;\n pointer-events: none;\n animation: particleDrift 20s linear infinite;\n }<\/p>\n<p> @keyframes particleDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 40px 40px; }\n }<\/p>\n<p> .page-container {\n max-width: 1600px;\n margin: 0 auto;\n padding: 0 32px;\n position: relative;\n z-index: 1;\n }<\/p>\n<p> .site-header {\n background: rgba(11, 43, 59, 0.85);\n backdrop-filter: blur(16px);\n box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25), 0 1px 0 0 rgba(196, 154, 108, 0.2);\n position: sticky;\n top: 0;\n z-index: 1000;\n border-bottom: 1px solid rgba(196, 154, 108, 0.3);\n margin-bottom: 2rem;\n }<\/p>\n<p> .nav-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 80px;\n position: relative;\n }<\/p>\n<p> .logo-area {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n z-index: 1001;\n }<\/p>\n<p> .company-logo {\n height: 55px;\n width: auto;\n max-width: 180px;\n object-fit: contain;\n transition: all 0.3s ease;\n filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));\n }<\/p>\n<p> .company-logo:hover {\n transform: scale(1.05);\n filter: drop-shadow(0 4px 10px rgba(196, 154, 108, 0.3));\n }<\/p>\n<p> .main-menu {\n display: flex;\n list-style: none;\n gap: 8px;\n margin: 0;\n padding: 0;\n }<\/p>\n<p> .main-menu > li {\n position: relative;\n }<\/p>\n<p> .main-menu li a {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 10px 24px;\n color: #E2E8F0;\n text-decoration: none;\n font-weight: 550;\n font-size: 1rem;\n transition: all 0.25s ease;\n border-radius: 60px;\n position: relative;\n }<\/p>\n<p> .main-menu li a::after {\n content: '';\n position: absolute;\n bottom: 2px;\n right: 50%;\n width: 0;\n height: 2px;\n background: linear-gradient(90deg, #c49a6c, #e6c8a0);\n border-radius: 4px;\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n }<\/p>\n<p> .main-menu li a:hover {\n color: #e6c8a0;\n background: rgba(196, 154, 108, 0.1);\n }<\/p>\n<p> .main-menu li a:hover::after {\n width: 70%;\n right: 15%;\n }<\/p>\n<p> .main-menu li:first-child a {\n color: #e6c8a0;\n }\n .main-menu li:first-child a::after {\n width: 60%;\n right: 20%;\n background: linear-gradient(90deg, #c49a6c, #e6c8a0);\n }<\/p>\n<p> .dropdown-toggle {\n font-size: 0.7rem;\n transition: transform 0.25s ease;\n margin-right: 6px;\n opacity: 0.7;\n }\n .dropdown-toggle::before {\n content: \"\u25bc\";\n font-size: 0.6rem;\n display: inline-block;\n color: #c49a6c;\n }\n .menu-item-has-children:hover .dropdown-toggle::before {\n transform: rotate(180deg);\n }<\/p>\n<p> .submenu {\n position: absolute;\n top: calc(100% + 8px);\n right: 0;\n left: auto;\n min-width: 260px;\n background: rgba(17, 34, 44, 0.96);\n backdrop-filter: blur(20px);\n border-radius: 20px;\n list-style: none;\n padding: 12px 8px;\n opacity: 0;\n visibility: hidden;\n transition: all 0.25s ease;\n transform: translateY(12px) scale(0.97);\n box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(196, 154, 108, 0.3);\n z-index: 1200;\n border: 1px solid rgba(196, 154, 108, 0.25);\n }<\/p>\n<p> .main-menu > li:last-child .submenu {\n right: auto;\n left: 0;\n }<\/p>\n<p> .submenu.mega {\n width: 540px;\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 8px;\n padding: 20px;\n }<\/p>\n<p> .submenu li a {\n padding: 12px 20px;\n font-weight: 500;\n font-size: 0.9rem;\n color: #CBD5E1;\n border-radius: 14px;\n background: rgba(255, 255, 255, 0.02);\n transition: all 0.2s;\n display: block;\n }<\/p>\n<p> .submenu li a:hover {\n background: rgba(196, 154, 108, 0.18);\n color: #e6c8a0;\n transform: translateX(-4px);\n padding-right: 26px;\n }<\/p>\n<p> .menu-item-has-children:hover > .submenu {\n opacity: 1;\n visibility: visible;\n transform: translateY(0) scale(1);\n }<\/p>\n<p> .slider-container {\n position: relative;\n width: 100%;\n height: 85vh;\n min-height: 600px;\n border-radius: 2rem;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);\n }<\/p>\n<p> .slider-slide {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n transition: opacity 1s ease-in-out;\n background-size: cover;\n background-position: center;\n border-radius: 2rem;\n }<\/p>\n<p> .slider-slide.active {\n opacity: 1;\n }<\/p>\n<p> .slider-slide::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3));\n border-radius: 2rem;\n }<\/p>\n<p> .slide-content {\n position: absolute;\n bottom: 25%;\n right: 10%;\n left: 10%;\n text-align: center;\n color: white;\n z-index: 10;\n }<\/p>\n<p> .slide-title {\n font-size: 3rem;\n font-weight: 800;\n margin-bottom: 1rem;\n text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);\n }<\/p>\n<p> .typed-text {\n font-size: 2rem;\n font-weight: 600;\n margin-top: 1rem;\n direction: ltr;\n display: inline-block;\n }<\/p>\n<p> .typed-text::after {\n content: '|';\n animation: blink 0.8s infinite;\n }<\/p>\n<p> @keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0; }\n }<\/p>\n<p> .slider-nav {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n z-index: 20;\n }<\/p>\n<p> .slider-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.5);\n cursor: pointer;\n transition: all 0.3s ease;\n }<\/p>\n<p> .slider-dot.active {\n background: #c49a6c;\n width: 30px;\n border-radius: 10px;\n }<\/p>\n<p> .scroll-down {\n position: absolute;\n bottom: 30px;\n left: 50%;\n transform: translateX(-50%);\n z-index: 20;\n cursor: pointer;\n animation: bounce 2s infinite;\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(8px);\n padding: 12px 20px;\n border-radius: 40px;\n display: flex;\n align-items: center;\n gap: 12px;\n transition: all 0.3s ease;\n border: 1px solid rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> .scroll-down a {\n display: flex;\n align-items: center;\n gap: 12px;\n text-decoration: none;\n color: white;\n font-size: 0.9rem;\n font-weight: 500;\n }<\/p>\n<p> .mouse-wheel {\n width: 24px;\n height: 38px;\n border: 2px solid white;\n border-radius: 20px;\n position: relative;\n background: rgba(255, 255, 255, 0.1);\n }<\/p>\n<p> .mouse-wheel::before {\n content: '';\n position: absolute;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n width: 4px;\n height: 8px;\n background: white;\n border-radius: 2px;\n animation: scrollWheel 1.5s infinite;\n }<\/p>\n<p> @keyframes scrollWheel {\n 0% { opacity: 1; transform: translateX(-50%) translateY(0); }\n 80% { opacity: 0; transform: translateX(-50%) translateY(15px); }\n 100% { opacity: 0; transform: translateX(-50%) translateY(0); }\n }<\/p>\n<p> @keyframes bounce {\n 0%, 100% { transform: translateX(-50%) translateY(0); }\n 50% { transform: translateX(-50%) translateY(8px); }\n }<\/p>\n<p> .slider-arrow {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(0, 0, 0, 0.5);\n color: white;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 20;\n transition: all 0.3s ease;\n backdrop-filter: blur(4px);\n font-size: 2rem;\n font-weight: bold;\n }<\/p>\n<p> .slider-arrow.prev {\n right: 20px;\n }<\/p>\n<p> .slider-arrow.next {\n left: 20px;\n }<\/p>\n<p> .target-section {\n scroll-margin-top: 80px;\n height: 1px;\n }<\/p>\n<p> .mobile-menu-toggle {\n display: none;\n background: rgba(11, 43, 59, 0.95);\n backdrop-filter: blur(12px);\n border: 1px solid rgba(196, 154, 108, 0.6);\n border-radius: 40px;\n padding: 8px 20px;\n font-size: 1rem;\n font-weight: 500;\n color: #e6c8a0;\n cursor: pointer;\n position: absolute;\n left: 16px;\n top: 16px;\n z-index: 1100;\n gap: 8px;\n align-items: center;\n }<\/p>\n<p> @media (max-width: 980px) {\n .mobile-menu-toggle {\n display: flex;\n }\n .nav-wrapper {\n justify-content: flex-start;\n }\n .main-menu {\n position: fixed;\n top: 0;\n right: -100%;\n width: 80%;\n max-width: 340px;\n height: 100vh;\n background: rgba(8, 30, 42, 0.98);\n backdrop-filter: blur(28px);\n flex-direction: column;\n padding: 90px 20px 30px;\n gap: 10px;\n transition: right 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n z-index: 1050;\n border-left: 2px solid rgba(196, 154, 108, 0.6);\n }\n .main-menu.active {\n right: 0;\n }\n .main-menu li {\n width: 100%;\n position: static;\n }\n .submenu, .submenu.mega {\n position: static;\n opacity: 1;\n visibility: visible;\n transform: none;\n width: 100%;\n display: none;\n grid-template-columns: 1fr;\n }\n .menu-item-has-children.open .submenu {\n display: block;\n }\n .logo-area {\n position: relative;\n right: auto;\n top: auto;\n transform: none;\n margin-left: auto;\n margin-right: 60px;\n }\n .company-logo {\n height: 40px;\n }\n }<\/p>\n<p> @media (max-width: 780px) {\n .page-container { padding: 0 20px; }\n .slider-container { height: 60vh; min-height: 450px; }\n .slide-title { font-size: 1.8rem; }\n .typed-text { font-size: 1.3rem; }\n .company-logo { height: 40px; }\n }<\/p>\n<p> @media (max-width: 480px) {\n .slider-container { height: 50vh; min-height: 400px; }\n .slide-title { font-size: 1.4rem; }\n .typed-text { font-size: 1rem; }\n .company-logo { height: 35px; }\n }<\/p>\n<p> .overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.55);\n backdrop-filter: blur(3px);\n z-index: 1040;\n display: none;\n }\n .overlay.active { display: block; }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"page-container\">\n<header class=\"site-header\">\n<div class=\"nav-wrapper\">\n <\/p>\n<div class=\"logo-area\">\n <img decoding=\"async\" class=\"company-logo\" \n src=\"https:\/\/tuca-co.ir\/wp-content\/uploads\/2026\/04\/Logo.png\" \n alt=\"\u0644\u0648\u06af\u0648\u06cc \u0634\u0631\u06a9\u062a\"\n style=\"background: transparent !important; mix-blend-mode: multiply;\">\n<\/div>\n<p> <button class=\"mobile-menu-toggle\" id=\"mobileMenuToggle\"><br \/>\n <span>\u2630<\/span> <span>\u0645\u0646\u0648<\/span><br \/>\n <\/button><\/p>\n<ul class=\"main-menu\" id=\"mainMenu\">\n<li><a href=\"#\">\u062e\u0627\u0646\u0647<\/a><\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u0645\u062d\u0635\u0648\u0644\u0627\u062a <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu mega\">\n<li><a href=\"http:\/\/62.60.205.52\/index.php\/extroder\/\">\u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631<\/a><\/li>\n<li><a href=\"#\">\u0642\u0637\u0639\u0627\u062a \u06cc\u062f\u06a9\u06cc<\/a><\/li>\n<li><a href=\"#\">\u062a\u0648\u0631\u0628\u0648\u0627\u06a9\u0633\u067e\u0646\u062f\u0631<\/a><\/li>\n<li><a href=\"#\">\u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632<\/a><\/li>\n<li><a href=\"#\">\u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631<\/a><\/li>\n<li><a href=\"#\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631<\/a><\/li>\n<li><a href=\"#\">\u067e\u0645\u067e<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u062e\u062f\u0645\u0627\u062a <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u062a\u0639\u0645\u06cc\u0631 \u0648 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc<\/a><\/li>\n<li><a href=\"#\">\u0645\u0647\u0646\u062f\u0633\u06cc \u0645\u0639\u06a9\u0648\u0633<\/a><\/li>\n<li><a href=\"#\">\u062e\u062f\u0645\u0627\u062a \u062f\u0631 \u0633\u0627\u06cc\u062a<\/a><\/li>\n<li><a href=\"#\">\u062a\u0627\u0645\u06cc\u0646 \u0648 \u0628\u0627\u0632\u0631\u06af\u0627\u0646\u06cc<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062c\u0627\u0631\u06cc<\/a><\/li>\n<li><a href=\"http:\/\/62.60.205.52\/index.php\/end-project\/\">\u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0627\u062a\u0645\u0647 \u06cc\u0627\u0641\u062a\u0647<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u0645\u0639\u0631\u0641\u06cc \u0634\u0631\u06a9\u062a <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu mega\">\n<li><a href=\"#\">\u0686\u0627\u0631\u062a \u0633\u0627\u0632\u0645\u0627\u0646\u06cc<\/a><\/li>\n<li><a href=\"#\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/a><\/li>\n<li><a href=\"#\">\u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc<\/a><\/li>\n<li><a href=\"#\">HSE<\/a><\/li>\n<li><a href=\"#\">\u06a9\u0627\u062a\u0627\u0644\u0648\u06af<\/a><\/li>\n<li><a href=\"#\">\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u062a\u062d\u0642\u06cc\u0642 \u0648 \u062a\u0648\u0633\u0639\u0647 <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u067e\u0627\u06cc\u0634 \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc<\/a><\/li>\n<li><a href=\"#\">\u062a\u0648\u0631\u0628\u06cc\u0646<\/a><\/li>\n<li><a href=\"#\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631<\/a><\/li>\n<li><a href=\"#\">\u067e\u0645\u067e<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u0631\u0633\u0627\u0646\u0647 <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u06af\u0627\u0644\u0631\u06cc<\/a><\/li>\n<li><a href=\"#\">\u062a\u0642\u062f\u06cc\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627<\/a><\/li>\n<li><a href=\"#\">\u0646\u0645\u0627\u06cc\u0634\u06af\u0627\u0647<\/a><\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item-has-children\">\n <a href=\"#\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627 <span class=\"dropdown-toggle\"><\/span><\/a><\/p>\n<ul class=\"submenu\">\n<li><a href=\"#\">\u0631\u0627\u0647\u200c\u0647\u0627\u06cc \u0627\u0631\u062a\u0628\u0627\u0637\u06cc<\/a><\/li>\n<li><a href=\"#\">\u0647\u0645\u06a9\u0627\u0631\u06cc<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div class=\"overlay\" id=\"overlay\"><\/div>\n<\/p><\/div>\n<\/header>\n<div class=\"slider-container\">\n<div class=\"slider-slide active\" style=\"background-image: url('https:\/\/tuca-co.ir\/wp-content\/uploads\/2026\/04\/Turbine Gas.png');\">\n<div class=\"slide-content\">\n<h2 class=\"slide-title\">\u062a\u0648\u0631\u0628\u06cc\u0646\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0635\u0646\u0639\u062a\u06cc<\/h2>\n<div class=\"typed-text\" id=\"typed1\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"slider-slide\" style=\"background-image: url('https:\/\/tuca-co.ir\/wp-content\/uploads\/2026\/04\/Turbine Gas1.jpg');\">\n<div class=\"slide-content\">\n<h2 class=\"slide-title\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u0628\u0627 \u06a9\u06cc\u0641\u06cc\u062a \u0628\u0627\u0644\u0627<\/h2>\n<div class=\"typed-text\" id=\"typed2\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"slider-slide\" style=\"background-image: url('https:\/\/picsum.photos\/id\/53\/1600\/900?grayscale');\">\n<div class=\"slide-content\">\n<h2 class=\"slide-title\">\u062e\u062f\u0645\u0627\u062a \u062a\u062e\u0635\u0635\u06cc \u062a\u0639\u0645\u06cc\u0631\u0627\u062a<\/h2>\n<div class=\"typed-text\" id=\"typed3\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"slider-arrow prev\" id=\"prevSlide\">\u276e<\/div>\n<div class=\"slider-arrow next\" id=\"nextSlide\">\u276f<\/div>\n<div class=\"slider-nav\" id=\"sliderNav\">\n<div class=\"slider-dot active\" data-slide=\"0\"><\/div>\n<div class=\"slider-dot\" data-slide=\"1\"><\/div>\n<div class=\"slider-dot\" data-slide=\"2\"><\/div>\n<\/p><\/div>\n<div class=\"scroll-down\">\n <a href=\"#targetSection\"><\/p>\n<div class=\"mouse-icon\">\n<div class=\"mouse-wheel\"><\/div>\n<\/p><\/div>\n<p> <span>\u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u0647 \u067e\u0627\u06cc\u06cc\u0646<\/span><br \/>\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"white\">\n <path d=\"M12 16L6 10H18L12 16Z\"\/>\n <\/svg><br \/>\n <\/a>\n <\/div>\n<\/p><\/div>\n<div id=\"targetSection\" class=\"target-section\"><\/div>\n<\/div>\n<p><script>\n (function() {\n const toggleBtn = document.getElementById('mobileMenuToggle');\n const mainMenu = document.getElementById('mainMenu');\n const overlay = document.getElementById('overlay');\n const body = document.body;<\/p>\n<p> function closeMenu() {\n mainMenu.classList.remove('active');\n if(overlay) overlay.classList.remove('active');\n body.classList.remove('menu-open');\n document.querySelectorAll('.menu-item-has-children.open').forEach(el => {\n el.classList.remove('open');\n });\n }<\/p>\n<p> function openMenu() {\n mainMenu.classList.add('active');\n if(overlay) overlay.classList.add('active');\n body.classList.add('menu-open');\n }<\/p>\n<p> if(toggleBtn) {\n toggleBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n if(mainMenu.classList.contains('active')) closeMenu();\n else openMenu();\n });\n }<\/p>\n<p> if(overlay) overlay.addEventListener('click', closeMenu);<\/p>\n<p> function isMobile() { return window.innerWidth <= 980; }\n\n function mobileSubmenuHandler(e) {\n if(window.innerWidth <= 980) {\n const parentLi = this.parentElement;\n const submenu = parentLi.querySelector('.submenu');\n if(submenu) {\n e.preventDefault();\n if(!parentLi.classList.contains('open')) {\n document.querySelectorAll('.menu-item-has-children.open').forEach(el => {\n if(el !== parentLi) el.classList.remove('open');\n });\n }\n parentLi.classList.toggle('open');\n }\n }\n }<\/p>\n<p> function attachMobileEvents() {\n const parentItems = document.querySelectorAll('.menu-item-has-children > a');\n parentItems.forEach(item => {\n item.removeEventListener('click', mobileSubmenuHandler);\n if(isMobile()) item.addEventListener('click', mobileSubmenuHandler);\n });\n }<\/p>\n<p> window.addEventListener('resize', function() {\n if(window.innerWidth > 980) {\n closeMenu();\n document.querySelectorAll('.menu-item-has-children.open').forEach(el => el.classList.remove('open'));\n }\n attachMobileEvents();\n });<\/p>\n<p> const parentLinks = document.querySelectorAll('.menu-item-has-children > a');\n parentLinks.forEach(link => {\n link.addEventListener('click', (e) => {\n const sub = link.parentElement.querySelector('.submenu');\n if(sub && window.innerWidth > 980) e.preventDefault();\n });\n });<\/p>\n<p> const allSubLinks = document.querySelectorAll('.submenu li a');\n allSubLinks.forEach(link => {\n link.addEventListener('click', () => { if(window.innerWidth <= 980) closeMenu(); });\n });\n\n attachMobileEvents();\n })();\n\n (function() {\n const slides = document.querySelectorAll('.slider-slide');\n const dots = document.querySelectorAll('.slider-dot');\n const prevBtn = document.getElementById('prevSlide');\n const nextBtn = document.getElementById('nextSlide');\n let currentSlide = 0;\n let slideInterval;\n let typingActive = false;\n\n const typedTexts = [\n \"\u0642\u062f\u0631\u062a \u062f\u0631 \u062d\u0631\u06a9\u062a | \u06f4\u06f0 \u0645\u06af\u0627\u0648\u0627\u062a \u062a\u0648\u0627\u0646\",\n \"\u06a9\u06cc\u0641\u06cc\u062a | \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f API619\",\n \"\u062a\u062e\u0635\u0635 | \u06f1\u06f4 \u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647\"\n ];\n\n function startTyping(text, elementId) {\n const element = document.getElementById(elementId);\n if (!element) return;\n element.innerHTML = '';\n let i = 0;\n typingActive = true;\n function type() {\n if (i < text.length) {\n element.innerHTML += text.charAt(i);\n i++;\n setTimeout(type, 80);\n } else {\n typingActive = false;\n }\n }\n type();\n }\n\n function showSlide(index) {\n if (typingActive) return;\n \n slides.forEach(slide => slide.classList.remove('active'));\n dots.forEach(dot => dot.classList.remove('active'));<\/p>\n<p> slides[index].classList.add('active');\n dots[index].classList.add('active');\n currentSlide = index;<\/p>\n<p> const typedId = `typed${index + 1}`;\n startTyping(typedTexts[index], typedId);\n }<\/p>\n<p> function nextSlide() {\n let newIndex = currentSlide + 1;\n if (newIndex >= slides.length) newIndex = 0;\n showSlide(newIndex);\n resetInterval();\n }<\/p>\n<p> function prevSlide() {\n let newIndex = currentSlide - 1;\n if (newIndex < 0) newIndex = slides.length - 1;\n showSlide(newIndex);\n resetInterval();\n }\n\n function resetInterval() {\n clearInterval(slideInterval);\n slideInterval = setInterval(nextSlide, 5000);\n }\n\n prevBtn.addEventListener('click', prevSlide);\n nextBtn.addEventListener('click', nextSlide);\n \n dots.forEach((dot, index) => {\n dot.addEventListener('click', () => {\n showSlide(index);\n resetInterval();\n });\n });<\/p>\n<p> showSlide(0);\n slideInterval = setInterval(nextSlide, 5000);\n })();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 | TCA | \u067e\u06cc\u0634\u0631\u0648 \u062f\u0631 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631<\/title><br \/>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n<style>\n \/* \u062a\u0639\u0631\u06cc\u0641 \u0642\u0648\u06cc \u0648 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0641\u0648\u0646\u062a \u0633\u06cc\u0633\u062a\u0645\u06cc B Nazanin *\/\n @font-face {\n font-family: 'BNazaninLocal';\n src: local('B Nazanin'), local('BNazanin'), local('B Nazanin Bold'), local('B Nazanin regular');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n padding: 2rem;\n position: relative;\n }<\/p>\n<p> \/* \u0627\u0639\u0645\u0627\u0644 \u0645\u062c\u062f\u062f \u0641\u0648\u0646\u062a \u0628\u0647 \u062a\u0645\u0627\u0645 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 *\/\n body, body * {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> \/* \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0628\u0627 \u0630\u0631\u0627\u062a \u0637\u0644\u0627\u06cc\u06cc *\/\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.08) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.06) 1px, transparent 1px);\n background-size: 40px 40px;\n pointer-events: none;\n animation: particleDrift 20s linear infinite;\n }<\/p>\n<p> @keyframes particleDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 40px 40px; }\n }<\/p>\n<p> .main-wrapper {\n max-width: 1600px;\n width: 100%;\n margin: 0 auto;\n padding: 0 32px;\n }<\/p>\n<p> \/* \u0628\u0627\u06a9\u0633 \u0627\u0635\u0644\u06cc \u0633\u0641\u06cc\u062f \u0628\u0627 \u062d\u0627\u0634\u06cc\u0647 \u0637\u0644\u0627\u06cc\u06cc *\/\n .main-company-box {\n background: rgba(255, 255, 255, 0.96);\n backdrop-filter: blur(2px);\n border-radius: 2.5rem;\n box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(196, 154, 108, 0.2);\n overflow: hidden;\n transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n position: relative;\n animation: mainBoxFadeIn 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;\n }<\/p>\n<p> @keyframes mainBoxFadeIn {\n from {\n opacity: 0;\n transform: scale(0.98) translateY(20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }<\/p>\n<p> .main-company-box::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(196, 154, 108, 0.1), transparent 70%);\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n z-index: 1;\n }<\/p>\n<p> .main-company-box:hover::before {\n opacity: 1;\n animation: lightRotate 4s ease-in-out infinite;\n }<\/p>\n<p> @keyframes lightRotate {\n 0% { transform: translate(0%, 0%) rotate(0deg); }\n 50% { transform: translate(3%, 3%) rotate(3deg); }\n 100% { transform: translate(0%, 0%) rotate(0deg); }\n }<\/p>\n<p> .main-company-box:hover {\n transform: translateY(-8px) scale(1.01);\n box-shadow: 0 40px 70px -20px rgba(196, 154, 108, 0.3), 0 0 0 1px rgba(196, 154, 108, 0.4);\n }<\/p>\n<p> \/* \u0646\u0648\u0627\u0631 \u0637\u0644\u0627\u06cc\u06cc \u0645\u062a\u062d\u0631\u06a9 \u062f\u0631 \u0628\u0627\u0644\u0627 *\/\n .gold-strip-main {\n height: 10px;\n background: linear-gradient(90deg, #0b3b5f, #0072ff, #ffffff, #ff6262, #0b3b5f);\n background-size: 200% auto;\n animation: shimmer 6s linear infinite;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> @keyframes shimmer {\n 0% { background-position: 0% 0; }\n 100% { background-position: 200% 0; }\n }<\/p>\n<p> .main-content {\n padding: 3rem 3.5rem 3.5rem 3.5rem;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> \/* \u0647\u062f\u0631 *\/\n .company-header {\n text-align: center;\n margin-bottom: 3rem;\n position: relative;\n }<\/p>\n<p> .company-header::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 3px;\n background: linear-gradient(90deg, #c49a6c, #e6c8a0);\n animation: headerLineGlow 2s ease-in-out infinite;\n }<\/p>\n<p> @keyframes headerLineGlow {\n 0%, 100% { width: 100px; opacity: 0.6; }\n 50% { width: 160px; opacity: 1; box-shadow: 0 0 10px #c49a6c; }\n }<\/p>\n<p> .company-title {\n font-size: 2.8rem;\n font-weight: 800;\n background: linear-gradient(135deg, #10436b, #c49a6c, #e6c8a0, #c49a6c);\n background-size: 300% auto;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: -0.5px;\n margin-bottom: 0.5rem;\n animation: titleShine 4s linear infinite;\n display: inline-block;\n position: relative;\n }<\/p>\n<p> @keyframes titleShine {\n 0% { background-position: 0% 0; }\n 100% { background-position: 100% 0; }\n }<\/p>\n<p> .company-title::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #c49a6c, #e6c8a0);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n filter: blur(12px);\n opacity: 0.3;\n z-index: -1;\n }<\/p>\n<p> .subtitle {\n text-align: center;\n color: #7a9bb3;\n font-size: 1rem;\n margin-top: 1.2rem;\n font-weight: 450;\n }<\/p>\n<p> \/* \u0634\u0628\u06a9\u0647 \u062f\u0648 \u0633\u062a\u0648\u0646\u06cc *\/\n .two-columns {\n display: flex;\n flex-wrap: wrap;\n gap: 2.5rem;\n margin-top: 2rem;\n }<\/p>\n<p> .info-col {\n flex: 1.4;\n min-width: 260px;\n }<\/p>\n<p> .visual-col {\n flex: 1;\n min-width: 260px;\n }<\/p>\n<p> \/* \u062a\u06af\u200c\u0647\u0627\u06cc \u0627\u0641\u062a\u062e\u0627\u0631 *\/\n .honor-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n margin: 1.5rem 0 1.8rem;\n }<\/p>\n<p> .honor-tag {\n background: rgba(255, 255, 255, 0.98);\n border: 1px solid rgba(196, 154, 108, 0.4);\n border-radius: 40px;\n padding: 0.4rem 1.2rem;\n font-size: 0.75rem;\n font-weight: 600;\n color: #10436b;\n transition: all 0.2s;\n }<\/p>\n<p> .honor-tag i {\n color: #c49a6c;\n margin-left: 6px;\n }<\/p>\n<p> .honor-tag:hover {\n background: #c49a6c10;\n border-color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> \/* \u0622\u0645\u0627\u0631 *\/\n .stats-group {\n display: flex;\n flex-wrap: wrap;\n gap: 2rem;\n margin: 2rem 0;\n background: rgba(196, 154, 108, 0.05);\n padding: 1rem 1.5rem;\n border-radius: 2rem;\n border: 1px solid rgba(196, 154, 108, 0.2);\n }<\/p>\n<p> .stat-item {\n flex: 1;\n text-align: center;\n }<\/p>\n<p> .stat-number {\n font-size: 2.2rem;\n font-weight: 800;\n color: #c49a6c;\n font-family: monospace;\n line-height: 1.2;\n }<\/p>\n<p> .stat-label {\n font-size: 0.7rem;\n font-weight: 600;\n color: #5a7a92;\n letter-spacing: 0.5px;\n }<\/p>\n<p> \/* \u062f\u06a9\u0645\u0647 *\/\n .btn-gold {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, #10436b, #1a5a7a);\n color: white;\n padding: 0.8rem 2rem;\n border-radius: 50px;\n text-decoration: none;\n font-weight: 600;\n font-size: 0.9rem;\n transition: all 0.3s;\n border: none;\n cursor: pointer;\n margin-top: 0.5rem;\n position: relative;\n overflow: hidden;\n }<\/p>\n<p> .btn-gold::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n transition: left 0.5s ease;\n }<\/p>\n<p> .btn-gold:hover::before {\n left: 100%;\n }<\/p>\n<p> .btn-gold:hover {\n background: linear-gradient(135deg, #1a5a7a, #c49a6c);\n transform: translateX(-5px);\n box-shadow: 0 8px 20px rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> \/* \u062a\u0635\u0648\u06cc\u0631 \u0628\u0627 \u0642\u0627\u0628 \u0637\u0644\u0627\u06cc\u06cc *\/\n .image-frame {\n background: #fff;\n border-radius: 1.5rem;\n padding: 0.5rem;\n border: 1px solid rgba(196, 154, 108, 0.5);\n transition: all 0.3s;\n overflow: hidden;\n }<\/p>\n<p> .image-frame img {\n width: 100%;\n height: auto;\n border-radius: 1.2rem;\n display: block;\n transition: transform 0.4s ease;\n }<\/p>\n<p> .image-frame:hover img {\n transform: scale(1.02);\n }<\/p>\n<p> .img-caption {\n text-align: center;\n margin-top: 0.8rem;\n font-size: 0.75rem;\n color: #c49a6c;\n font-weight: 500;\n }<\/p>\n<p> \/* \u0634\u0628\u06a9\u0647 \u0627\u062c\u062a\u0645\u0627\u0639\u06cc *\/\n .social-section {\n margin-top: 2rem;\n border-top: 1px dashed rgba(196, 154, 108, 0.4);\n padding-top: 1.2rem;\n }<\/p>\n<p> .social-title {\n font-size: 0.8rem;\n font-weight: 700;\n color: #10436b;\n margin-bottom: 0.8rem;\n }<\/p>\n<p> .social-icons {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n }<\/p>\n<p> .social-icon {\n width: 42px;\n height: 42px;\n background: #f5f5f5;\n border-radius: 50%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: #1a5a7a;\n font-size: 1.2rem;\n text-decoration: none;\n transition: all 0.3s;\n border: 1px solid rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> .social-icon:hover {\n background: #c49a6c;\n color: white;\n transform: translateY(-4px);\n border-color: #c49a6c;\n }<\/p>\n<p> \/* \u0641\u0648\u062a\u0631 *\/\n .footer-company {\n margin-top: 3rem;\n padding-top: 1.5rem;\n text-align: center;\n font-size: 0.8rem;\n color: #7a9bb3;\n border-top: 1px solid rgba(196, 154, 108, 0.2);\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n flex-wrap: wrap;\n }<\/p>\n<p> .footer-company span {\n transition: all 0.3s;\n cursor: default;\n }<\/p>\n<p> .footer-company span:hover {\n color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\n @media (max-width: 900px) {\n body { padding: 1rem; }\n .main-wrapper { padding: 0 16px; }\n .main-content { padding: 2rem; }\n .company-title { font-size: 2rem; }\n .two-columns { gap: 1.5rem; }\n .stats-group { gap: 1rem; }\n }<\/p>\n<p> @media (max-width: 600px) {\n .main-content { padding: 1.5rem; }\n .company-title { font-size: 1.5rem; }\n .stats-group { flex-direction: column; align-items: center; gap: 0.8rem; }\n .btn-gold { font-size: 0.8rem; padding: 0.6rem 1.2rem; }\n }<\/p>\n<p> \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u0627\u0631\u062a\u200c\u0647\u0627 *\/\n .info-col, .visual-col {\n opacity: 0;\n transform: translateY(20px);\n animation: cardFloatIn 0.6s ease forwards;\n }\n .info-col { animation-delay: 0.1s; }\n .visual-col { animation-delay: 0.2s; }<\/p>\n<p> @keyframes cardFloatIn {\n 0% {\n opacity: 0;\n transform: translateY(30px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n }<\/p>\n<p> .desc-text {\n line-height: 1.8;\n margin-bottom: 1rem;\n text-align: justify;\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"main-wrapper\">\n<div class=\"main-company-box\">\n<div class=\"gold-strip-main\"><\/div>\n<div class=\"main-content\">\n<div class=\"company-header\">\n<h1 class=\"company-title\" data-text=\"\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627\">\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627<\/h1>\n<p class=\"subtitle\">\u2699\ufe0f \u062f\u0627\u0646\u0634\u200c\u0628\u0646\u06cc\u0627\u0646 \u00b7 \u067e\u06cc\u0634\u06af\u0627\u0645 \u062f\u0631 \u0637\u0631\u0627\u062d\u06cc \u0648 \u0633\u0627\u062e\u062a \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631<\/p>\n<\/p><\/div>\n<div class=\"two-columns\">\n<div class=\"info-col\">\n<p class=\"desc-text\">\n \u0634\u0640\u0640\u0631\u06a9\u062a \u062f\u0627\u0646\u0634\u200c\u0628\u0646\u06cc\u0627\u0646 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 \u062f\u0631 \u0633\u0627\u0644 1390 \u0628\u0631\u0627\u06cc \u0646\u06cc\u0644 \u0628\u0647 \u062e\u0648\u062f\u06a9\u0641\u0627\u06cc\u06cc \u0648 \u06a9\u0633\u0628 \u062f\u0627\u0646\u0634 \u0641\u0646\u06cc \u0637\u0631\u0627\u062d\u06cc \u0648 \u0633\u0627\u062e\u062a\u060c \u0646\u0635\u0628 \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u0648 \u062a\u0639\u0645\u06cc\u0631 \u0648 \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0627\u0646\u0648\u0627\u0639 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631 \u0627\u0632 \u062c\u0645\u0644\u0647 \u062a\u0648\u0631\u0628\u06cc\u0646\u200c\u0647\u0627\u06cc \u06af\u0627\u0632 \u0648 \u0628\u062e\u0627\u0631\u060c \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u060c \u067e\u0645\u067e\u200c\u0647\u0627 \u0648 \u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631 \u062a\u0623\u0633\u06cc\u0633 \u06af\u0631\u062f\u06cc\u062f.\n <\/p>\n<p class=\"desc-text\">\n \u0627\u06cc\u0646 \u0634\u0631\u06a9\u062a \u0637\u06cc 14 \u0633\u0627\u0644 \u06af\u0630\u0634\u062a\u0647 \u062e\u062f\u0645\u0627\u062a \u06af\u0633\u062a\u0631\u062f\u0647\u200c\u0627\u06cc \u062f\u0631 \u0635\u0646\u0627\u06cc\u0639 \u0646\u0641\u062a\u060c \u06af\u0627\u0632\u060c \u0646\u06cc\u0631\u0648\u06af\u0627\u0647\u06cc\u060c \u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc \u0648 \u0645\u0639\u062f\u0646\u06cc \u0627\u0631\u0627\u0626\u0647 \u0646\u0645\u0648\u062f\u0647 \u0648 \u0645\u0648\u0641\u0642 \u0628\u0647 \u0627\u062e\u0630 \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0645\u0648\u0641\u0642 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u062e\u0648\u062f \u06af\u0631\u062f\u06cc\u062f\u0647 \u0627\u0633\u062a.\n <\/p>\n<div class=\"honor-tags\">\n <span class=\"honor-tag\"><i class=\"fas fa-flask\"><\/i> \u062f\u0627\u0646\u0634\u200c\u0628\u0646\u06cc\u0627\u0646 \u0646\u0648\u0639 \u06f1<\/span><br \/>\n <span class=\"honor-tag\"><i class=\"fas fa-medal\"><\/i> \u06a9\u06cc\u0641\u06cc\u062a \u0645\u0645\u062a\u0627\u0632<\/span><br \/>\n <span class=\"honor-tag\"><i class=\"fas fa-certificate\"><\/i> \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 API<\/span><br \/>\n <span class=\"honor-tag\"><i class=\"fas fa-chart-line\"><\/i> \u06f1\u06f4 \u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647<\/span>\n <\/div>\n<div class=\"stats-group\">\n<div class=\"stat-item\">\n<div class=\"stat-number\" id=\"years\">\u06f1\u06f4<\/div>\n<div class=\"stat-label\">\u0633\u0627\u0644 \u0627\u0641\u062a\u062e\u0627\u0631<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\" id=\"projects\">\u06f1\u06f3\u06f0<\/div>\n<div class=\"stat-label\">\u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div>\n<\/p><\/div>\n<div class=\"stat-item\">\n<div class=\"stat-number\" id=\"experts\">\u06f5\u06f0<\/div>\n<div class=\"stat-label\">\u0645\u062a\u062e\u0635\u0635 \u0627\u0631\u0634\u062f<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <a href=\"#\" class=\"btn-gold\"><br \/>\n <span>\u0645\u0634\u0627\u0648\u0631\u0647 \u0648 \u0647\u0645\u06a9\u0627\u0631\u06cc<\/span><br \/>\n <i class=\"fas fa-arrow-left\"><\/i><br \/>\n <\/a>\n <\/div>\n<div class=\"visual-col\">\n<div class=\"image-frame\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/IMG_0846-scaled.jpg\" alt=\"\u062a\u06cc\u0645 \u0645\u0647\u0646\u062f\u0633\u06cc \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627\">\n <\/div>\n<div class=\"img-caption\">\n <i class=\"fas fa-users\"><\/i> \u062a\u06cc\u0645 \u062a\u062e\u0635\u0635\u06cc \u0645\u0647\u0646\u062f\u0633\u06cc \u0648 \u0627\u062c\u0631\u0627\n <\/div>\n<div style=\"font-size: 0.7rem; margin-top: 0.6rem; color:#7a9bb3;\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06f2\u06f4\/\u06f7 \u00b7 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc \u0641\u0648\u0631\u06cc<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"footer-company\">\n <span><i class=\"fas fa-industry\"><\/i> \u0647\u0645\u0631\u0627\u0647 \u0645\u0637\u0645\u0626\u0646 \u0635\u0646\u0627\u06cc\u0639 \u0627\u0646\u0631\u0698\u06cc \u0627\u06cc\u0631\u0627\u0646<\/span><br \/>\n <span><i class=\"fas fa-trophy\"><\/i> \u0628\u0631\u0646\u062f \u0645\u0644\u06cc \u062f\u0627\u0646\u0634\u200c\u0628\u0646\u06cc\u0627\u0646<\/span><br \/>\n <span><i class=\"fas fa-globe\"><\/i> \u0635\u0627\u062f\u0631\u0627\u062a \u0641\u0646\u0627\u0648\u0631\u06cc \u0628\u0647 \u06a9\u0634\u0648\u0631\u0647\u0627\u06cc \u0647\u0645\u0633\u0627\u06cc\u0647<\/span>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n \/\/ \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0634\u0645\u0627\u0631\u0634 \u0627\u0639\u062f\u0627\u062f \u0647\u0646\u06af\u0627\u0645 \u0648\u0631\u0648\u062f \u0628\u0647 \u0648\u06cc\u0648\u067e\u0648\u0631\u062a\n const yearsEl = document.getElementById('years');\n const projectsEl = document.getElementById('projects');\n const expertsEl = document.getElementById('experts');\n let animated = false;<\/p>\n<p> function animateNumbers() {\n if (animated) return;\n const targets = [14, 130, 50];\n const elements = [yearsEl, projectsEl, expertsEl];\n elements.forEach((el, idx) => {\n let current = 0;\n const target = targets[idx];\n const step = Math.ceil(target \/ 45);\n const interval = setInterval(() => {\n current += step;\n if (current >= target) {\n el.innerText = target;\n clearInterval(interval);\n } else {\n el.innerText = current;\n }\n }, 20);\n });\n animated = true;\n }<\/p>\n<p> const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting && !animated) {\n animateNumbers();\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.3 });\n const statsContainer = document.querySelector('.stats-group');\n if (statsContainer) observer.observe(statsContainer);<\/p>\n<p> \/\/ fallback \u0627\u06af\u0631 \u0632\u0648\u062f\u062a\u0631 \u062f\u06cc\u062f\u0647 \u0634\u062f\n window.addEventListener('load', () => {\n if (statsContainer && statsContainer.getBoundingClientRect().top < window.innerHeight - 100) {\n animateNumbers();\n }\n });\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u0645\u062d\u0635\u0648\u0644\u0627\u062a | \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627<\/title><\/p>\n<style>\n \/* \u062a\u0639\u0631\u06cc\u0641 \u0642\u0648\u06cc \u0648 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0641\u0648\u0646\u062a \u0633\u06cc\u0633\u062a\u0645\u06cc B Nazanin *\/\n @font-face {\n font-family: 'BNazaninLocal';\n src: local('B Nazanin'), local('BNazanin'), local('B Nazanin Bold'), local('B Nazanin regular');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n \/* \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0641\u0648\u0646\u062a B Nazanin \u0628\u0627 \u0627\u0648\u0644\u0648\u06cc\u062a \u0628\u0627\u0644\u0627 \u0648 !important \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062a\u063a\u06cc\u06cc\u0631 *\/\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n padding: 2rem;\n position: relative;\n }<\/p>\n<p> \/* \u0627\u0639\u0645\u0627\u0644 \u0645\u062c\u062f\u062f \u0641\u0648\u0646\u062a \u0628\u0647 \u062a\u0645\u0627\u0645 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 *\/\n body, body * {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> \/* \u0628\u0631\u0627\u06cc \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0641\u0648\u0646\u062a \u062e\u0627\u0635 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u0646\u062f *\/\n input, button, textarea, select, a, p, h1, h2, h3, h4, h5, h6, div, span, li, .product-name, .product-desc, .product-btn, .subtitle, .footer-products span {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'B Nazanin Bold', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.08) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> \/* \u0630\u0631\u0627\u062a \u0645\u062a\u062d\u0631\u06a9 \u0637\u0644\u0627\u06cc\u06cc *\/\n body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.06) 1px, transparent 1px);\n background-size: 40px 40px;\n pointer-events: none;\n animation: particleDrift 20s linear infinite;\n }<\/p>\n<p> @keyframes particleDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 40px 40px; }\n }<\/p>\n<p> .products-wrapper {\n max-width: 1600px;\n width: 100%;\n margin: 0 auto;\n padding: 0 32px;\n }<\/p>\n<p> \/* \u0628\u0627\u06a9\u0633 \u06a9\u0644\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a *\/\n .main-products-box {\n background: rgba(255, 255, 255, 0.96);\n backdrop-filter: blur(2px);\n border-radius: 2.5rem;\n box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(196, 154, 108, 0.2);\n overflow: hidden;\n transition: all 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n position: relative;\n }<\/p>\n<p> .main-products-box::before {\n content: '';\n position: absolute;\n top: -50%;\n left: -50%;\n width: 200%;\n height: 200%;\n background: radial-gradient(circle, rgba(196, 154, 108, 0.1), transparent 70%);\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n z-index: 1;\n }<\/p>\n<p> .main-products-box:hover::before {\n opacity: 1;\n animation: lightRotate 4s ease-in-out infinite;\n }<\/p>\n<p> @keyframes lightRotate {\n 0% { transform: translate(0%, 0%) rotate(0deg); }\n 50% { transform: translate(3%, 3%) rotate(3deg); }\n 100% { transform: translate(0%, 0%) rotate(0deg); }\n }<\/p>\n<p> .main-products-box:hover {\n transform: translateY(-8px) scale(1.01);\n box-shadow: 0 40px 70px -20px rgba(196, 154, 108, 0.3), 0 0 0 1px rgba(196, 154, 108, 0.4);\n }<\/p>\n<p> .gold-strip-main {\n height: 10px;\n background: linear-gradient(90deg, #0b3b5f, #0072ff, #ffffff, #ff6262, #0b3b5f);\n background-size: 200% auto;\n animation: shimmer 6s linear infinite;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> @keyframes shimmer {\n 0% { background-position: 0% 0; }\n 100% { background-position: 200% 0; }\n }<\/p>\n<p> .main-products-content {\n padding: 3rem 3.5rem 3.5rem 3.5rem;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> .products-header {\n text-align: center;\n margin-bottom: 3.5rem;\n position: relative;\n }<\/p>\n<p> .products-header::after {\n content: '';\n position: absolute;\n bottom: -15px;\n left: 50%;\n transform: translateX(-50%);\n width: 100px;\n height: 3px;\n background: linear-gradient(90deg, #c49a6c, #e6c8a0);\n animation: headerLineGlow 2s ease-in-out infinite;\n }<\/p>\n<p> @keyframes headerLineGlow {\n 0%, 100% { width: 100px; opacity: 0.6; }\n 50% { width: 160px; opacity: 1; box-shadow: 0 0 10px #c49a6c; }\n }<\/p>\n<p> .products-title {\n font-size: 2.5rem;\n font-weight: 800;\n background: linear-gradient(135deg, #10436b, #c49a6c, #e6c8a0, #c49a6c);\n background-size: 300% auto;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: -0.5px;\n margin-bottom: 0.5rem;\n animation: titleShine 4s linear infinite;\n position: relative;\n display: inline-block;\n }<\/p>\n<p> @keyframes titleShine {\n 0% { background-position: 0% 0; }\n 100% { background-position: 100% 0; }\n }<\/p>\n<p> .products-title::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n right: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, #c49a6c, #e6c8a0);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n filter: blur(12px);\n opacity: 0.3;\n z-index: -1;\n }<\/p>\n<p> .subtitle {\n text-align: center;\n color: #7a9bb3;\n font-size: 1rem;\n margin-top: 1.2rem;\n font-weight: 450;\n }<\/p>\n<p> .products-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n gap: 2rem;\n margin-top: 2.5rem;\n }<\/p>\n<p> \/* ========== \u06a9\u0627\u0631\u062a \u0645\u062d\u0635\u0648\u0644 \u0628\u0627 \u0639\u06a9\u0633 ========== *\/\n .product-card {\n background: rgba(255, 255, 255, 0.98);\n border-radius: 1.8rem;\n padding: 1.8rem;\n box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.1);\n transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n border: 2px solid rgba(196, 154, 108, 0.25);\n position: relative;\n overflow: hidden;\n opacity: 0;\n transform: translateY(30px) scale(0.95);\n }<\/p>\n<p> .product-card:nth-child(1) { animation: cardFloatIn 0.6s ease forwards 0.1s; }\n .product-card:nth-child(2) { animation: cardFloatIn 0.6s ease forwards 0.2s; }\n .product-card:nth-child(3) { animation: cardFloatIn 0.6s ease forwards 0.3s; }\n .product-card:nth-child(4) { animation: cardFloatIn 0.6s ease forwards 0.4s; }\n .product-card:nth-child(5) { animation: cardFloatIn 0.6s ease forwards 0.5s; }\n .product-card:nth-child(6) { animation: cardFloatIn 0.6s ease forwards 0.6s; }<\/p>\n<p> @keyframes cardFloatIn {\n 0% {\n opacity: 0;\n transform: translateY(40px) scale(0.92);\n filter: blur(2px);\n }\n 50% {\n opacity: 0.5;\n transform: translateY(-5px) scale(0.98);\n }\n 100% {\n opacity: 1;\n transform: translateY(0) scale(1);\n filter: blur(0);\n }\n }<\/p>\n<p> \/* \u062d\u0627\u0634\u06cc\u0647 \u0686\u0631\u062e\u0627\u0646 \u0637\u0644\u0627\u06cc\u06cc *\/\n .product-card::before {\n content: '';\n position: absolute;\n top: -2px;\n left: -2px;\n right: -2px;\n bottom: -2px;\n border-radius: 1.8rem;\n background: linear-gradient(135deg, #c49a6c, #e6c8a0, #f5d09e, #c49a6c);\n background-size: 300% 300%;\n opacity: 0;\n transition: opacity 0.3s ease;\n z-index: -1;\n }<\/p>\n<p> .product-card:hover::before {\n opacity: 1;\n animation: borderRotate 0.8s ease forwards;\n }<\/p>\n<p> @keyframes borderRotate {\n 0% { background-position: 0% 0%; }\n 100% { background-position: 100% 100%; }\n }<\/p>\n<p> \/* \u0627\u0641\u06a9\u062a \u0634\u0627\u06cc\u0646 \u0631\u0648\u06cc \u06a9\u0627\u0631\u062a *\/\n .product-card::after {\n content: '';\n position: absolute;\n top: -50%;\n left: -60%;\n width: 200%;\n height: 200%;\n background: linear-gradient(115deg, transparent, rgba(196, 154, 108, 0.12), transparent);\n transform: rotate(25deg);\n transition: all 0.7s ease;\n opacity: 0;\n pointer-events: none;\n }<\/p>\n<p> .product-card:hover::after {\n left: 100%;\n opacity: 1;\n }<\/p>\n<p> .product-card:hover {\n transform: translateY(-10px) scale(1.02);\n border-color: rgba(196, 154, 108, 0.6);\n box-shadow: 0 25px 40px -15px rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> \/* ========== \u0627\u0633\u062a\u0627\u06cc\u0644 \u0639\u06a9\u0633 \u0645\u062d\u0635\u0648\u0644 ========== *\/\n .product-image {\n width: 100%;\n height: 200px;\n background: linear-gradient(145deg, #f5f5f5, #e8e8e8);\n border-radius: 1.2rem;\n margin-bottom: 1.2rem;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n border: 1px solid rgba(196, 154, 108, 0.2);\n transition: all 0.3s ease;\n }<\/p>\n<p> .product-card:hover .product-image {\n border-color: #c49a6c;\n box-shadow: 0 8px 20px rgba(196, 154, 108, 0.2);\n }<\/p>\n<p> \/* \u0639\u06a9\u0633 \u0648\u0627\u0642\u0639\u06cc *\/\n .product-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s ease;\n }<\/p>\n<p> .product-card:hover .product-image img {\n transform: scale(1.08);\n }<\/p>\n<p> .product-name {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(135deg, #10436b, #c49a6c);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n margin-bottom: 0.8rem;\n padding-bottom: 0.5rem;\n border-bottom: 2px solid rgba(196, 154, 108, 0.3);\n display: inline-block;\n transition: all 0.3s ease;\n }<\/p>\n<p> .product-card:hover .product-name {\n background: linear-gradient(135deg, #c49a6c, #10436b);\n background-clip: text;\n -webkit-background-clip: text;\n }<\/p>\n<p> .product-desc {\n font-size: 0.95rem;\n line-height: 1.8;\n color: #4a6f88;\n margin: 1rem 0;\n text-align: justify;\n }<\/p>\n<p> .product-btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: linear-gradient(135deg, #10436b, #1a5a7a);\n color: white;\n padding: 0.7rem 1.5rem;\n border-radius: 40px;\n text-decoration: none;\n font-size: 0.9rem;\n font-weight: 500;\n transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.2);\n border: none;\n cursor: pointer;\n margin-top: 0.5rem;\n position: relative;\n overflow: hidden;\n }<\/p>\n<p> .product-btn::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.5s ease;\n }<\/p>\n<p> .product-btn:hover::before {\n left: 100%;\n }<\/p>\n<p> .product-btn:hover {\n background: linear-gradient(135deg, #1a5a7a, #c49a6c);\n transform: translateX(-5px);\n box-shadow: 0 8px 20px rgba(196, 154, 108, 0.3);\n }<\/p>\n<p> .product-btn::after {\n content: \"\u2190\";\n transition: transform 0.3s ease;\n }<\/p>\n<p> .product-btn:hover::after {\n transform: translateX(-5px);\n }<\/p>\n<p> .footer-products {\n margin-top: 3rem;\n padding-top: 1.5rem;\n text-align: center;\n font-size: 0.85rem;\n color: #7a9bb3;\n border-top: 1px solid rgba(196, 154, 108, 0.2);\n display: flex;\n justify-content: center;\n gap: 15px;\n flex-wrap: wrap;\n }<\/p>\n<p> .footer-products span {\n transition: all 0.3s ease;\n cursor: default;\n }<\/p>\n<p> .footer-products span:hover {\n color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> \/* \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 fadeIn \u0628\u0631\u0627\u06cc \u06a9\u0644 \u0628\u0627\u06a9\u0633 *\/\n .main-products-box {\n animation: mainBoxFadeIn 0.8s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards;\n }<\/p>\n<p> @keyframes mainBoxFadeIn {\n from {\n opacity: 0;\n transform: scale(0.98) translateY(20px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n }<\/p>\n<p> \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\n @media (max-width: 1100px) {\n .products-title {\n font-size: 2rem;\n }\n .products-grid {\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n }\n }<\/p>\n<p> @media (max-width: 780px) {\n body {\n padding: 1rem;\n }\n .products-wrapper {\n padding: 0 20px;\n }\n .main-products-content {\n padding: 2rem;\n }\n .products-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n .products-title {\n font-size: 1.8rem;\n }\n .product-name {\n font-size: 1.3rem;\n }\n .product-desc {\n font-size: 0.9rem;\n }\n .product-image {\n height: 170px;\n }\n .subtitle {\n font-size: 0.9rem;\n }\n }<\/p>\n<p> @media (max-width: 480px) {\n .products-wrapper {\n padding: 0 16px;\n }\n .main-products-content {\n padding: 1.5rem;\n }\n .product-card {\n padding: 1.2rem;\n }\n .product-image {\n height: 140px;\n }\n .products-title {\n font-size: 1.5rem;\n }\n .footer-products {\n font-size: 0.7rem;\n gap: 8px;\n }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"products-wrapper\">\n<div class=\"main-products-box\">\n<div class=\"gold-strip-main\"><\/div>\n<div class=\"main-products-content\">\n<div class=\"products-header\">\n<h1 class=\"products-title\" data-text=\"\u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0627\">\u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0645\u0627<\/h1>\n<p class=\"subtitle\">\ud83d\udd27 \u0627\u0631\u0627\u0626\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647\u200c\u062a\u0631\u06cc\u0646 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631 \u0635\u0646\u0639\u062a\u06cc<\/p>\n<\/p><\/div>\n<div class=\"products-grid\">\n <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/adobestock_56159073-min-scaled.jpeg\" alt=\"\u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631\">\n <\/div>\n<h3 class=\"product-name\">\u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631<\/h3>\n<p class=\"product-desc\">\n \u067e\u06a9\u06cc\u062c \u06a9\u0627\u0645\u0644\u060c \u0631\u0648\u062a\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0648 \u0642\u0637\u0639\u0627\u062a \u0627\u0646\u0648\u0627\u0639 \u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631 \u062a\u0627 \u062a\u0648\u0627\u0646 \u06f4\u06f0 \u0645\u06af\u0627\u0648\u0627\u062a.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/SS_2000184994.png\" alt=\"\u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0627\u0633\u06a9\u0631\u0648\">\n <\/div>\n<h3 class=\"product-name\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0627\u0633\u06a9\u0631\u0648<\/h3>\n<p class=\"product-desc\">\n \u0628\u0627\u0632\u0637\u0631\u0627\u062d\u06cc \u0648 \u0633\u0627\u062e\u062a \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u0627\u0633\u06a9\u0631\u0648 \u0628\u0631\u0627\u0633\u0627\u0633 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f API619.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/adobestock_134030859-min-scaled.jpeg\" alt=\"\u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632\">\n <\/div>\n<h3 class=\"product-name\">\u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632<\/h3>\n<p class=\"product-desc\">\n \u0633\u0627\u062e\u062a \u0631\u0648\u062a\u0648\u0631\u060c \u067e\u0648\u0633\u062a\u0647 \u06a9\u0627\u0645\u0644 \u0627\u0646\u0648\u0627\u0639 \u067e\u0645\u067e \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632 \u0627\u0632 \u0628\u0631\u0646\u062f\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062c\u0627\u0646\u0628\u06cc \u0622\u0646 \u0628\u0631 \u0627\u0633\u0627\u0633 API 610.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/shutterstock_1642049224-min-scaled.jpg\" alt=\"\u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631\">\n <\/div>\n<h3 class=\"product-name\">\u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631<\/h3>\n<p class=\"product-desc\">\n \u0633\u0627\u062e\u062a \u0631\u0648\u062a\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0648 \u0642\u0637\u0639\u0627\u062a \u0627\u0635\u0644\u06cc \u0628\u0647\u0645\u0631\u0627\u0647 \u062a\u0639\u0645\u06cc\u0631 \u0648 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0627\u0646\u0648\u0627\u0639 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u0633\u0627\u0646\u062a\u0631\u06cc\u0641\u06cc\u0648\u0698 \u0647\u0648\u0627\u06cc \u0641\u0634\u0631\u062f\u0647.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/2-scaled.png\" alt=\"\u062f\u0633\u062a\u06af\u0627\u0647 \u062d\u0630\u0641 \u0648\u0627\u0631\u0646\u06cc\u0634 \u0631\u0648\u063a\u0646\">\n <\/div>\n<h3 class=\"product-name\">\u062f\u0633\u062a\u06af\u0627\u0647 \u062d\u0630\u0641 \u0648\u0627\u0631\u0646\u06cc\u0634 \u0631\u0648\u063a\u0646<\/h3>\n<p class=\"product-desc\">\n \u062d\u0630\u0641 \u0648\u0627\u0631\u0646\u06cc\u0634 \u0627\u0632 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0631\u0648\u063a\u0646\u200c\u06a9\u0627\u0631\u06cc \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0639\u0645\u0631 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u0646\u0648\u06cc\u0646 \u0641\u06cc\u0644\u062a\u0631\u0627\u0633\u06cc\u0648\u0646 \u0648 \u062c\u062f\u0627\u0633\u0627\u0632\u06cc \u0648\u0627\u0631\u0646\u06cc\u0634 \u0627\u0632 \u0631\u0648\u063a\u0646\u200c\u0647\u0627\u06cc \u0635\u0646\u0639\u062a\u06cc.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<p> <\/p>\n<div class=\"product-card\">\n<div class=\"product-image\">\n <img decoding=\"async\" src=\"http:\/\/62.60.205.52\/wp-content\/uploads\/2026\/05\/adobestock_216987993-min-scaled.jpeg\" alt=\"\u067e\u0645\u067e \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632\">\n <\/div>\n<h3 class=\"product-name\">\u067e\u0645\u067e \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632<\/h3>\n<p class=\"product-desc\">\n \u0628\u0627\u0632 \u0637\u0631\u0627\u062d\u06cc \u0648 \u0645\u0647\u0646\u062f\u0633\u06cc \u0645\u062c\u062f\u062f\u060c \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0633\u0627\u0632\u06cc \u0648 \u067e\u06a9\u06cc\u062c\u06cc\u0646\u06af.\n <\/p>\n<p> <a href=\"#\" class=\"product-btn\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u062d\u0635\u0648\u0644<\/a>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p><\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 | \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627<\/title><br \/>\n <\/p>\n<style>\n \/* \u062a\u0639\u0631\u06cc\u0641 \u0641\u0648\u0646\u062a\u200c\u0647\u0627\u06cc \u0633\u06cc\u0633\u062a\u0645\u06cc *\/\n @font-face {\n font-family: 'BTitrLocal';\n src: local('B Titr'), local('BTitr'), local('B Titr Bold');\n font-weight: bold;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> @font-face {\n font-family: 'BNazaninLocal';\n src: local('B Nazanin'), local('BNazanin'), local('B Nazanin regular');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n \/* \u0641\u0648\u0646\u062a \u067e\u0627\u06cc\u0647 B Nazanin *\/\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'Tahoma', 'Arial', sans-serif !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n position: relative;\n overflow-x: hidden;\n }<\/p>\n<p> \/* \u0627\u0639\u0645\u0627\u0644 \u0641\u0648\u0646\u062a B Nazanin \u0628\u0647 \u062a\u0645\u0627\u0645 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 \u0628\u0647 \u062c\u0632 \u062a\u06cc\u062a\u0631\u0647\u0627 *\/\n body, body *:not(.section-title):not(.project-title):not(.nav-btn) {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> \/* \u0641\u0648\u0646\u062a \u0645\u062e\u0635\u0648\u0635 \u062a\u06cc\u062a\u0631\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc \u0648 \u062a\u06cc\u062a\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 - B Titr *\/\n .section-title, .project-title {\n font-family: 'BTitrLocal', 'B Titr', 'BTitr', 'B Nazanin', 'Tahoma', 'Arial', sans-serif !important;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.12) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.05) 1.5px, transparent 1.5px);\n background-size: 35px 35px;\n pointer-events: none;\n animation: slowDrift 25s linear infinite;\n }<\/p>\n<p> @keyframes slowDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 35px 35px; }\n }<\/p>\n<p> \/* \u0628\u0627\u06a9\u0633 \u0627\u0635\u0644\u06cc \u0628\u0627 \u0639\u0631\u0636 1550px - \u0645\u0637\u0627\u0628\u0642 \u062e\u0648\u0627\u0633\u062a\u0647 \u0634\u0645\u0627 *\/\n .marquee-container {\n max-width: 1550px;\n width: 95%;\n margin: 0 auto;\n padding: 0;\n }<\/p>\n<p> .premium-card {\n background: rgba(255, 255, 255, 0.97);\n backdrop-filter: blur(2px);\n border-radius: 2.2rem;\n box-shadow: 0 35px 60px -20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(196, 154, 108, 0.25);\n overflow: hidden;\n transition: transform 0.4s ease, box-shadow 0.4s ease;\n }<\/p>\n<p> .premium-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 45px 70px -22px rgba(196, 154, 108, 0.35);\n }<\/p>\n<p> .gold-top {\n height: 8px;\n background: linear-gradient(90deg, #0b3b5f, #c49a6c, #e9cf9e, #c49a6c, #0b3b5f);\n background-size: 250% auto;\n animation: goldShimmer 5s linear infinite;\n }<\/p>\n<p> @keyframes goldShimmer {\n 0% { background-position: 0% 0; }\n 100% { background-position: 250% 0; }\n }<\/p>\n<p> .section-header {\n text-align: center;\n padding: 2.5rem 2rem 1.5rem 2rem;\n }<\/p>\n<p> .section-title {\n font-size: 2.5rem;\n font-weight: 800;\n background: linear-gradient(125deg, #10436b, #c49a6c, #e9cf9e, #c49a6c);\n background-size: 300% auto;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n display: inline-block;\n animation: titleFlow 6s linear infinite;\n }<\/p>\n<p> @keyframes titleFlow {\n 0% { background-position: 0% 0; }\n 100% { background-position: 100% 0; }\n }<\/p>\n<p> .section-subtitle {\n color: #6c8ea0;\n margin-top: 0.8rem;\n font-size: 1rem;\n font-weight: 450;\n }<\/p>\n<p> \/* \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 *\/\n .projects-slider {\n position: relative;\n padding: 1rem 2rem 2rem;\n overflow: hidden;\n }<\/p>\n<p> .projects-wrapper {\n overflow: hidden;\n border-radius: 1.5rem;\n }<\/p>\n<p> .projects-track {\n display: flex;\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n gap: 2rem;\n }<\/p>\n<p> \/* \u0647\u0631 \u06a9\u0627\u0631\u062a \u067e\u0631\u0648\u0698\u0647 - \u0628\u0632\u0631\u06af *\/\n .project-card {\n flex: 0 0 calc(33.333% - 1.35rem);\n min-width: calc(33.333% - 1.35rem);\n background: white;\n border-radius: 1.8rem;\n overflow: hidden;\n box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.15);\n transition: all 0.3s ease;\n border: 1px solid rgba(196, 154, 108, 0.2);\n cursor: pointer;\n }<\/p>\n<p> .project-card:hover {\n transform: translateY(-10px);\n box-shadow: 0 25px 45px -12px rgba(196, 154, 108, 0.35);\n border-color: #c49a6c;\n }<\/p>\n<p> .project-image {\n width: 100%;\n height: 260px;\n object-fit: cover;\n transition: transform 0.5s ease;\n }<\/p>\n<p> .project-card:hover .project-image {\n transform: scale(1.05);\n }<\/p>\n<p> .image-placeholder {\n width: 100%;\n height: 260px;\n background: linear-gradient(135deg, #e8eef3, #dce5ed);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 4rem;\n color: #c49a6c;\n }<\/p>\n<p> .project-content {\n padding: 1.8rem;\n }<\/p>\n<p> .project-title {\n font-size: 1.5rem;\n font-weight: 700;\n background: linear-gradient(135deg, #1a4a6e, #c49a6c);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n margin-bottom: 0.75rem;\n }<\/p>\n<p> .project-location {\n display: inline-flex;\n align-items: center;\n gap: 0.3rem;\n color: #c49a6c;\n font-size: 0.9rem;\n margin-bottom: 1rem;\n background: rgba(196, 154, 108, 0.1);\n padding: 0.3rem 1rem;\n border-radius: 25px;\n }<\/p>\n<p> .project-desc {\n color: #5a6874;\n font-size: 0.95rem;\n line-height: 1.7;\n margin-bottom: 1.2rem;\n }<\/p>\n<p> .project-progress {\n margin-top: 1rem;\n }<\/p>\n<p> .progress-label {\n display: flex;\n justify-content: space-between;\n font-size: 0.8rem;\n color: #7a8e9b;\n margin-bottom: 0.5rem;\n }<\/p>\n<p> .progress-bar {\n height: 8px;\n background: #e2e8f0;\n border-radius: 10px;\n overflow: hidden;\n }<\/p>\n<p> .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, #c49a6c, #e9cf9e);\n border-radius: 10px;\n width: 0%;\n transition: width 0.5s ease;\n }<\/p>\n<p> \/* \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc *\/\n .nav-buttons {\n display: flex;\n justify-content: center;\n gap: 1.5rem;\n margin-top: 2rem;\n margin-bottom: 1.5rem;\n }<\/p>\n<p> .nav-btn {\n background: linear-gradient(135deg, #1a4a6e, #0b2b3b);\n border: none;\n width: 55px;\n height: 55px;\n border-radius: 50%;\n cursor: pointer;\n font-size: 1.5rem;\n color: #c49a6c;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n }<\/p>\n<p> .nav-btn:hover {\n transform: scale(1.1);\n background: linear-gradient(135deg, #c49a6c, #e9cf9e);\n color: #1a4a6e;\n box-shadow: 0 6px 16px rgba(196, 154, 108, 0.4);\n }<\/p>\n<p> .nav-btn:active {\n transform: scale(0.95);\n }<\/p>\n<p> \/* \u0645\u0633\u062a\u0637\u06cc\u0644\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc *\/\n .rectangles-container {\n display: flex;\n justify-content: center;\n gap: 1rem;\n margin-top: 1rem;\n margin-bottom: 1rem;\n }<\/p>\n<p> .rect {\n width: 50px;\n height: 8px;\n background: #cbd5e1;\n cursor: pointer;\n transition: all 0.3s ease;\n border-radius: 4px;\n }<\/p>\n<p> .rect.active {\n width: 80px;\n background: linear-gradient(90deg, #c49a6c, #e9cf9e);\n box-shadow: 0 0 8px rgba(196, 154, 108, 0.5);\n }<\/p>\n<p> .rect:hover {\n background: #c49a6c;\n transform: scaleY(1.3);\n }<\/p>\n<p> \/* \u0641\u0648\u062a\u0631 *\/\n .footer-stats {\n display: flex;\n justify-content: center;\n gap: 2rem;\n flex-wrap: wrap;\n padding: 1.8rem 2rem 2rem;\n border-top: 1px solid rgba(196, 154, 108, 0.2);\n margin-top: 0.5rem;\n color: #537e99;\n font-size: 0.9rem;\n }<\/p>\n<p> .stat-item {\n display: flex;\n align-items: center;\n gap: 8px;\n transition: all 0.2s;\n }<\/p>\n<p> .stat-item:hover {\n color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 *\/\n @media (max-width: 1200px) {\n .project-card {\n flex: 0 0 calc(50% - 1rem);\n min-width: calc(50% - 1rem);\n }\n .project-image { height: 230px; }\n }<\/p>\n<p> @media (max-width: 768px) {\n body { padding: 1rem; }\n .marquee-container { padding: 0; }\n .section-title { font-size: 1.8rem; }\n .project-card {\n flex: 0 0 100%;\n min-width: 100%;\n }\n .project-image { height: 200px; }\n .project-title { font-size: 1.3rem; }\n .nav-btn { width: 45px; height: 45px; font-size: 1.2rem; }\n .rect { width: 35px; }\n .rect.active { width: 55px; }\n .footer-stats { gap: 1rem; flex-direction: column; align-items: center; text-align: center; }\n }<\/p>\n<p> @media (max-width: 480px) {\n .section-title { font-size: 1.5rem; }\n .section-header { padding: 1.5rem 1rem 1rem 1rem; }\n .projects-slider { padding: 0.5rem 1rem 1.5rem; }\n .project-content { padding: 1.2rem; }\n .project-title { font-size: 1.1rem; }\n .project-desc { font-size: 0.85rem; }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"marquee-container\">\n<div class=\"premium-card\">\n<div class=\"gold-top\"><\/div>\n<div class=\"section-header\">\n<h2 class=\"section-title\">\u26a1 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0627\u062c\u0631\u0627 \u26a1<\/h2>\n<div class=\"section-subtitle\">\u0627\u0641\u062a\u062e\u0627\u0631 \u0645\u0627 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0648 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0635\u0646\u0639\u062a\u06cc \u062f\u0631 \u0633\u0631\u0627\u0633\u0631 \u0627\u06cc\u0631\u0627\u0646<\/div>\n<\/p><\/div>\n<div class=\"projects-slider\">\n<div class=\"projects-wrapper\">\n<div class=\"projects-track\" id=\"projectsTrack\">\n \n <\/div>\n<\/p><\/div>\n<div class=\"nav-buttons\">\n <button class=\"nav-btn\" id=\"prevBtn\">\u25c0<\/button><br \/>\n <button class=\"nav-btn\" id=\"nextBtn\">\u25b6<\/button>\n <\/div>\n<div class=\"rectangles-container\" id=\"rectanglesContainer\">\n \n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n \/\/ ==================== \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 ====================\n const projects = [\n {\n id: 1,\n title: \"\u0646\u0635\u0628 \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632\u06cc\",\n location: \"\u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0633\u06cc\u06a9\u0644 \u062a\u0631\u06a9\u06cc\u0628\u06cc \u0633\u0645\u0646\u0627\u0646\",\n description: \"\u0646\u0635\u0628 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06f2\u06f5 \u0645\u06af\u0627\u0648\u0627\u062a\u06cc \u0648 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0646\u062a\u0631\u0644 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0627 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0631\u0648\u0632 \u062f\u0646\u06cc\u0627\",\n progress: 75,\n imageUrl: \"https:\/\/cdn.donya-e-eqtesad.com\/thumbnail\/2Ydqo2xkFM5X\/QHn8O9nsSzT8qCU7RegsN6Pbb5v74eEtbKeSOh05RaZI8qV6Z6Fm1kt7TZyzEhnm\/%D8%A2%D8%B4%D9%86%D8%A7%DB%8C%DB%8C-%D8%A8%D8%A7-%D8%AA%D9%88%D8%B1%D8%A8%DB%8C%D9%86-%DA%AF%D8%A7%D8%B2-Gas-turbine+copy.jpg\"\n },\n {\n id: 2,\n title: \"\u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u06af\u0631\u06cc\u0632 \u0627\u0632 \u0645\u0631\u06a9\u0632\",\n location: \"\u067e\u0627\u0644\u0627\u06cc\u0634\u06af\u0627\u0647 \u0646\u0641\u062a \u0622\u0628\u0627\u062f\u0627\u0646\",\n description: \"\u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u06f4 \u062f\u0633\u062a\u06af\u0627\u0647 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0631\u0627\u0646\u062f\u0645\u0627\u0646 \u06f1\u06f8\u066a \u062f\u0631 \u0628\u0627\u0632\u0647 \u0632\u0645\u0627\u0646\u06cc \u06f6 \u0645\u0627\u0647\u0647\",\n progress: 60,\n imageUrl: \"https:\/\/blog.havasazantabriz.com\/wp-content\/uploads\/2020\/09\/AF.jpg\"\n },\n {\n id: 3,\n title: \"\u062a\u0639\u0645\u06cc\u0631\u0627\u062a \u0627\u0633\u0627\u0633\u06cc \u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631\",\n location: \"\u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc \u0628\u0646\u062f\u0631 \u0627\u0645\u0627\u0645\",\n description: \"\u062a\u0639\u0645\u06cc\u0631\u0627\u062a \u0627\u0633\u0627\u0633\u06cc \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u062a\u0648\u0631\u0628\u06cc\u0646 \u06f5\u06f0 \u0645\u06af\u0627\u0648\u0627\u062a\u06cc \u0628\u0627 \u0622\u062e\u0631\u06cc\u0646 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc\",\n progress: 90,\n imageUrl: \"https:\/\/pamco.ir\/wp-content\/uploads\/2021\/11\/1000-654-1.jpg\"\n },\n {\n id: 4,\n title: \"\u0627\u0631\u062a\u0642\u0627\u0621 \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0646\u062a\u0631\u0644 \u062a\u0648\u0631\u0628\u06cc\u0646\",\n location: \"\u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0634\u0647\u06cc\u062f \u0631\u062c\u0627\u06cc\u06cc\",\n description: \"\u0646\u0635\u0628 \u0633\u06cc\u0633\u062a\u0645 \u06a9\u0646\u062a\u0631\u0644 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u062c\u062f\u06cc\u062f \u0648 \u0647\u0648\u0634\u0645\u0646\u062f\u0633\u0627\u0632\u06cc \u0641\u0631\u0622\u06cc\u0646\u062f\u0647\u0627\u06cc \u0639\u0645\u0644\u06cc\u0627\u062a\u06cc\",\n progress: 45,\n imageUrl: \"https:\/\/images.unsplash.com\/photo-1581092160562-40aa08e78837?w=800&h=500&fit=crop\"\n },\n {\n id: 5,\n title: \"\u062a\u0627\u0645\u06cc\u0646 \u0642\u0637\u0639\u0627\u062a \u06cc\u062f\u06a9\u06cc \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\",\n location: \"\u0641\u0648\u0644\u0627\u062f \u0645\u0628\u0627\u0631\u06a9\u0647 \u0627\u0635\u0641\u0647\u0627\u0646\",\n description: \"\u062a\u0627\u0645\u06cc\u0646 \u0648 \u0646\u0635\u0628 \u0642\u0637\u0639\u0627\u062a \u0627\u0635\u0644\u06cc \u06a9\u0645\u067e\u0631\u0633\u0648\u0631\u0647\u0627\u06cc \u0645\u062d\u0648\u0631\u06cc \u0628\u0627 \u06af\u0627\u0631\u0627\u0646\u062a\u06cc \u06f2\u06f4 \u0645\u0627\u0647\u0647\",\n progress: 100,\n imageUrl: \"https:\/\/images.unsplash.com\/photo-1581091226033-d5c48150dbaa?w=800&h=500&fit=crop\"\n },\n {\n id: 6,\n title: \"\u0627\u0648\u0631\u0647\u0627\u0644 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632\u06cc \u06f3\u06f0 \u0645\u06af\u0627\u0648\u0627\u062a\u06cc\",\n location: \"\u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0628\u0639\u062b\u062a \u062a\u0647\u0631\u0627\u0646\",\n description: \"\u0627\u0648\u0631\u0647\u0627\u0644 \u06a9\u0627\u0645\u0644 \u0648 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0631\u0627\u0646\u062f\u0645\u0627\u0646 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632\u06cc \u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0628\u0639\u062b\u062a\",\n progress: 35,\n imageUrl: \"https:\/\/images.unsplash.com\/photo-1542736667-069246bdbc6d?w=800&h=500&fit=crop\"\n }\n ];<\/p>\n<p> \/\/ \u062d\u0627\u0644\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\n let currentIndex = 0;\n let slidesToShow = 3;\n const track = document.getElementById('projectsTrack');\n const rectanglesContainer = document.getElementById('rectanglesContainer');\n const prevBtn = document.getElementById('prevBtn');\n const nextBtn = document.getElementById('nextBtn');<\/p>\n<p> \/\/ \u062a\u0634\u062e\u06cc\u0635 \u062a\u0639\u062f\u0627\u062f \u0627\u0633\u0644\u0627\u06cc\u062f\u0647\u0627\u06cc \u0642\u0627\u0628\u0644 \u0646\u0645\u0627\u06cc\u0634\n function updateSlidesToShow() {\n if (window.innerWidth <= 768) {\n slidesToShow = 1;\n } else if (window.innerWidth <= 1200) {\n slidesToShow = 2;\n } else {\n slidesToShow = 3;\n }\n }\n \n \/\/ \u0633\u0627\u062e\u062a \u06a9\u0627\u0631\u062a \u067e\u0631\u0648\u0698\u0647\n function createProjectCard(project) {\n const card = document.createElement('div');\n card.className = 'project-card';\n \n const imageContainer = document.createElement('div');\n imageContainer.style.overflow = 'hidden';\n imageContainer.style.position = 'relative';\n \n const img = document.createElement('img');\n img.className = 'project-image';\n img.src = project.imageUrl;\n img.alt = project.title;\n img.loading = 'lazy';\n img.onerror = function() {\n this.style.display = 'none';\n const placeholder = document.createElement('div');\n placeholder.className = 'image-placeholder';\n placeholder.innerHTML = '\ud83c\udfed';\n imageContainer.appendChild(placeholder);\n };\n imageContainer.appendChild(img);\n \n const content = document.createElement('div');\n content.className = 'project-content';\n content.innerHTML = `\n \n\n<h3 class=\"project-title\">${project.title}<\/h3>\n<div class=\"project-location\">\n \ud83d\udccd ${project.location}\n <\/div>\n<p class=\"project-desc\">${project.description}<\/p>\n<div class=\"project-progress\">\n<div class=\"progress-label\">\n <span>\u067e\u06cc\u0634\u0631\u0641\u062a \u067e\u0631\u0648\u0698\u0647<\/span>\n <span>${project.progress}%<\/span>\n <\/div>\n<div class=\"progress-bar\">\n<div class=\"progress-fill\" style=\"width: ${project.progress}%\"><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> `;<\/p>\n<p> card.appendChild(imageContainer);\n card.appendChild(content);<\/p>\n<p> return card;\n }<\/p>\n<p> function renderSlides() {\n updateSlidesToShow();\n track.innerHTML = '';<\/p>\n<p> const endIndex = Math.min(currentIndex + slidesToShow, projects.length);\n for (let i = currentIndex; i < endIndex; i++) {\n const card = createProjectCard(projects[i]);\n track.appendChild(card);\n }\n \n const displayedCount = endIndex - currentIndex;\n const gap = slidesToShow - displayedCount;\n if (gap > 0 && gap < slidesToShow) {\n for (let i = 0; i < gap; i++) {\n const emptyDiv = document.createElement('div');\n emptyDiv.style.flex = `0 0 calc(${100\/slidesToShow}% - 1.35rem)`;\n emptyDiv.style.minWidth = `calc(${100\/slidesToShow}% - 1.35rem)`;\n emptyDiv.style.visibility = 'hidden';\n track.appendChild(emptyDiv);\n }\n }\n \n updateRectangles();\n updateButtons();\n }\n \n function updateRectangles() {\n rectanglesContainer.innerHTML = '';\n const totalPages = Math.ceil(projects.length \/ slidesToShow);\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n \n for (let i = 0; i < totalPages; i++) {\n const rect = document.createElement('div');\n rect.className = 'rect';\n if (i === currentPage) {\n rect.classList.add('active');\n }\n rect.addEventListener('click', () => {\n currentIndex = i * slidesToShow;\n if (currentIndex >= projects.length) {\n currentIndex = projects.length - slidesToShow;\n }\n if (currentIndex < 0) currentIndex = 0;\n renderSlides();\n });\n rectanglesContainer.appendChild(rect);\n }\n }\n \n function updateButtons() {\n const totalPages = Math.ceil(projects.length \/ slidesToShow);\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n \n prevBtn.disabled = currentPage === 0;\n nextBtn.disabled = currentPage === totalPages - 1;\n \n prevBtn.style.opacity = prevBtn.disabled ? '0.4' : '1';\n nextBtn.style.opacity = nextBtn.disabled ? '0.4' : '1';\n prevBtn.style.cursor = prevBtn.disabled ? 'not-allowed' : 'pointer';\n nextBtn.style.cursor = nextBtn.disabled ? 'not-allowed' : 'pointer';\n }\n \n function nextSlide() {\n const totalPages = Math.ceil(projects.length \/ slidesToShow);\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n \n if (currentPage + 1 < totalPages) {\n currentIndex = (currentPage + 1) * slidesToShow;\n renderSlides();\n }\n }\n \n function prevSlide() {\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n if (currentPage - 1 >= 0) {\n currentIndex = (currentPage - 1) * slidesToShow;\n renderSlides();\n }\n }<\/p>\n<p> prevBtn.addEventListener('click', prevSlide);\n nextBtn.addEventListener('click', nextSlide);<\/p>\n<p> let resizeTimer;\n window.addEventListener('resize', () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n const currentPage = Math.floor(currentIndex \/ slidesToShow);\n currentIndex = currentPage * slidesToShow;\n if (currentIndex >= projects.length) {\n currentIndex = Math.max(0, projects.length - slidesToShow);\n }\n renderSlides();\n }, 150);\n });<\/p>\n<p> renderSlides();\n<\/script><br \/>\n<\/body><br \/>\n<\/html> <\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 | \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0647\u0645\u0631\u0627\u0647\u0627\u0646 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u06a9<\/title><\/p>\n<style>\n @font-face {\n font-family: 'BTitrLocal';\n src: local('B Titr'), local('BTitr'), local('B Titr Bold');\n font-weight: bold;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> @font-face {\n font-family: 'BNazaninLocal';\n src: local('B Nazanin'), local('BNazanin'), local('B Nazanin regular');\n font-weight: normal;\n font-style: normal;\n font-display: swap;\n }<\/p>\n<p> * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'Tahoma', sans-serif !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n position: relative;\n overflow-x: hidden;\n }<\/p>\n<p> body, body *:not(.main-title) {\n font-family: 'BNazaninLocal', 'B Nazanin', 'BNazanin', 'Tahoma', sans-serif !important;\n }<\/p>\n<p> .main-title {\n font-family: 'BTitrLocal', 'B Titr', 'BTitr', 'B Nazanin', 'Tahoma', sans-serif !important;\n font-size: 2.3rem;\n font-weight: 800;\n background: linear-gradient(125deg, #10436b, #c49a6c, #e9cf9e, #c49a6c);\n background-size: 300% auto;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n letter-spacing: -0.3px;\n display: inline-block;\n animation: titleFlow 6s linear infinite;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(196, 154, 108, 0.12) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(196, 154, 108, 0.05) 1.5px, transparent 1.5px);\n background-size: 35px 35px;\n pointer-events: none;\n animation: slowDrift 25s linear infinite;\n }<\/p>\n<p> @keyframes slowDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 35px 35px; }\n }<\/p>\n<p> @keyframes titleFlow {\n 0% { background-position: 0% 0; }\n 100% { background-position: 100% 0; }\n }<\/p>\n<p> .marquee-container {\n max-width: 1550px;\n width: 100%;\n margin: 0 auto;\n }<\/p>\n<p> .premium-card {\n background: rgba(255, 255, 255, 0.97);\n backdrop-filter: blur(2px);\n border-radius: 2.2rem;\n box-shadow: 0 35px 60px -20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(196, 154, 108, 0.25);\n overflow: hidden;\n transition: transform 0.4s ease, box-shadow 0.4s ease;\n }<\/p>\n<p> .premium-card:hover {\n transform: translateY(-6px);\n box-shadow: 0 45px 70px -22px rgba(196, 154, 108, 0.35), 0 0 0 1px rgba(196, 154, 108, 0.5);\n }<\/p>\n<p> .gold-top {\n height: 8px;\n background: linear-gradient(90deg, #0b3b5f, #0072ff, #ffffff, #ff6262, #0b3b5f);\n background-size: 250% auto;\n animation: goldShimmer 5s linear infinite;\n }<\/p>\n<p> @keyframes goldShimmer {\n 0% { background-position: 0% 0; }\n 100% { background-position: 250% 0; }\n }<\/p>\n<p> .card-header {\n text-align: center;\n padding: 2rem 2rem 1rem 2rem;\n }<\/p>\n<p> .subhead {\n color: #6c8ea0;\n margin-top: 0.8rem;\n font-size: 0.95rem;\n font-weight: 450;\n border-top: 1px dashed rgba(196, 154, 108, 0.3);\n display: inline-block;\n padding-top: 0.6rem;\n }<\/p>\n<p> .slider-box {\n background: #fefcf7;\n margin: 1.2rem 0rem 2rem 0rem;\n border-radius: 1rem;\n padding: 2rem 0rem;\n box-shadow: inset 0 1px 4px rgba(0,0,0,0.02), 0 10px 20px -8px rgba(0,0,0,0.1);\n position: relative;\n overflow: hidden;\n border: 1px solid rgba(196, 154, 108, 0.35);\n }<\/p>\n<p> .marquee-track {\n overflow: hidden;\n white-space: nowrap;\n position: relative;\n width: 100%;\n }<\/p>\n<p> .marquee-content {\n display: inline-block;\n white-space: nowrap;\n will-change: transform;\n }<\/p>\n<p> \/* \u0627\u0633\u062a\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0631\u0627\u06cc \u0644\u0648\u06af\u0648\u06cc \u0645\u062a\u0646\u06cc (\u0628\u062f\u0648\u0646 \u0639\u06a9\u0633 \u062e\u0627\u0631\u062c\u06cc) *\/\n .logo-item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 210px;\n height: 115px;\n margin: 0 18px;\n background: white;\n border-radius: 28px;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0,0,0,0.03);\n transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);\n vertical-align: middle;\n border: 1px solid rgba(196, 154, 108, 0.25);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n backdrop-filter: blur(2px);\n }<\/p>\n<p> .logo-item::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(120deg, transparent, rgba(196, 154, 108, 0.15), transparent);\n transform: translateX(-100%);\n transition: transform 0.6s ease;\n }<\/p>\n<p> .logo-item:hover::before {\n transform: translateX(100%);\n }<\/p>\n<p> .logo-item:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 30px -10px rgba(196, 154, 108, 0.35);\n border-color: #c49a6c;\n }<\/p>\n<p> \/* \u0645\u062d\u062a\u0648\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc \u0644\u0648\u06af\u0648 *\/\n .logo-content {\n text-align: center;\n width: 100%;\n padding: 0 0.5rem;\n }<\/p>\n<p> .logo-icon {\n font-size: 2.5rem;\n display: block;\n margin-bottom: 6px;\n }<\/p>\n<p> .logo-name {\n font-size: 0.85rem;\n font-weight: 700;\n line-height: 1.4;\n word-break: keep-all;\n display: inline-block;\n max-width: 100%;\n }<\/p>\n<p> .controls-info {\n text-align: center;\n margin-top: 1.2rem;\n font-size: 0.75rem;\n color: #9bafbf;\n }<\/p>\n<p> .controls-info i {\n font-style: normal;\n background: rgba(196, 154, 108, 0.15);\n padding: 0.2rem 1rem;\n border-radius: 50px;\n display: inline-block;\n }<\/p>\n<p> .footer-stats {\n display: flex;\n justify-content: center;\n gap: 1.8rem;\n flex-wrap: wrap;\n padding: 1.5rem 2rem 2rem;\n border-top: 1px solid rgba(196, 154, 108, 0.2);\n margin-top: 0.5rem;\n color: #537e99;\n font-size: 0.85rem;\n }<\/p>\n<p> .stat-item {\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s;\n }<\/p>\n<p> .stat-item:hover {\n color: #c49a6c;\n transform: translateY(-2px);\n }<\/p>\n<p> @media (max-width: 768px) {\n body { padding: 1rem; }\n .main-title { font-size: 1.7rem; }\n .logo-item { width: 170px; height: 95px; margin: 0 12px; }\n .logo-icon { font-size: 2rem; }\n .logo-name { font-size: 0.75rem; }\n .slider-box { margin: 1rem 0rem 1.5rem 0rem; padding: 1.5rem 0; }\n }<\/p>\n<p> @media (max-width: 480px) {\n .logo-item { width: 145px; height: 85px; margin: 0 8px; }\n .logo-icon { font-size: 1.7rem; }\n .logo-name { font-size: 0.7rem; }\n .main-title { font-size: 1.4rem; }\n .card-header { padding: 1.2rem 1rem 0.5rem 1rem; }\n .slider-box { margin: 0.8rem 0rem 1rem 0rem; }\n }\n <\/style>\n<p> \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\n<\/head><br \/>\n<body><\/p>\n<div class=\"marquee-container\">\n<div class=\"premium-card\">\n<div class=\"gold-top\"><\/div>\n<div class=\"card-header\">\n<h1 class=\"main-title\">\u258d \u0647\u0645\u0631\u0627\u0647\u0627\u0646 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u06a9 \u258d<\/h1>\n<div class=\"subhead\">\u0627\u0641\u062a\u062e\u0627\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u0628\u0631\u0646\u062f\u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u0635\u0646\u0639\u062a\u06cc \u0627\u06cc\u0631\u0627\u0646<\/div>\n<\/p><\/div>\n<div class=\"slider-box\">\n<div class=\"marquee-track\">\n<div class=\"marquee-content\" id=\"marqueeContent\"><\/div>\n<\/p><\/div>\n<div class=\"controls-info\">\n <i class=\"fas fa-arrows-alt-h\"><\/i> \u0646\u0634\u0627\u0646 \u0645\u0648\u0633 \u2013 \u062a\u0648\u0642\u0641 \u062d\u0631\u06a9\u062a\n <\/div>\n<\/p><\/div>\n<div class=\"footer-stats\">\n<div class=\"stat-item\"><i class=\"fas fa-chart-line\"><\/i> \u0628\u06cc\u0634 \u0627\u0632 \u06f1\u06f4\u06f0 \u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div>\n<div class=\"stat-item\"><i class=\"fas fa-users\"><\/i> \u06f5\u06f0+ \u0645\u062a\u062e\u0635\u0635 \u0627\u0631\u0634\u062f<\/div>\n<div class=\"stat-item\"><i class=\"fas fa-globe\"><\/i> \u0635\u0627\u062f\u0631\u0627\u062a \u0628\u0647 \u06f7 \u06a9\u0634\u0648\u0631<\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n<p><script>\n \/\/ \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0634\u0631\u06a9\u062a\u200c\u0647\u0627 (\u0646\u0627\u0645\u060c \u0631\u0646\u06af \u0645\u062a\u0646\u060c \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647\u060c \u0622\u06cc\u06a9\u0648\u0646)\n const companies = [\n { name: \"\u0641\u0648\u0644\u0627\u062f \u0645\u0628\u0627\u0631\u06a9\u0647\", bgColor: \"#FFF8F0\", textColor: \"#b3572c\", icon: \"\ud83c\udfed\" },\n { name: \"\u067e\u0627\u0644\u0627\u06cc\u0634 \u0646\u0641\u062a \u0622\u0628\u0627\u062f\u0627\u0646\", bgColor: \"#EFF6FF\", textColor: \"#1f6daf\", icon: \"\u26fd\" },\n { name: \"\u0633\u067e\u0627\u0647\u0627\u0646 \u0627\u0646\u0631\u0698\u06cc\", bgColor: \"#FFF2E6\", textColor: \"#c25d2c\", icon: \"\u26a1\" },\n { name: \"\u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc \u0634\u0627\u0632\u0646\u062f\", bgColor: \"#EBF5FF\", textColor: \"#0f5b8c\", icon: \"\ud83e\uddea\" },\n { name: \"\u06af\u0644\u200c\u06af\u0647\u0631 \u0633\u06cc\u0631\u062c\u0627\u0646\", bgColor: \"#F2F8EA\", textColor: \"#557a33\", icon: \"\u26cf\ufe0f\" },\n { name: \"\u0646\u06cc\u0631\u0648\u06af\u0627\u0647 \u0634\u0647\u06cc\u062f \u0631\u062c\u0627\u06cc\u06cc\", bgColor: \"#FEF1E5\", textColor: \"#b85a2b\", icon: \"\ud83d\udd25\" },\n { name: \"\u0630\u0648\u0628\u200c\u0622\u0647\u0646 \u0627\u0635\u0641\u0647\u0627\u0646\", bgColor: \"#F5F0FD\", textColor: \"#6b3fa0\", icon: \"\u2699\ufe0f\" },\n { name: \"\u06af\u0631\u0648\u0647 \u0645\u067e\u0646\u0627\", bgColor: \"#FFF9EF\", textColor: \"#c88f3c\", icon: \"\ud83d\udd27\" },\n { name: \"\u0634\u0631\u06a9\u062a \u0646\u0641\u062a \u0648 \u06af\u0627\u0632 \u067e\u0627\u0631\u0633\", bgColor: \"#E8F2F5\", textColor: \"#327a8a\", icon: \"\ud83d\udee2\ufe0f\" },\n { name: \"\u0645\u0633 \u0633\u0631\u0686\u0634\u0645\u0647\", bgColor: \"#FEF6E0\", textColor: \"#b5622e\", icon: \"\u26f0\ufe0f\" },\n { name: \"\u067e\u0627\u0644\u0627\u06cc\u0634 \u0646\u0641\u062a \u0627\u0635\u0641\u0647\u0627\u0646\", bgColor: \"#F0F7FF\", textColor: \"#2c6e9e\", icon: \"\ud83c\udfed\" },\n { name: \"\u0635\u0646\u0627\u06cc\u0639 \u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc \u062e\u0644\u06cc\u062c \u0641\u0627\u0631\u0633\", bgColor: \"#FFF4EA\", textColor: \"#b55b2a\", icon: \"\ud83c\udf0a\" },\n { name: \"\u0634\u0631\u06a9\u062a \u0645\u0644\u06cc \u0646\u0641\u062a \u0627\u06cc\u0631\u0627\u0646\", bgColor: \"#E8F0F8\", textColor: \"#1a5f8b\", icon: \"\ud83d\udee2\ufe0f\" },\n { name: \"\u0641\u0648\u0644\u0627\u062f \u062e\u0648\u0632\u0633\u062a\u0627\u0646\", bgColor: \"#FFF3E8\", textColor: \"#b45a2c\", icon: \"\ud83c\udfed\" }\n ];<\/p>\n<p> const marqueeContentDiv = document.getElementById('marqueeContent');<\/p>\n<p> \/\/ \u0633\u0627\u062e\u062a \u0622\u06cc\u062a\u0645 \u0644\u0648\u06af\u0648 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 DOM (\u0628\u062f\u0648\u0646 canvas \u0648 \u0628\u062f\u0648\u0646 \u0639\u06a9\u0633 \u062e\u0627\u0631\u062c\u06cc)\n function createLogoItem(company) {\n const itemDiv = document.createElement('div');\n itemDiv.className = 'logo-item';\n \/\/ \u062a\u0646\u0638\u06cc\u0645 \u0631\u0646\u06af \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0627\u0632 \u0631\u0648\u06cc \u0634\u0631\u06a9\u062a\n itemDiv.style.backgroundColor = company.bgColor;<\/p>\n<p> const contentDiv = document.createElement('div');\n contentDiv.className = 'logo-content';<\/p>\n<p> const iconSpan = document.createElement('div');\n iconSpan.className = 'logo-icon';\n iconSpan.innerText = company.icon;<\/p>\n<p> const nameSpan = document.createElement('div');\n nameSpan.className = 'logo-name';\n nameSpan.innerText = company.name;\n nameSpan.style.color = company.textColor;<\/p>\n<p> contentDiv.appendChild(iconSpan);\n contentDiv.appendChild(nameSpan);\n itemDiv.appendChild(contentDiv);<\/p>\n<p> return itemDiv;\n }<\/p>\n<p> \/\/ \u0633\u0627\u062e\u062a \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u0628\u0627 \u062a\u06a9\u0631\u0627\u0631 \u06a9\u0627\u0641\u06cc\n function buildInfiniteMarquee() {\n marqueeContentDiv.innerHTML = '';<\/p>\n<p> \/\/ \u0633\u0627\u062e\u062a \u0622\u06cc\u062a\u0645\u200c\u0647\u0627\u06cc \u0627\u0635\u0644\u06cc\n const items = companies.map(company => createLogoItem(company));<\/p>\n<p> \/\/ \u0628\u0631\u0627\u06cc \u062d\u0631\u06a9\u062a \u0628\u06cc\u200c\u0646\u0647\u0627\u06cc\u062a \u0628\u062f\u0648\u0646 \u0648\u0642\u0641\u0647\u060c \u062d\u062f\u0627\u0642\u0644 \u06f3 \u0628\u0627\u0631 \u062a\u06a9\u0631\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\n const repeatCount = 3;\n for (let i = 0; i < repeatCount; i++) {\n for (let item of items) {\n const clone = item.cloneNode(true);\n marqueeContentDiv.appendChild(clone);\n }\n }\n \n \/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u0639\u0631\u0636 \u06a9\u0644 \u0645\u062d\u062a\u0648\u0627 \u0648 \u062a\u0646\u0638\u06cc\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\n setTimeout(() => {\n const content = marqueeContentDiv;\n const totalWidth = content.scrollWidth;\n const singleSetWidth = totalWidth \/ repeatCount;<\/p>\n<p> \/\/ \u0633\u0631\u0639\u062a \u062d\u0631\u06a9\u062a: 50 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0631 \u062b\u0627\u0646\u06cc\u0647\n const speed = 55;\n const duration = totalWidth \/ speed;<\/p>\n<p> \/\/ \u0633\u0627\u062e\u062a \u06a9\u0644\u06cc\u062f\u0641\u0631\u06cc\u0645 \u062f\u0627\u06cc\u0646\u0627\u0645\u06cc\u06a9 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\n const style = document.createElement('style');\n const animationName = 'infiniteMarquee_' + Date.now();\n style.textContent = `\n @keyframes ${animationName} {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-${singleSetWidth}px); }\n }\n .marquee-content {\n animation: ${animationName} ${duration}s linear infinite !important;\n }\n `;\n \/\/ \u062d\u0630\u0641 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0642\u062f\u06cc\u0645\u06cc \u0627\u06af\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\n const oldStyle = document.getElementById('dynamicMarqueeStyle');\n if (oldStyle) oldStyle.remove();\n style.id = 'dynamicMarqueeStyle';\n document.head.appendChild(style);<\/p>\n<p> console.log(`\u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u0633\u0631\u0639\u062a ${speed}px\/s \u0648 \u0645\u062f\u062a ${duration.toFixed(2)} \u062b\u0627\u0646\u06cc\u0647 \u0622\u063a\u0627\u0632 \u0634\u062f`);\n }, 100);\n }<\/p>\n<p> \/\/ \u062a\u0648\u0642\u0641 \u0648 \u0634\u0631\u0648\u0639 \u062d\u0631\u06a9\u062a \u0631\u0648\u06cc \u0647\u0627\u0648\u0631 (\u0645\u0627\u0648\u0633 \u0648 \u0644\u0645\u0633\u06cc)\n const sliderBox = document.querySelector('.slider-box');\n if (sliderBox) {\n const pauseAnimation = () => {\n const marquee = document.querySelector('.marquee-content');\n if (marquee) marquee.style.animationPlayState = 'paused';\n };\n const resumeAnimation = () => {\n const marquee = document.querySelector('.marquee-content');\n if (marquee) marquee.style.animationPlayState = 'running';\n };\n sliderBox.addEventListener('mouseenter', pauseAnimation);\n sliderBox.addEventListener('mouseleave', resumeAnimation);\n sliderBox.addEventListener('touchstart', pauseAnimation);\n sliderBox.addEventListener('touchend', resumeAnimation);\n }<\/p>\n<p> \/\/ \u0627\u062c\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647\n buildInfiniteMarquee();<\/p>\n<p> \/\/ \u062f\u0631 \u0635\u0648\u0631\u062a \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0646\u062f\u0627\u0632\u0647 \u0635\u0641\u062d\u0647\u060c \u062f\u0648\u0628\u0627\u0631\u0647 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0631\u0627 \u0645\u062d\u0627\u0633\u0628\u0647 \u06a9\u0646\n let resizeTimer;\n window.addEventListener('resize', () => {\n clearTimeout(resizeTimer);\n resizeTimer = setTimeout(() => {\n buildInfiniteMarquee();\n }, 250);\n });\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p><!DOCTYPE html><br \/>\n<html lang=\"fa\" dir=\"rtl\"><br \/>\n<head><br \/>\n <meta charset=\"UTF-8\"><br \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\"><br \/>\n <title>\u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 | \u0641\u0648\u062a\u0631 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/title><br \/>\n <\/p>\n<style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }<\/p>\n<p> body {\n \/* \u0641\u0642\u0637 \u0648 \u0641\u0642\u0637 \u0641\u0648\u0646\u062a B Koodak - \u0628\u062f\u0648\u0646 \u0647\u06cc\u0686 \u0641\u0648\u0646\u062a \u062f\u06cc\u06af\u0631\u06cc *\/\n font-family: 'B Koodak', 'BKoodak', 'B Koodak Bold', Tahoma, Arial !important;\n background: linear-gradient(135deg, #0b2b3b 0%, #1a4a6e 100%);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n position: relative;\n overflow-x: hidden;\n }<\/p>\n<p> \/* \u0627\u0639\u0645\u0627\u0644 \u0627\u062c\u0628\u0627\u0631\u06cc \u0641\u0648\u0646\u062a B Koodak \u0628\u0647 \u062a\u06a9 \u062a\u06a9 \u0627\u0644\u0645\u0627\u0646\u200c\u0647\u0627 *\/\n body, body *,\n h1, h2, h3, h4, h5, h6,\n p, span, div, a, li, ul, ol,\n .footer, .footer *, .footer-col h3,\n .footer-links a, .contact-info p,\n .social-links a, .expertise-badge,\n .copyright, .footer-logo span {\n font-family: 'B Koodak', 'BKoodak', 'B Koodak Bold', Tahoma, Arial !important;\n }<\/p>\n<p> body::before {\n content: '';\n position: fixed;\n inset: 0;\n background: radial-gradient(ellipse at 50% 30%, rgba(52, 152, 219, 0.08) 0%, transparent 70%);\n pointer-events: none;\n z-index: 0;\n }<\/p>\n<p> body::after {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: radial-gradient(circle at 20% 40%, rgba(52, 152, 219, 0.04) 1.5px, transparent 1.5px);\n background-size: 35px 35px;\n pointer-events: none;\n animation: slowDrift 25s linear infinite;\n }<\/p>\n<p> @keyframes slowDrift {\n 0% { background-position: 0 0; }\n 100% { background-position: 35px 35px; }\n }<\/p>\n<p> \/* \u0628\u0627\u06a9\u0633 \u0627\u0635\u0644\u06cc \u062e\u0627\u0644\u06cc (\u0641\u0642\u0637 \u0628\u0631\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u0641\u0648\u062a\u0631) *\/\n .empty-space {\n max-width: 1550px;\n width: 100%;\n margin: 0 auto;\n height: 100px;\n }<\/p>\n<p> \/* ==================== \u0641\u0648\u062a\u0631 \u062c\u0630\u0627\u0628 \u0648 \u0645\u062f\u0631\u0646 \u0628\u0627 \u062a\u0645 \u0622\u0628\u06cc ==================== *\/\n .footer {\n max-width: 1550px;\n width: 100%;\n margin: 0 auto;\n border-radius: 2rem;\n overflow: hidden;\n position: relative;\n background: linear-gradient(135deg, #0a1620 0%, #0f1e2e 50%, #0a1620 100%);\n box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(52, 152, 219, 0.25);\n }<\/p>\n<p> \/* \u0627\u0641\u06a9\u062a \u06af\u0631\u0627\u062f\u06cc\u0627\u0646\u062a \u0645\u062a\u062d\u0631\u06a9 \u062f\u0631 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0641\u0648\u062a\u0631 *\/\n .footer::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(45deg, \n transparent 30%, \n rgba(52, 152, 219, 0.05) 50%, \n transparent 70%);\n background-size: 200% 200%;\n animation: footerShine 8s ease infinite;\n pointer-events: none;\n }<\/p>\n<p> @keyframes footerShine {\n 0% { transform: translateX(-100%); }\n 100% { transform: translateX(100%); }\n }<\/p>\n<p> \/* \u062e\u0637 \u0622\u0628\u06cc \u0628\u0627\u0644\u0627\u06cc \u0641\u0648\u062a\u0631 *\/\n .footer-blue {\n height: 3px;\n background: linear-gradient(90deg, \n transparent, \n #3498db, \n #5dade2, \n #2980b9, \n transparent);\n background-size: 200% auto;\n animation: blueLineMove 3s linear infinite;\n }<\/p>\n<p> @keyframes blueLineMove {\n 0% { background-position: 0% 0; }\n 100% { background-position: 200% 0; }\n }<\/p>\n<p> .footer-content {\n padding: 3rem 2.5rem 2rem;\n position: relative;\n z-index: 2;\n }<\/p>\n<p> .footer-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 2rem;\n margin-bottom: 2.5rem;\n }<\/p>\n<p> \/* \u0647\u0631 \u0633\u062a\u0648\u0646 \u0641\u0648\u062a\u0631 *\/\n .footer-col h3 {\n color: #5dade2;\n font-size: 1.2rem;\n font-weight: 700;\n margin-bottom: 1.5rem;\n position: relative;\n display: inline-block;\n }<\/p>\n<p> .footer-col h3::after {\n content: '';\n position: absolute;\n bottom: -8px;\n right: 0;\n width: 40px;\n height: 3px;\n background: linear-gradient(90deg, #3498db, #5dade2);\n border-radius: 3px;\n transition: width 0.3s ease;\n }<\/p>\n<p> .footer-col:hover h3::after {\n width: 70px;\n }<\/p>\n<p> .footer-links {\n list-style: none;\n }<\/p>\n<p> .footer-links li {\n margin-bottom: 0.8rem;\n }<\/p>\n<p> .footer-links a {\n color: #a0b4c8;\n text-decoration: none;\n transition: all 0.3s ease;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9rem;\n }<\/p>\n<p> .footer-links a i {\n font-size: 0.8rem;\n opacity: 0;\n transform: translateX(-10px);\n transition: all 0.3s ease;\n color: #3498db;\n }<\/p>\n<p> .footer-links a:hover {\n color: #5dade2;\n transform: translateX(-5px);\n }<\/p>\n<p> .footer-links a:hover i {\n opacity: 1;\n transform: translateX(0);\n }<\/p>\n<p> \/* \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062a\u0645\u0627\u0633 *\/\n .contact-info p {\n display: flex;\n align-items: center;\n gap: 0.8rem;\n margin-bottom: 1rem;\n color: #a0b4c8;\n font-size: 0.9rem;\n transition: all 0.3s ease;\n }<\/p>\n<p> .contact-info p i {\n width: 30px;\n height: 30px;\n background: rgba(52, 152, 219, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n color: #3498db;\n transition: all 0.3s ease;\n }<\/p>\n<p> .contact-info p:hover {\n color: #5dade2;\n transform: translateX(-5px);\n }<\/p>\n<p> .contact-info p:hover i {\n background: rgba(52, 152, 219, 0.2);\n transform: scale(1.1);\n }<\/p>\n<p> \/* \u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc *\/\n .social-links {\n display: flex;\n gap: 1rem;\n margin-top: 1.5rem;\n flex-wrap: wrap;\n }<\/p>\n<p> .social-links a {\n width: 40px;\n height: 40px;\n background: rgba(255, 255, 255, 0.05);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #a0b4c8;\n font-size: 1.2rem;\n transition: all 0.3s ease;\n text-decoration: none;\n border: 1px solid rgba(52, 152, 219, 0.25);\n }<\/p>\n<p> .social-links a:hover {\n background: linear-gradient(135deg, #3498db, #2980b9);\n color: #fff;\n transform: translateY(-5px) rotate(360deg);\n border-color: transparent;\n }<\/p>\n<p> \/* \u0628\u0631\u0686\u0633\u0628 \u062a\u062e\u0635\u0635 *\/\n .expertise-badge {\n margin-top: 1.5rem;\n padding: 0.8rem 1rem;\n background: rgba(52, 152, 219, 0.08);\n border-radius: 12px;\n text-align: center;\n font-size: 0.85rem;\n color: #3498db;\n border-right: 3px solid #3498db;\n }<\/p>\n<p> \/* \u06a9\u067e\u06cc\u200c\u0631\u0627\u06cc\u062a *\/\n .copyright {\n text-align: center;\n padding-top: 1.8rem;\n margin-top: 1rem;\n border-top: 1px solid rgba(52, 152, 219, 0.15);\n color: #6a8098;\n font-size: 0.8rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 1rem;\n }<\/p>\n<p> .copyright .heart {\n color: #3498db;\n display: inline-flex;\n align-items: center;\n gap: 0.2rem;\n }<\/p>\n<p> .copyright a {\n color: #3498db;\n text-decoration: none;\n transition: opacity 0.3s;\n }<\/p>\n<p> .copyright a:hover {\n opacity: 0.8;\n }<\/p>\n<p> \/* \u0644\u0648\u06af\u0648 \u06cc\u0627 \u0646\u0634\u0627\u0646 \u0634\u0631\u06a9\u062a (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc) *\/\n .footer-logo {\n margin-bottom: 1rem;\n }<\/p>\n<p> .footer-logo span {\n font-size: 1.5rem;\n font-weight: 800;\n background: linear-gradient(135deg, #5dade2, #3498db, #2980b9);\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n }<\/p>\n<p> \/* \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0641\u0648\u062a\u0631 *\/\n @media (max-width: 1000px) {\n .footer-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 2rem;\n }\n }<\/p>\n<p> @media (max-width: 768px) {\n body { padding: 1rem; }\n .footer-content { padding: 2rem 1.5rem; }\n .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }\n .copyright { flex-direction: column; text-align: center; }\n }<\/p>\n<p> @media (max-width: 480px) {\n .social-links { justify-content: center; }\n }\n <\/style>\n<p><\/head><br \/>\n<body><\/p>\n<div class=\"empty-space\"><\/div>\n<p><\/p>\n<footer class=\"footer\">\n<div class=\"footer-blue\"><\/div>\n<div class=\"footer-content\">\n<div class=\"footer-grid\">\n <\/p>\n<div class=\"footer-col\">\n<h3>\u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\u06cc \u0645\u0647\u0645<\/h3>\n<ul class=\"footer-links\">\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u062e\u062f\u0645\u0627\u062a<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/a><\/li>\n<\/ul><\/div>\n<p> <\/p>\n<div class=\"footer-col\">\n<h3>\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/h3>\n<div class=\"contact-info\">\n<p><i class=\"fas fa-map-marker-alt\"><\/i> \u062a\u0647\u0631\u0627\u0646\u060c \u06a9\u06cc\u0644\u0648\u0645\u062a\u0631 \u06f1\u06f8 \u062c\u0627\u062f\u0647 \u0642\u062f\u06cc\u0645 \u06a9\u0631\u062c<\/p>\n<p><i class=\"fas fa-phone\"><\/i> \u06f0\u06f2\u06f1\u2011\u06f4\u06f1\u06f4\u06f5\u06f7\u06f7\u06f1\u06f4<\/p>\n<p><i class=\"fas fa-envelope\"><\/i> info@tuca-co.com<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"footer-col\">\n<h3>\u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc<\/h3>\n<div class=\"social-links\">\n <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a><br \/>\n <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a><br \/>\n <a href=\"#\"><i class=\"fab fa-telegram\"><\/i><\/a><br \/>\n <a href=\"#\"><i class=\"fab fa-whatsapp\"><\/i><\/a><br \/>\n <a href=\"#\"><i class=\"fab fa-aparat\"><\/i><\/a>\n <\/div>\n<div class=\"expertise-badge\">\n <i class=\"fas fa-cogs\"><\/i> \u062a\u062e\u0635\u0635 \u062f\u0631 \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u062f\u0648\u0627\u0631 \u0635\u0646\u0639\u062a\u06cc \u2013 \u062a\u0648\u0631\u0628\u06cc\u0646\u060c \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0648 \u067e\u0645\u067e\n <\/div>\n<\/p><\/div>\n<p> <\/p>\n<div class=\"footer-col\">\n<div class=\"footer-logo\">\n <span>TUCA<\/span>\n <\/div>\n<ul class=\"footer-links\" style=\"margin-top: 1rem;\">\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0641\u0631\u0635\u062a\u200c\u0647\u0627\u06cc \u0634\u063a\u0644\u06cc<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0645\u0642\u0627\u0644\u0627\u062a \u062a\u062e\u0635\u0635\u06cc<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u0646\u0645\u0627\u06cc\u0646\u062f\u06af\u06cc\u200c\u0647\u0627<\/a><\/li>\n<li><a href=\"#\"><i class=\"fas fa-angle-left\"><\/i> \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062e\u062f\u0645\u0627\u062a<\/a><\/li>\n<\/ul><\/div>\n<\/p><\/div>\n<div class=\"copyright\">\n <span>\u00a9 \u06f1\u06f4\u06f0\u06f4 \u0634\u0631\u06a9\u062a \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 \u2014 \u062a\u0645\u0627\u0645\u06cc \u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a.<\/span><br \/>\n <span class=\"heart\"><br \/>\n <i class=\"fas fa-heart\"><\/i> <a href=\"#\">TUCA.CO<\/a><br \/>\n <\/span>\n <\/div>\n<\/p><\/div>\n<\/footer>\n<p><\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u0633\u0644\u0627\u06cc\u062f\u0631 | \u062a\u0648\u0631\u0628\u06cc\u0646 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u0622\u0633\u06cc\u0627 \u2630 \u0645\u0646\u0648 \u062e\u0627\u0646\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0627\u06a9\u0633\u062a\u0631\u0648\u062f\u0631 \u0642\u0637\u0639\u0627\u062a \u06cc\u062f\u06a9\u06cc \u062a\u0648\u0631\u0628\u0648\u0627\u06a9\u0633\u067e\u0646\u062f\u0631 \u062a\u0648\u0631\u0628\u06cc\u0646 \u06af\u0627\u0632 \u062a\u0648\u0631\u0628\u06cc\u0646 \u0628\u062e\u0627\u0631 \u06a9\u0645\u067e\u0631\u0633\u0648\u0631 \u067e\u0645\u067e \u062e\u062f\u0645\u0627\u062a \u062a\u0639\u0645\u06cc\u0631 \u0648 \u0628\u0627\u0632\u0633\u0627\u0632\u06cc \u0645\u0647\u0646\u062f\u0633\u06cc \u0645\u0639\u06a9\u0648\u0633 \u062e\u062f\u0645\u0627\u062a \u062f\u0631 \u0633\u0627\u06cc\u062a \u062a\u0627\u0645\u06cc\u0646 \u0648 \u0628\u0627\u0632\u0631\u06af\u0627\u0646\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062c\u0627\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u062e\u0627\u062a\u0645\u0647 \u06cc\u0627\u0641\u062a\u0647 \u0645\u0639\u0631\u0641\u06cc \u0634\u0631\u06a9\u062a \u0686\u0627\u0631\u062a \u0633\u0627\u0632\u0645\u0627\u0646\u06cc \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u06a9\u0627\u0631\u06cc HSE \u06a9\u0627\u062a\u0627\u0644\u0648\u06af \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u062a\u062d\u0642\u06cc\u0642 \u0648 \u062a\u0648\u0633\u0639\u0647 \u067e\u0627\u06cc\u0634 \u0648 […]<\/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-283","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/pages\/283","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/comments?post=283"}],"version-history":[{"count":6,"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/pages\/283\/revisions"}],"predecessor-version":[{"id":528,"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/pages\/283\/revisions\/528"}],"wp:attachment":[{"href":"https:\/\/tuca-co.ir\/index.php\/wp-json\/wp\/v2\/media?parent=283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}