{"id":12,"date":"2026-06-16T00:19:12","date_gmt":"2026-06-15T20:49:12","guid":{"rendered":"http:\/\/chamaneh.ir\/?page_id=12"},"modified":"2026-06-16T01:39:18","modified_gmt":"2026-06-15T22:09:18","slug":"elementor-12","status":"publish","type":"page","link":"https:\/\/chamaneh.ir\/","title":{"rendered":""},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n \r\n \r\n \u0627\u0633\u062a\u0648\u062f\u06cc\u0648 \u0686\u0645\u0627\u0646\u0647 | \u0639\u06a9\u0627\u0633\u06cc \u0635\u0646\u0639\u062a\u06cc \u0648 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@100..900&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <style>\r\n \/* =========================================\r\n 1. THEME VARIABLES & ISOLATED RESET\r\n ========================================= *\/\r\n :root {\r\n --bg-base: 26, 29, 32; \r\n --bg-dark: 18, 20, 22; \r\n --bg-card: 34, 38, 42; \r\n --border: 45, 50, 56; \r\n --text: 233, 236, 239; \r\n --text-muted: 142, 149, 158; \r\n --brand-turquoise: #00A896;\r\n --brand-turquoise-hover: #008B7B;\r\n --brand-yellow: #FFCD00;\r\n --brand-yellow-hover: #E5B800;\r\n }\r\n\r\n html.light-mode {\r\n --bg-base: 243, 244, 246; \r\n --bg-dark: 229, 231, 235; \r\n --bg-card: 255, 255, 255; \r\n --border: 209, 213, 219; \r\n --text: 17, 24, 39; \r\n --text-muted: 75, 85, 99; \r\n }\r\n\r\n \/* Scope everything inside #ch-studio-wrapper to prevent conflicts *\/\r\n #ch-studio-wrapper {\r\n font-family: 'Vazirmatn', sans-serif;\r\n background-color: rgb(var(--bg-base));\r\n color: rgb(var(--text));\r\n overflow-x: hidden;\r\n line-height: 1.6;\r\n text-align: right;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n #ch-studio-wrapper *, \r\n #ch-studio-wrapper *::before, \r\n #ch-studio-wrapper *::after {\r\n box-sizing: border-box;\r\n transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;\r\n }\r\n\r\n #ch-studio-wrapper a { text-decoration: none; color: inherit; }\r\n #ch-studio-wrapper ul { list-style: none; padding: 0; margin: 0; }\r\n #ch-studio-wrapper button, \r\n #ch-studio-wrapper input, \r\n #ch-studio-wrapper select, \r\n #ch-studio-wrapper textarea {\r\n font-family: inherit;\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n \/* Typography Utilities *\/\r\n .ch-text-center { text-align: center; }\r\n .ch-text-right { text-align: right; }\r\n .ch-font-black { font-weight: 900; }\r\n .ch-font-bold { font-weight: 700; }\r\n .ch-text-muted { color: rgb(var(--text-muted)); }\r\n .ch-text-light { color: rgb(var(--text)); }\r\n .ch-text-yellow { color: var(--brand-yellow); }\r\n .ch-text-turquoise { color: var(--brand-turquoise); }\r\n .ch-gradient-text {\r\n background: linear-gradient(to right, var(--brand-turquoise), rgb(var(--text)), var(--brand-yellow));\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n\r\n \/* Layout Utilities *\/\r\n .ch-container {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n padding: 0 1rem;\r\n position: relative;\r\n z-index: 10;\r\n }\r\n .ch-section { padding: 5rem 0; border-top: 1px solid rgb(var(--border)); }\r\n .ch-bg-dark { background-color: rgb(var(--bg-dark)); }\r\n .ch-bg-base { background-color: rgb(var(--bg-base)); }\r\n \r\n \/* Flex & Grid *\/\r\n .ch-flex { display: flex; }\r\n .ch-flex-col { flex-direction: column; }\r\n .ch-items-center { align-items: center; }\r\n .ch-justify-between { justify-content: space-between; }\r\n .ch-justify-center { justify-content: center; }\r\n .ch-gap-2 { gap: 0.5rem; }\r\n .ch-gap-4 { gap: 1rem; }\r\n .ch-gap-8 { gap: 2rem; }\r\n\r\n .ch-grid { display: grid; gap: 2rem; }\r\n @media (min-width: 768px) {\r\n .ch-grid-md-2 { grid-template-columns: repeat(2, 1fr); }\r\n .ch-grid-md-3 { grid-template-columns: repeat(3, 1fr); }\r\n .ch-grid-md-4 { grid-template-columns: repeat(4, 1fr); }\r\n }\r\n @media (min-width: 1024px) {\r\n .ch-grid-lg-12 { grid-template-columns: repeat(12, 1fr); }\r\n .ch-col-lg-7 { grid-column: span 7; }\r\n .ch-col-lg-5 { grid-column: span 5; }\r\n }\r\n\r\n \/* =========================================\r\n 2. COMPONENTS\r\n ========================================= *\/\r\n \r\n \/* Header & Nav *\/\r\n .ch-header {\r\n position: fixed; top: 0; left: 0; width: 100%; z-index: 50;\r\n background-color: rgba(var(--bg-dark), 0.9);\r\n backdrop-filter: blur(10px);\r\n border-bottom: 1px solid rgb(var(--border));\r\n height: 5rem;\r\n display: flex; align-items: center;\r\n }\r\n .ch-nav-links { display: none; gap: 2rem; font-size: 0.875rem; font-weight: 500; }\r\n .ch-nav-links a { color: rgb(var(--text-muted)); }\r\n .ch-nav-links a:hover { color: var(--brand-turquoise); }\r\n @media (min-width: 768px) { .ch-nav-links { display: flex; } }\r\n \r\n \/* Buttons *\/\r\n .ch-btn {\r\n display: inline-flex; align-items: center; justify-content: center;\r\n padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-weight: 700; cursor: pointer;\r\n gap: 0.5rem; transition: all 0.3s;\r\n }\r\n .ch-btn-yellow {\r\n background-color: var(--brand-yellow); color: #121416;\r\n box-shadow: 0 4px 15px rgba(255, 205, 0, 0.15);\r\n }\r\n .ch-btn-yellow:hover { background-color: var(--brand-yellow-hover); transform: translateY(-2px); }\r\n .ch-btn-outline {\r\n background: transparent; border: 1px solid rgb(var(--border)); color: rgb(var(--text));\r\n }\r\n .ch-btn-outline:hover { border-color: var(--brand-turquoise); color: var(--brand-turquoise); }\r\n .ch-icon-btn {\r\n padding: 0.6rem; border-radius: 0.5rem; background: rgb(var(--bg-card));\r\n border: 1px solid rgb(var(--border)); color: var(--brand-yellow); cursor: pointer;\r\n }\r\n\r\n \/* Badges & Icons *\/\r\n .ch-icon-box {\r\n width: 3rem; height: 3rem; border-radius: 0.75rem;\r\n display: flex; align-items: center; justify-content: center; font-size: 1.25rem;\r\n }\r\n .ch-bg-turquoise-light { background-color: rgba(0, 168, 150, 0.1); color: var(--brand-turquoise); }\r\n .ch-bg-yellow-light { background-color: rgba(255, 205, 0, 0.1); color: var(--brand-yellow); }\r\n .ch-badge {\r\n display: inline-flex; align-items: center; gap: 0.5rem;\r\n padding: 0.25rem 0.75rem; border-radius: 99px; font-size: 0.75rem; font-weight: 700;\r\n background: rgb(var(--bg-base)); border: 1px solid rgb(var(--border));\r\n }\r\n\r\n \/* Cards *\/\r\n .ch-card {\r\n background-color: rgb(var(--bg-card)); border: 1px solid rgb(var(--border));\r\n padding: 2rem; border-radius: 1rem; position: relative; overflow: hidden;\r\n }\r\n .ch-card:hover { border-color: rgba(0, 168, 150, 0.5); }\r\n \r\n \/* Section Titles *\/\r\n .ch-section-title { text-align: center; max-width: 48rem; margin: 0 auto 4rem auto; }\r\n .ch-section-title h2 { font-size: 2rem; font-weight: 900; margin: 0.5rem 0; }\r\n .ch-divider { width: 4rem; height: 4px; border-radius: 2px; margin: 1rem auto; }\r\n .ch-divider.turquoise { background-color: var(--brand-turquoise); }\r\n .ch-divider.yellow { background-color: var(--brand-yellow); }\r\n\r\n \/* Tabs *\/\r\n .ch-tab-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 3rem; }\r\n .ch-tab-btn {\r\n padding: 0.75rem 1.25rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 700;\r\n background: rgb(var(--bg-card)); border: 1px solid rgb(var(--border)); color: rgb(var(--text-muted));\r\n }\r\n .ch-tab-btn.active {\r\n background: var(--brand-turquoise); color: #fff; border-color: var(--brand-turquoise);\r\n }\r\n .ch-tab-content { display: none; }\r\n .ch-tab-content.active { display: grid; }\r\n .ch-tab-img { width: 100%; height: 20rem; object-fit: cover; border-radius: 1rem; }\r\n\r\n \/* Portfolio Items *\/\r\n .ch-portfolio-item { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 4\/3; }\r\n .ch-portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }\r\n .ch-portfolio-overlay {\r\n position: absolute; inset: 0; background: linear-gradient(to top, rgba(18,20,22,0.9), transparent);\r\n opacity: 0; transition: opacity 0.3s; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;\r\n }\r\n .ch-portfolio-item:hover img { transform: scale(1.05); }\r\n .ch-portfolio-item:hover .ch-portfolio-overlay { opacity: 1; }\r\n\r\n \/* Before\/After Slider *\/\r\n .ch-slider-container { position: relative; overflow: hidden; user-select: none; border-radius: 1rem; aspect-ratio: 16\/10; }\r\n .ch-slider-img { display: block; width: 100%; height: 100%; object-fit: cover; }\r\n .ch-resize-img { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; }\r\n .ch-handle {\r\n position: absolute; top: 0; left: 50%; width: 4px; height: 100%;\r\n background: var(--brand-yellow); cursor: ew-resize; z-index: 10;\r\n }\r\n .ch-handle-btn {\r\n position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n width: 40px; height: 40px; background: var(--brand-yellow); color: #121416;\r\n border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none;\r\n }\r\n\r\n \/* Forms & Accordions *\/\r\n .ch-input {\r\n width: 100%; padding: 0.75rem 1rem; border-radius: 0.5rem;\r\n background: rgb(var(--bg-base)); border: 1px solid rgb(var(--border)); color: rgb(var(--text));\r\n }\r\n .ch-input:focus { border-color: var(--brand-turquoise); }\r\n \r\n .ch-accordion {\r\n background: rgb(var(--bg-base)); border: 1px solid rgb(var(--border)); border-radius: 0.75rem; margin-bottom: 1rem; overflow: hidden;\r\n }\r\n .ch-accordion-btn {\r\n width: 100%; padding: 1.25rem; text-align: right; font-weight: 700; color: rgb(var(--text));\r\n display: flex; justify-content: space-between; align-items: center; background: transparent; cursor: pointer;\r\n }\r\n .ch-accordion-content {\r\n padding: 0 1.25rem 1.25rem; font-size: 0.875rem; color: rgb(var(--text-muted)); display: none; border-top: 1px solid rgb(var(--border)); margin-top: 0.5rem; padding-top: 1rem;\r\n }\r\n\r\n \/* Utility Elements *\/\r\n .ch-mobile-menu {\r\n display: none; background: rgb(var(--bg-dark)); padding: 1rem; border-bottom: 1px solid rgb(var(--border));\r\n }\r\n .ch-mobile-menu.active { display: block; }\r\n .ch-blob-1, .ch-blob-2 { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.5; z-index: 0; pointer-events: none;}\r\n .ch-blob-1 { top: -10rem; left: -10rem; width: 24rem; height: 24rem; background: rgba(0, 168, 150, 0.15); }\r\n .ch-blob-2 { bottom: 0; right: 0; width: 20rem; height: 20rem; background: rgba(255, 205, 0, 0.1); }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"ch-studio-wrapper\">\r\n\r\n <header class=\"ch-header\">\r\n <div class=\"ch-container ch-flex ch-items-center ch-justify-between\" style=\"width: 100%;\">\r\n <div class=\"ch-flex ch-items-center ch-gap-4\">\r\n <div class=\"ch-icon-box\" style=\"background: linear-gradient(to right, var(--brand-turquoise), var(--brand-turquoise-hover)); color: white; box-shadow: 0 4px 10px rgba(0,168,150,0.2);\">\r\n <i class=\"fa-solid fa-camera-retro\"><\/i>\r\n <\/div>\r\n <div class=\"ch-flex ch-flex-col\">\r\n <span class=\"ch-font-black ch-gradient-text\" style=\"font-size: 1.5rem;\">\u0686\u0645\u0627\u0646\u0647<\/span>\r\n <span class=\"ch-text-yellow ch-font-bold\" style=\"font-size: 0.6rem; letter-spacing: 2px;\">CHAMANEH STUDIO<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <nav class=\"ch-nav-links\">\r\n <a href=\"#services\">\u062e\u062f\u0645\u0627\u062a \u0645\u0627<\/a>\r\n <a href=\"#portfolio\">\u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627<\/a>\r\n <a href=\"#before-after\">\u0645\u0642\u0627\u06cc\u0633\u0647 \u0627\u062f\u06cc\u062a<\/a>\r\n <a href=\"#workflow\">\u0645\u0631\u0627\u062d\u0644 \u0647\u0645\u06a9\u0627\u0631\u06cc<\/a>\r\n <a href=\"#faq\">\u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/a>\r\n <\/nav>\r\n\r\n <div class=\"ch-flex ch-items-center ch-gap-2\">\r\n <button onclick=\"chToggleTheme()\" class=\"ch-icon-btn\" id=\"ch-theme-btn\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u062a\u0645\">\r\n <i class=\"fa-solid fa-sun\"><\/i>\r\n <\/button>\r\n <a href=\"#contact\" class=\"ch-btn ch-btn-yellow\" style=\"display: none;\">\r\n <i class=\"fa-solid fa-headset\"><\/i> \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646\r\n <\/a>\r\n <button onclick=\"chToggleMobileMenu()\" class=\"ch-icon-btn\" style=\"border: none; background: transparent; color: rgb(var(--text));\">\r\n <i class=\"fa-solid fa-bars-staggered\"><\/i>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"ch-mobile-menu\" class=\"ch-mobile-menu\" style=\"position: absolute; top: 100%; width: 100%;\">\r\n <a href=\"#services\" style=\"display: block; padding: 0.5rem 0; color: rgb(var(--text-muted));\">\u062e\u062f\u0645\u0627\u062a \u0645\u0627<\/a>\r\n <a href=\"#portfolio\" style=\"display: block; padding: 0.5rem 0; color: rgb(var(--text-muted));\">\u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627<\/a>\r\n <a href=\"#faq\" style=\"display: block; padding: 0.5rem 0; color: rgb(var(--text-muted));\">\u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/a>\r\n <\/div>\r\n <\/header>\r\n\r\n <section class=\"ch-section ch-bg-dark\" style=\"padding-top: 10rem; min-height: 100vh; display: flex; align-items: center; overflow: hidden; position: relative;\">\r\n <div class=\"ch-blob-1\"><\/div>\r\n <div class=\"ch-blob-2\"><\/div>\r\n \r\n <div class=\"ch-container ch-grid ch-grid-lg-12 ch-items-center\">\r\n <div class=\"ch-col-lg-7 ch-text-center ch-flex ch-flex-col ch-gap-8\" style=\"text-align: right;\">\r\n <div class=\"ch-badge ch-text-yellow\">\r\n <span style=\"display: inline-block; width: 8px; height: 8px; background: var(--brand-yellow); border-radius: 50%;\"><\/span>\r\n \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0628\u0631\u062a\u0631 \u0635\u0646\u0639\u062a\u06cc \u0648 \u062e\u0637\u0648\u0637 \u062a\u0648\u0644\u06cc\u062f \u06f2\u06f0\u06f2\u06f6\r\n <\/div>\r\n <h1 class=\"ch-font-black\" style=\"font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.2;\">\r\n \u062a\u0635\u0648\u06cc\u0631\u060c \u0632\u0628\u0627\u0646 \u062a\u062c\u0627\u0631\u062a \u0634\u0645\u0627\u0633\u062a\u061b <br>\r\n <span class=\"ch-gradient-text\">\u0639\u06a9\u0627\u0633\u06cc \u0635\u0646\u0639\u062a\u06cc \u0686\u0645\u0627\u0646\u0647<\/span>\r\n <\/h1>\r\n <p class=\"ch-text-muted\" style=\"font-size: 1.125rem; max-width: 600px;\">\r\n \u0627\u0632 \u0639\u0638\u0645\u062a \u06a9\u0648\u0631\u0647\u200c\u0647\u0627\u06cc \u0630\u0648\u0628 \u0648 \u062e\u0637\u0648\u0637 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0627\u0631\u062e\u0627\u0646\u062c\u0627\u062a \u0645\u0627\u062f\u0631 \u062a\u0627 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u06cc\u06a9\u0631\u0648\u0645\u062a\u0631\u06cc \u0642\u0637\u0639\u0627\u062a \u0635\u0646\u0639\u062a\u06cc\u061b \u0645\u0627 \u062a\u062e\u0635\u0635 \u0648 \u0627\u0639\u062a\u0628\u0627\u0631 \u0645\u062a\u0645\u0627\u06cc\u0632 \u0628\u0631\u0646\u062f \u0634\u0645\u0627 \u0631\u0627 \u0645\u0633\u062a\u0646\u062f \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\r\n <\/p>\r\n <div class=\"ch-flex ch-gap-4\" style=\"flex-wrap: wrap;\">\r\n <a href=\"#contact\" class=\"ch-btn ch-btn-yellow\">\u062b\u0628\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a <i class=\"fa-solid fa-arrow-left\"><\/i><\/a>\r\n <a href=\"#portfolio\" class=\"ch-btn ch-btn-outline\">\u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 <i class=\"fa-solid fa-images ch-text-turquoise\"><\/i><\/a>\r\n <\/div>\r\n \r\n <div class=\"ch-flex ch-gap-8\" style=\"border-top: 1px solid rgb(var(--border)); padding-top: 2rem; max-width: 400px;\">\r\n <div><div class=\"ch-font-black ch-text-yellow\" style=\"font-size: 2rem;\">+\u06f1\u06f5\u06f0<\/div><div class=\"ch-text-muted\" style=\"font-size: 0.75rem;\">\u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div><\/div>\r\n <div><div class=\"ch-font-black ch-text-light\" style=\"font-size: 2rem;\">+\u06f4\u06f0<\/div><div class=\"ch-text-muted\" style=\"font-size: 0.75rem;\">\u06a9\u0627\u0631\u062e\u0627\u0646\u062c\u0627\u062a<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ch-col-lg-5\" style=\"position: relative;\">\r\n <div class=\"ch-card\" style=\"padding: 1rem;\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=800\" alt=\"\u0639\u06a9\u0627\u0633\u06cc \u062e\u0637 \u062a\u0648\u0644\u06cc\u062f\" style=\"border-radius: 0.75rem; width: 100%;\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"ch-section ch-bg-base\">\r\n <div class=\"ch-container\">\r\n <div class=\"ch-section-title\">\r\n <span class=\"ch-font-black ch-text-yellow\" style=\"font-size: 0.875rem;\">\u0686\u0631\u0627 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648 \u0686\u0645\u0627\u0646\u0647\u061f<\/span>\r\n <h2 class=\"ch-text-light\">\u062a\u0636\u0645\u06cc\u0646 \u0628\u0627\u0644\u0627\u062a\u0631\u06cc\u0646 \u06a9\u06cc\u0641\u06cc\u062a \u062f\u0631 \u0645\u0627\u0631\u06a9\u062a B2B<\/h2>\r\n <div class=\"ch-divider turquoise\"><\/div>\r\n <p class=\"ch-text-muted\">\u062a\u0635\u0648\u06cc\u0631\u06cc \u067e\u0627\u06cc\u062f\u0627\u0631\u060c \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0644\u0627\u06cc\u0642 \u062a\u06a9\u06cc\u0647 \u0631\u0627 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0648 \u0631\u0642\u0628\u0627\u06cc\u062a\u0627\u0646 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\r\n <\/div>\r\n\r\n <div class=\"ch-grid ch-grid-md-3\">\r\n <div class=\"ch-card\">\r\n <div class=\"ch-icon-box ch-bg-turquoise-light\" style=\"margin-bottom: 1.5rem;\"><i class=\"fa-solid fa-chart-line\"><\/i><\/div>\r\n <h3 class=\"ch-font-bold ch-text-light\" style=\"margin-bottom: 1rem; font-size: 1.25rem;\">\u0627\u0641\u0632\u0627\u06cc\u0634 \u0641\u0631\u0648\u0634 \u0648 \u0627\u0639\u062a\u0628\u0627\u0631 \u0628\u0631\u0646\u062f<\/h3>\r\n <p class=\"ch-text-muted\" style=\"font-size: 0.875rem;\">\u062a\u0635\u0627\u0648\u06cc\u0631 \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0628\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0631\u0632\u0634 \u062f\u0631\u06a9\u200c\u0634\u062f\u0647 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0634\u0645\u0627\u060c \u0627\u0639\u062a\u0645\u0627\u062f \u062e\u0631\u06cc\u062f\u0627\u0631\u0627\u0646 \u06a9\u0644\u0627\u0646 \u0631\u0627 \u062c\u0644\u0628 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f.<\/p>\r\n <\/div>\r\n <div class=\"ch-card\">\r\n <div class=\"ch-icon-box ch-bg-yellow-light\" style=\"margin-bottom: 1.5rem;\"><i class=\"fa-solid fa-shield-halved\"><\/i><\/div>\r\n <h3 class=\"ch-font-bold ch-text-light\" style=\"margin-bottom: 1rem; font-size: 1.25rem;\">\u0627\u0631\u0627\u0626\u0647 \u062f\u0631 \u06a9\u0644\u0627\u0633 \u062c\u0647\u0627\u0646\u06cc<\/h3>\r\n <p class=\"ch-text-muted\" style=\"font-size: 0.875rem;\">\u062e\u0631\u0648\u062c\u06cc\u200c\u0647\u0627\u06cc \u0645\u0627 \u06a9\u0627\u0645\u0644\u0627\u064b \u0645\u0646\u0637\u0628\u0642 \u0628\u0631 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u0635\u0627\u062f\u0631\u0627\u062a\u06cc \u0628\u0648\u062f\u0647 \u0648 \u0645\u0646\u0627\u0633\u0628 \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0628\u06cc\u0646\u200c\u0627\u0644\u0645\u0644\u0644\u06cc \u0647\u0633\u062a\u0646\u062f.<\/p>\r\n <\/div>\r\n <div class=\"ch-card\">\r\n <div class=\"ch-icon-box ch-bg-turquoise-light\" style=\"margin-bottom: 1.5rem;\"><i class=\"fa-solid fa-layer-group\"><\/i><\/div>\r\n <h3 class=\"ch-font-bold ch-text-light\" style=\"margin-bottom: 1rem; font-size: 1.25rem;\">\u067e\u0648\u0634\u0634 \u0647\u0645\u0647\u200c\u062c\u0627\u0646\u0628\u0647 \u067e\u0631\u0648\u0698\u0647<\/h3>\r\n <p class=\"ch-text-muted\" style=\"font-size: 0.875rem;\">\u0639\u06a9\u0627\u0633\u06cc \u0645\u0627\u0634\u06cc\u0646\u200c\u0622\u0644\u0627\u062a\u060c \u0645\u062d\u0635\u0648\u0644\u0627\u062a\u060c \u0641\u0636\u0627\u0647\u0627\u06cc \u0628\u06cc\u0631\u0648\u0646\u06cc \u0628\u0627 \u0647\u0644\u06cc\u200c\u0634\u0627\u062a \u0648 \u067e\u0631\u062a\u0631\u0647 \u0645\u062f\u06cc\u0631\u0627\u0646.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"services\" class=\"ch-section ch-bg-dark\">\r\n <div class=\"ch-container\">\r\n <div class=\"ch-section-title\">\r\n <span class=\"ch-font-black ch-text-turquoise\" style=\"font-size: 0.875rem;\">\u0632\u06cc\u0631\u0645\u062c\u0645\u0648\u0639\u0647\u200c\u0647\u0627\u06cc \u062a\u062e\u0635\u0635\u06cc<\/span>\r\n <h2 class=\"ch-text-light\">\u0648\u06cc\u062a\u0631\u06cc\u0646 \u062e\u062f\u0645\u0627\u062a \u062a\u062e\u0635\u0635\u06cc \u0645\u0627<\/h2>\r\n <div class=\"ch-divider yellow\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"ch-tab-btns\">\r\n <button class=\"ch-tab-btn active\" onclick=\"chSwitchTab(event, 'tab1')\"><i class=\"fa-solid fa-industry\"><\/i> \u062e\u0637 \u062a\u0648\u0644\u06cc\u062f<\/button>\r\n <button class=\"ch-tab-btn\" onclick=\"chSwitchTab(event, 'tab2')\"><i class=\"fa-solid fa-box-open\"><\/i> \u0645\u062d\u0635\u0648\u0644<\/button>\r\n <button class=\"ch-tab-btn\" onclick=\"chSwitchTab(event, 'tab3')\"><i class=\"fa-solid fa-helicopter\"><\/i> \u0647\u0648\u0627\u06cc\u06cc<\/button>\r\n <\/div>\r\n\r\n <div class=\"ch-card\" style=\"padding: 3rem;\">\r\n <div id=\"tab1\" class=\"ch-tab-content ch-grid ch-grid-lg-12 ch-items-center active\">\r\n <div class=\"ch-col-lg-7 ch-flex ch-flex-col ch-gap-4\">\r\n <div class=\"ch-icon-box ch-bg-turquoise-light\"><i class=\"fa-solid fa-industry\"><\/i><\/div>\r\n <h3 class=\"ch-font-bold ch-text-light\" style=\"font-size: 1.5rem;\">\u0639\u06a9\u0627\u0633\u06cc \u0627\u0632 \u062e\u0637 \u062a\u0648\u0644\u06cc\u062f \u0648 \u06a9\u0627\u0631\u062e\u0627\u0646\u062c\u0627\u062a<\/h3>\r\n <p class=\"ch-text-muted\">\u0645\u0627 \u0639\u0638\u0645\u062a \u0641\u0631\u0622\u06cc\u0646\u062f \u062a\u0648\u0644\u06cc\u062f\u060c \u062f\u0642\u062a \u062a\u062c\u0647\u06cc\u0632\u0627\u062a \u0648 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc\u060c \u0641\u0648\u0644\u0627\u062f \u0648 \u062e\u0648\u062f\u0631\u0648\u0633\u0627\u0632\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u062a\u0635\u0648\u06cc\u0631 \u0645\u06cc\u200c\u06a9\u0634\u06cc\u0645.<\/p>\r\n <\/div>\r\n <div class=\"ch-col-lg-5\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1518640467707-6811f4a6ab73?auto=format&fit=crop&q=80&w=600\" class=\"ch-tab-img\" alt=\"\u06a9\u0627\u0631\u062e\u0627\u0646\u0647\">\r\n <\/div>\r\n <\/div>\r\n <div id=\"tab2\" class=\"ch-tab-content ch-grid ch-grid-lg-12 ch-items-center\">\r\n <div class=\"ch-col-lg-7 ch-flex ch-flex-col ch-gap-4\">\r\n <div class=\"ch-icon-box ch-bg-turquoise-light\"><i class=\"fa-solid fa-box-open\"><\/i><\/div>\r\n <h3 class=\"ch-font-bold ch-text-light\" style=\"font-size: 1.5rem;\">\u0639\u06a9\u0627\u0633\u06cc \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc \u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/h3>\r\n <p class=\"ch-text-muted\">\u0646\u0645\u0627\u06cc\u0634 \u062f\u0642\u06cc\u0642 \u0648 \u0686\u0634\u0645\u200c\u06af\u06cc\u0631 \u06a9\u0627\u0644\u0627 \u0628\u0627 \u0686\u06cc\u062f\u0645\u0627\u0646 \u062e\u0644\u0627\u0642\u0627\u0646\u0647 \u0627\u0633\u062a\u0648\u062f\u06cc\u0648\u06cc\u06cc \u0628\u0627 \u06a9\u0646\u062a\u0631\u0644 \u0631\u0641\u0644\u06a9\u0633 \u0645\u062a\u0631\u06cc\u0627\u0644\u200c\u0647\u0627\u06cc \u0633\u062e\u062a \u0645\u0627\u0646\u0646\u062f \u0634\u06cc\u0634\u0647.<\/p>\r\n <\/div>\r\n <div class=\"ch-col-lg-5\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1542291026-7eec264c27ff?auto=format&fit=crop&q=80&w=600\" class=\"ch-tab-img\" alt=\"\u0645\u062d\u0635\u0648\u0644\">\r\n <\/div>\r\n <\/div>\r\n <div id=\"tab3\" class=\"ch-tab-content ch-grid ch-grid-lg-12 ch-items-center\">\r\n <div class=\"ch-col-lg-7 ch-flex ch-flex-col ch-gap-4\">\r\n <div class=\"ch-icon-box ch-bg-turquoise-light\"><i class=\"fa-solid fa-helicopter\"><\/i><\/div>\r\n <h3 class=\"ch-font-bold ch-text-light\" style=\"font-size: 1.5rem;\">\u062a\u0635\u0648\u06cc\u0631\u0628\u0631\u062f\u0627\u0631\u06cc \u0647\u0648\u0627\u06cc\u06cc \u0647\u0644\u06cc\u200c\u0634\u0627\u062a<\/h3>\r\n <p class=\"ch-text-muted\">\u0646\u0645\u0627\u06cc\u0634 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0632\u0631\u06af \u067e\u062a\u0631\u0648\u0634\u06cc\u0645\u06cc\u200c\u0647\u0627\u060c \u0633\u0648\u0644\u0647\u200c\u0647\u0627\u060c \u0627\u0633\u06a9\u0644\u0647\u200c\u0647\u0627 \u0648 \u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0645\u0639\u062f\u0646\u06cc \u06a9\u0644\u0627\u0646 \u0627\u0632 \u0632\u0627\u0648\u06cc\u0647 \u0622\u0633\u0645\u0627\u0646.<\/p>\r\n <\/div>\r\n <div class=\"ch-col-lg-5\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1473968512647-3e447244af8f?auto=format&fit=crop&q=80&w=600\" class=\"ch-tab-img\" alt=\"\u0647\u0648\u0627\u06cc\u06cc\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"portfolio\" class=\"ch-section ch-bg-base\">\r\n <div class=\"ch-container\">\r\n <div class=\"ch-section-title\">\r\n <span class=\"ch-font-black ch-text-yellow\" style=\"font-size: 0.875rem;\">\u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627<\/span>\r\n <h2 class=\"ch-text-light\">\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0628\u0631\u062c\u0633\u062a\u0647 \u0627\u062e\u06cc\u0631 \u0645\u0627<\/h2>\r\n <div class=\"ch-divider turquoise\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"ch-grid ch-grid-md-2 ch-grid-lg-3\">\r\n <div class=\"ch-portfolio-item\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1537462715879-360eeb61a0bc?auto=format&fit=crop&q=80&w=600\" alt=\"\u0635\u0646\u0639\u062a\u06cc\">\r\n <div class=\"ch-portfolio-overlay\">\r\n <span class=\"ch-text-yellow ch-font-bold\" style=\"font-size: 0.75rem;\">\u0635\u0646\u0639\u062a\u06cc<\/span>\r\n <h4 class=\"ch-text-light ch-font-bold\" style=\"font-size: 1.125rem;\">\u062a\u0631\u0627\u0634\u06a9\u0627\u0631\u06cc \u0642\u0637\u0639\u0627\u062a \u062f\u0642\u06cc\u0642<\/h4>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-portfolio-item\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=600\" alt=\"\u0645\u062d\u0635\u0648\u0644\">\r\n <div class=\"ch-portfolio-overlay\">\r\n <span class=\"ch-text-turquoise ch-font-bold\" style=\"font-size: 0.75rem;\">\u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc<\/span>\r\n <h4 class=\"ch-text-light ch-font-bold\" style=\"font-size: 1.125rem;\">\u0639\u06a9\u0627\u0633\u06cc \u0633\u0627\u0639\u062a \u0647\u0648\u0634\u0645\u0646\u062f<\/h4>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ch-portfolio-item\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=600\" alt=\"\u0645\u0639\u0645\u0627\u0631\u06cc\">\r\n <div class=\"ch-portfolio-overlay\">\r\n <span class=\"ch-text-yellow ch-font-bold\" style=\"font-size: 0.75rem;\">\u0645\u0639\u0645\u0627\u0631\u06cc<\/span>\r\n <h4 class=\"ch-text-light ch-font-bold\" style=\"font-size: 1.125rem;\">\u0628\u0631\u062c\u200c\u0647\u0627\u06cc \u062a\u062c\u0627\u0631\u06cc \u0634\u06cc\u0634\u0647\u200c\u0627\u06cc<\/h4>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"before-after\" class=\"ch-section ch-bg-dark\">\r\n <div class=\"ch-container ch-grid ch-grid-lg-12 ch-items-center\">\r\n <div class=\"ch-col-lg-5 ch-flex ch-flex-col ch-gap-4\">\r\n <h2 class=\"ch-text-light ch-font-black\" style=\"font-size: 2rem;\">\u062a\u0641\u0627\u0648\u062a \u0631\u0648\u062a\u0648\u0634 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f<\/h2>\r\n <div class=\"ch-divider yellow\" style=\"margin: 0;\"><\/div>\r\n <p class=\"ch-text-muted\">\u0645\u062d\u06cc\u0637\u200c\u0647\u0627\u06cc \u0635\u0646\u0639\u062a\u06cc \u0633\u0631\u0634\u0627\u0631 \u0627\u0632 \u063a\u0628\u0627\u0631 \u0648 \u0628\u0627\u0632\u062a\u0627\u0628 \u0645\u0632\u0627\u062d\u0645 \u0647\u0633\u062a\u0646\u062f. \u0645\u0627 \u0628\u0627 \u0627\u062f\u06cc\u062a \u0638\u0631\u06cc\u0641 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644\u06cc\u060c \u0631\u0646\u06af \u06a9\u0627\u0644\u0627 \u0631\u0627 \u06a9\u0627\u0644\u06cc\u0628\u0631\u0647 \u06a9\u0631\u062f\u0647 \u0648 \u062c\u0644\u0648\u0647 \u0627\u0635\u0644\u06cc \u0622\u0646 \u0631\u0627 \u0622\u0634\u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\r\n <\/div>\r\n \r\n <div class=\"ch-col-lg-7\">\r\n <div class=\"ch-slider-container\" id=\"ch-slider\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=1200&sat=-40&contrast=80\" alt=\"\u0642\u0628\u0644\" class=\"ch-slider-img\">\r\n <div class=\"ch-resize-img\" id=\"ch-slider-resize\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&q=80&w=1200\" alt=\"\u0628\u0639\u062f\" style=\"position: absolute; top:0; left:0; width: 100%; height: 100%; object-fit: cover; max-width: none; min-width: 100%;\">\r\n <\/div>\r\n <div class=\"ch-handle\" id=\"ch-slider-handle\">\r\n <div class=\"ch-handle-btn\"><i class=\"fa-solid fa-arrows-left-right\"><\/i><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"faq\" class=\"ch-section ch-bg-base\">\r\n <div class=\"ch-container ch-grid ch-grid-lg-12\">\r\n <div class=\"ch-col-lg-6\">\r\n <h2 class=\"ch-text-light ch-font-black\" style=\"font-size: 1.5rem; margin-bottom: 2rem;\">\u0633\u0648\u0627\u0644\u0627\u062a \u0645\u062a\u062f\u0627\u0648\u0644<\/h2>\r\n <div class=\"ch-accordion\">\r\n <button class=\"ch-accordion-btn\" onclick=\"chToggleAcc('acc1')\">\r\n \u0622\u06cc\u0627 \u062f\u0631 \u0634\u0647\u0631\u0633\u062a\u0627\u0646\u200c\u0647\u0627 \u0647\u0645 \u0639\u06a9\u0627\u0633\u06cc \u062f\u0627\u0631\u06cc\u062f\u061f <i class=\"fa-solid fa-chevron-down ch-text-turquoise\"><\/i>\r\n <\/button>\r\n <div class=\"ch-accordion-content\" id=\"acc1\">\u0628\u0644\u0647\u060c \u062a\u06cc\u0645 \u0686\u0645\u0627\u0646\u0647 \u0622\u0645\u0627\u062f\u0647 \u0627\u0639\u0632\u0627\u0645 \u0628\u0647 \u062a\u0645\u0627\u0645 \u0634\u0647\u0631\u06a9\u200c\u0647\u0627\u06cc \u0635\u0646\u0639\u062a\u06cc \u0627\u06cc\u0631\u0627\u0646 \u0645\u06cc\u200c\u0628\u0627\u0634\u062f.<\/div>\r\n <\/div>\r\n <div class=\"ch-accordion\">\r\n <button class=\"ch-accordion-btn\" onclick=\"chToggleAcc('acc2')\">\r\n \u062a\u062d\u0648\u06cc\u0644 \u0641\u0627\u06cc\u0644\u200c\u0647\u0627 \u0686\u0642\u062f\u0631 \u0632\u0645\u0627\u0646 \u0645\u06cc\u200c\u0628\u0631\u062f\u061f <i class=\"fa-solid fa-chevron-down ch-text-turquoise\"><\/i>\r\n <\/button>\r\n <div class=\"ch-accordion-content\" id=\"acc2\">\u0645\u0639\u0645\u0648\u0644\u0627\u064b \u0628\u06cc\u0646 \u06f3 \u0627\u0644\u06cc \u06f7 \u0631\u0648\u0632 \u06a9\u0627\u0631\u06cc \u0628\u0633\u062a\u0647 \u0628\u0647 \u062d\u062c\u0645 \u067e\u0631\u0648\u0698\u0647 \u0632\u0645\u0627\u0646 \u0646\u06cc\u0627\u0632 \u0627\u0633\u062a.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ch-col-lg-6\" id=\"contact\">\r\n <div class=\"ch-card\">\r\n <h3 class=\"ch-text-light ch-font-bold\" style=\"margin-bottom: 1.5rem;\">\u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0645\u0634\u0627\u0648\u0631\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646<\/h3>\r\n <form onsubmit=\"event.preventDefault(); alert('\u0641\u0631\u0645 \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u062b\u0628\u062a \u0634\u062f!');\">\r\n <div class=\"ch-grid ch-grid-md-2\" style=\"gap: 1rem; margin-bottom: 1rem;\">\r\n <input type=\"text\" class=\"ch-input\" placeholder=\"\u0646\u0627\u0645 \u0634\u0645\u0627\" required>\r\n <input type=\"tel\" class=\"ch-input\" placeholder=\"\u0634\u0645\u0627\u0631\u0647 \u062a\u0645\u0627\u0633\" required>\r\n <\/div>\r\n <select class=\"ch-input\" style=\"margin-bottom: 1rem;\" required>\r\n <option value=\"\" disabled selected>\u0646\u0648\u0639 \u062e\u062f\u0645\u0627\u062a...<\/option>\r\n <option>\u0639\u06a9\u0627\u0633\u06cc \u06a9\u0627\u0631\u062e\u0627\u0646\u0647<\/option>\r\n <option>\u0639\u06a9\u0627\u0633\u06cc \u0645\u062d\u0635\u0648\u0644<\/option>\r\n <\/select>\r\n <textarea class=\"ch-input\" rows=\"3\" placeholder=\"\u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u067e\u0631\u0648\u0698\u0647\" style=\"margin-bottom: 1rem; resize: none;\"><\/textarea>\r\n <button type=\"submit\" class=\"ch-btn ch-btn-yellow\" style=\"width: 100%;\">\u0627\u0631\u0633\u0627\u0644 \u062f\u0631\u062e\u0648\u0627\u0633\u062a<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n \/\/ Theme Toggle Logic\r\n function chUpdateThemeUI(isLight) {\r\n const root = document.documentElement;\r\n const icon = document.querySelector('#ch-theme-btn i');\r\n if (isLight) {\r\n root.classList.add('light-mode');\r\n icon.className = 'fa-solid fa-moon';\r\n } else {\r\n root.classList.remove('light-mode');\r\n icon.className = 'fa-solid fa-sun';\r\n }\r\n }\r\n\r\n function chToggleTheme() {\r\n const isLight = document.documentElement.classList.contains('light-mode');\r\n localStorage.setItem('ch-theme', !isLight ? 'light' : 'dark');\r\n chUpdateThemeUI(!isLight);\r\n }\r\n\r\n window.addEventListener('DOMContentLoaded', () => {\r\n const savedTheme = localStorage.getItem('ch-theme');\r\n const prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;\r\n chUpdateThemeUI(savedTheme === 'light' || (!savedTheme && prefersLight));\r\n });\r\n\r\n \/\/ Mobile Menu\r\n function chToggleMobileMenu() {\r\n document.getElementById('ch-mobile-menu').classList.toggle('active');\r\n }\r\n\r\n \/\/ Tabs\r\n function chSwitchTab(e, tabId) {\r\n document.querySelectorAll('.ch-tab-content').forEach(el => el.classList.remove('active'));\r\n document.querySelectorAll('.ch-tab-btn').forEach(el => el.classList.remove('active'));\r\n document.getElementById(tabId).classList.add('active');\r\n e.currentTarget.classList.add('active');\r\n }\r\n\r\n \/\/ Accordion\r\n function chToggleAcc(id) {\r\n const el = document.getElementById(id);\r\n el.style.display = (el.style.display === 'block') ? 'none' : 'block';\r\n }\r\n\r\n \/\/ Slider Drag Logic\r\n const chSlider = document.getElementById('ch-slider');\r\n const chHandle = document.getElementById('ch-slider-handle');\r\n const chResize = document.getElementById('ch-slider-resize');\r\n let chDragging = false;\r\n\r\n function chSlide(x) {\r\n const rect = chSlider.getBoundingClientRect();\r\n let pos = ((x - rect.left) \/ rect.width) * 100;\r\n if (pos < 0) pos = 0; if (pos > 100) pos = 100;\r\n chHandle.style.left = `${pos}%`;\r\n chResize.style.width = `${pos}%`;\r\n \r\n \/\/ Fix image width inside resizer to stay proportionate\r\n chResize.querySelector('img').style.width = `${rect.width}px`;\r\n }\r\n\r\n chSlider.addEventListener('mousedown', (e) => { chDragging = true; chSlide(e.clientX); });\r\n window.addEventListener('mouseup', () => { chDragging = false; });\r\n window.addEventListener('mousemove', (e) => { if(chDragging) chSlide(e.clientX); });\r\n \r\n chSlider.addEventListener('touchstart', (e) => { chDragging = true; chSlide(e.touches[0].clientX); });\r\n window.addEventListener('touchend', () => { chDragging = false; });\r\n window.addEventListener('touchmove', (e) => { if(chDragging) chSlide(e.touches[0].clientX); });\r\n \r\n \/\/ Initial Slider Fix\r\n window.addEventListener('resize', () => {\r\n if(!chDragging) chSlide(chSlider.getBoundingClientRect().left + (chSlider.getBoundingClientRect().width\/2));\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\r\n```\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0633\u062a\u0648\u062f\u06cc\u0648 \u0686\u0645\u0627\u0646\u0647 | \u0639\u06a9\u0627\u0633\u06cc \u0635\u0646\u0639\u062a\u06cc \u0648 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0686\u0645\u0627\u0646\u0647 CHAMANEH STUDIO \u062e\u062f\u0645\u0627\u062a \u0645\u0627 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627 \u0645\u0642\u0627\u06cc\u0633\u0647 \u0627\u062f\u06cc\u062a \u0645\u0631\u0627\u062d\u0644 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0633\u0648\u0627\u0644\u0627\u062a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"disabled","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"disabled","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chamaneh.ir\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chamaneh.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chamaneh.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chamaneh.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chamaneh.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":12,"href":"https:\/\/chamaneh.ir\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":27,"href":"https:\/\/chamaneh.ir\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/27"}],"wp:attachment":[{"href":"https:\/\/chamaneh.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}