{"id":12,"date":"2026-09-01T12:19:10","date_gmt":"2026-09-01T12:19:10","guid":{"rendered":"https:\/\/karenfarasakht.ir\/?page_id=12"},"modified":"2026-09-01T13:00:19","modified_gmt":"2026-09-01T13:00:19","slug":"%d8%ae%d8%a7%d9%86%d9%87","status":"publish","type":"page","link":"https:\/\/karenfarasakht.ir\/","title":{"rendered":"\u062e\u0627\u0646\u0647"},"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 Hero Slider | Karen Farasakht<\/title>\r\n\r\n <style>\r\n \/* ============================================ *\/\r\n \/* \u067e\u0627\u0644\u062a \u0631\u0646\u06af\u06cc \u062c\u062f\u06cc\u062f *\/\r\n \/* ============================================ *\/\r\n :root {\r\n --midnight-navy: #071525;\r\n --deep-steel: #172635;\r\n --architectural-silver: #AEB7BF;\r\n --glass-white: #F4F6F7;\r\n --electric-blue: #3978FF;\r\n \r\n --bg-light: var(--glass-white);\r\n --bg-soft: #e8edf0;\r\n --text-dark: var(--midnight-navy);\r\n --text-gray: var(--architectural-silver);\r\n --border: #d0d7dd;\r\n --shadow: 0 10px 30px rgba(7, 21, 37, 0.08);\r\n --accent: var(--electric-blue);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* ===== \u0641\u0648\u0646\u062a \u0648\u0632\u06cc\u0631\u0645\u062a\u0646 (\u0644\u0648\u06a9\u0627\u0644) ===== *\/\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn'), local('Vazir'), local('Vazir-FD');\r\n font-weight: 400;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-Bold'), local('Vazir-Bold');\r\n font-weight: 700;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-ExtraBold'), local('Vazir-ExtraBold');\r\n font-weight: 900;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n body {\r\n font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;\r\n background-color: var(--glass-white);\r\n color: var(--midnight-navy);\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* ===== \u062f\u0645\u0648 \u06a9\u0627\u0646\u062a\u0646\u062a ===== *\/\r\n .demo-info {\r\n padding: 40px 5%;\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background: var(--glass-white);\r\n }\r\n\r\n .demo-info h2 {\r\n font-size: 32px;\r\n margin-bottom: 15px;\r\n color: var(--midnight-navy);\r\n font-weight: 900;\r\n }\r\n\r\n .demo-info p {\r\n font-size: 16px;\r\n color: var(--deep-steel);\r\n line-height: 2;\r\n }\r\n\r\n .demo-info .highlight {\r\n color: var(--electric-blue);\r\n font-weight: 700;\r\n }\r\n\r\n .demo-info .badge {\r\n display: inline-block;\r\n background: var(--midnight-navy);\r\n color: var(--glass-white);\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n font-size: 13px;\r\n margin-top: 10px;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* SECTION: HERO SLIDER - \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 *\/\r\n \/* ============================================ *\/\r\n\r\n .hero {\r\n height: 100vh;\r\n min-height: 100vh;\r\n width: 100%;\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n overflow: hidden;\r\n cursor: default;\r\n }\r\n\r\n .hero-slider {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 1;\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-size: cover;\r\n background-position: center;\r\n background-repeat: no-repeat;\r\n opacity: 0;\r\n transform: scale(1.1);\r\n transition: opacity 2s ease-in-out, transform 6s ease-in-out;\r\n }\r\n\r\n .slide.active {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n\r\n \/* ===== \u0627\u0648\u0648\u0631\u0644\u06cc \u0628\u0627 \u06af\u0631\u0627\u062f\u06cc\u0627\u0646 ===== *\/\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(to bottom, rgba(7, 21, 37, 0.3), rgba(7, 21, 37, 0.6));\r\n z-index: 2;\r\n }\r\n\r\n .hero-content {\r\n position: relative;\r\n z-index: 10;\r\n padding: 0 20px;\r\n max-width: 900px;\r\n }\r\n\r\n .hero h1 {\r\n font-size: 72px;\r\n font-weight: 900;\r\n margin-bottom: 20px;\r\n color: var(--glass-white);\r\n line-height: 1.2;\r\n text-shadow: 0 4px 30px rgba(7, 21, 37, 0.3);\r\n }\r\n\r\n .hero h1 span {\r\n color: var(--electric-blue);\r\n }\r\n\r\n .hero p {\r\n font-size: 22px;\r\n color: var(--architectural-silver);\r\n margin-bottom: 40px;\r\n line-height: 1.8;\r\n text-shadow: 0 2px 20px rgba(7, 21, 37, 0.2);\r\n }\r\n\r\n .hero-btn {\r\n background: var(--electric-blue);\r\n color: var(--glass-white);\r\n padding: 16px 48px;\r\n font-size: 18px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n border-radius: 50px;\r\n box-shadow: 0 10px 30px rgba(57, 120, 255, 0.35);\r\n transition: all 0.3s ease;\r\n display: inline-block;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n\r\n .hero-btn:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 45px rgba(57, 120, 255, 0.5);\r\n background: #2a6ae0;\r\n }\r\n\r\n \/* ===== \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u062f\u0627\u06cc\u0631\u0647\u200c\u0627\u06cc ===== *\/\r\n .slider-nav {\r\n position: absolute;\r\n bottom: 40px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 10;\r\n display: flex;\r\n gap: 14px;\r\n }\r\n\r\n .slider-dot {\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.25);\r\n border: 2px solid rgba(255, 255, 255, 0.4);\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n padding: 0;\r\n }\r\n\r\n .slider-dot.active {\r\n background: var(--electric-blue);\r\n border-color: var(--electric-blue);\r\n transform: scale(1.25);\r\n box-shadow: 0 0 20px rgba(57, 120, 255, 0.4);\r\n }\r\n\r\n .slider-dot:hover {\r\n background: var(--electric-blue);\r\n border-color: var(--electric-blue);\r\n }\r\n\r\n \/* ===== \u0641\u0644\u0634\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc ===== *\/\r\n .slider-arrow {\r\n position: absolute;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n z-index: 10;\r\n background: rgba(255, 255, 255, 0.12);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n color: var(--glass-white);\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: 24px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.3s ease;\r\n opacity: 0.5;\r\n }\r\n\r\n .slider-arrow:hover {\r\n background: rgba(57, 120, 255, 0.3);\r\n opacity: 1;\r\n transform: translateY(-50%) scale(1.08);\r\n border-color: var(--electric-blue);\r\n }\r\n\r\n .slider-arrow.prev {\r\n right: 30px;\r\n }\r\n\r\n .slider-arrow.next {\r\n left: 30px;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* RESPONSIVE *\/\r\n \/* ============================================ *\/\r\n\r\n @media (max-width: 992px) {\r\n .hero h1 {\r\n font-size: 52px;\r\n }\r\n\r\n .hero p {\r\n font-size: 20px;\r\n }\r\n\r\n .slider-arrow {\r\n width: 44px;\r\n height: 44px;\r\n font-size: 20px;\r\n }\r\n\r\n .slider-arrow.prev {\r\n right: 18px;\r\n }\r\n\r\n .slider-arrow.next {\r\n left: 18px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero {\r\n height: 100vh;\r\n min-height: 100vh;\r\n }\r\n\r\n .hero h1 {\r\n font-size: 38px;\r\n }\r\n\r\n .hero h1 br {\r\n display: none;\r\n }\r\n\r\n .hero p {\r\n font-size: 17px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .hero-btn {\r\n padding: 13px 34px;\r\n font-size: 16px;\r\n }\r\n\r\n .slider-arrow {\r\n width: 38px;\r\n height: 38px;\r\n font-size: 16px;\r\n }\r\n\r\n .slider-arrow.prev {\r\n right: 12px;\r\n }\r\n\r\n .slider-arrow.next {\r\n left: 12px;\r\n }\r\n\r\n .slider-dot {\r\n width: 12px;\r\n height: 12px;\r\n }\r\n\r\n .slider-nav {\r\n bottom: 30px;\r\n gap: 10px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero h1 {\r\n font-size: 28px;\r\n }\r\n\r\n .hero p {\r\n font-size: 15px;\r\n margin-bottom: 25px;\r\n }\r\n\r\n .hero-btn {\r\n padding: 11px 28px;\r\n font-size: 14px;\r\n }\r\n\r\n .slider-arrow {\r\n width: 32px;\r\n height: 32px;\r\n font-size: 14px;\r\n }\r\n\r\n .slider-dot {\r\n width: 10px;\r\n height: 10px;\r\n }\r\n\r\n .slider-nav {\r\n bottom: 22px;\r\n gap: 8px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n <!-- ============================================ -->\r\n <!-- SECTION: HERO SLIDER - \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 -->\r\n <!-- ============================================ -->\r\n\r\n <section class=\"hero\" id=\"hero-slider\">\r\n <!-- \u0627\u0633\u0644\u0627\u06cc\u062f\u0647\u0627 \u0628\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648\u0627\u0642\u0639\u06cc -->\r\n <div class=\"hero-slider\">\r\n <!-- \u0627\u0633\u0644\u0627\u06cc\u062f \u06f1 (\u0641\u0639\u0627\u0644) -->\r\n <div class=\"slide active\" style=\"background-image: url('https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp');\"><\/div>\r\n \r\n <!-- \u0627\u0633\u0644\u0627\u06cc\u062f \u06f2 -->\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp');\"><\/div>\r\n \r\n <!-- \u0627\u0633\u0644\u0627\u06cc\u062f \u06f3 -->\r\n <div class=\"slide\" style=\"background-image: url('https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp');\"><\/div>\r\n <\/div>\r\n\r\n <!-- \u0645\u062d\u062a\u0648\u0627\u06cc \u0647\u06cc\u0631\u0648 -->\r\n <div class=\"hero-content\">\r\n <h1>\u0645\u0627 <span>\u0622\u06cc\u0646\u062f\u0647<\/span> \u0631\u0627<br>\u0628\u062a\u0646\u200c\u0631\u06cc\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645<\/h1>\r\n <p>\u0627\u0632 \u0627\u06cc\u062f\u0647 \u062a\u0627 \u0648\u0627\u0642\u0639\u06cc\u062a\u061b \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u062f\u0631 \u062e\u0627\u06a9 \u0627\u06cc\u0631\u0627\u0646.<\/p>\r\n <a href=\"#\" class=\"hero-btn\">\u0648\u0631\u0648\u062f \u0628\u0647 \u062f\u0646\u06cc\u0627\u06cc \u06a9\u0627\u0631\u0646\u200c\u0641\u0631\u0627\u0633\u0627\u062e\u062a<\/a>\r\n <\/div>\r\n\r\n <!-- \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u062f\u0627\u06cc\u0631\u0647\u200c\u0627\u06cc -->\r\n <div class=\"slider-nav\">\r\n <button class=\"slider-dot active\" data-slide=\"0\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u06f1\"><\/button>\r\n <button class=\"slider-dot\" data-slide=\"1\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u06f2\"><\/button>\r\n <button class=\"slider-dot\" data-slide=\"2\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u06f3\"><\/button>\r\n <\/div>\r\n\r\n <!-- \u0641\u0644\u0634\u200c\u0647\u0627\u06cc \u0642\u0628\u0644\u06cc \u0648 \u0628\u0639\u062f\u06cc -->\r\n <button class=\"slider-arrow prev\" id=\"prev-slide\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u0642\u0628\u0644\u06cc\">\u276e<\/button>\r\n <button class=\"slider-arrow next\" id=\"next-slide\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f \u0628\u0639\u062f\u06cc\">\u276f<\/button>\r\n <\/section>\r\n\r\n <script>\r\n \/* ============================================ *\/\r\n \/* HERO SLIDER SCRIPTS *\/\r\n \/* ============================================ *\/\r\n\r\n (function() {\r\n 'use strict';\r\n\r\n const heroSection = document.getElementById('hero-slider');\r\n const slides = document.querySelectorAll('.slide');\r\n const dots = document.querySelectorAll('.slider-dot');\r\n const prevBtn = document.getElementById('prev-slide');\r\n const nextBtn = document.getElementById('next-slide');\r\n \r\n let currentSlide = 0;\r\n const slideInterval = 4000;\r\n let sliderTimer;\r\n let isTransitioning = false;\r\n\r\n function goToSlide(index) {\r\n if (isTransitioning || index === currentSlide) return;\r\n if (index < 0) index = slides.length - 1;\r\n if (index >= slides.length) index = 0;\r\n\r\n isTransitioning = true;\r\n\r\n slides.forEach(s => s.classList.remove('active'));\r\n dots.forEach(d => d.classList.remove('active'));\r\n\r\n slides[index].classList.add('active');\r\n dots[index].classList.add('active');\r\n\r\n currentSlide = index;\r\n\r\n setTimeout(() => {\r\n isTransitioning = false;\r\n }, 600);\r\n }\r\n\r\n function nextSlide() {\r\n goToSlide(currentSlide + 1);\r\n }\r\n\r\n function prevSlide() {\r\n goToSlide(currentSlide - 1);\r\n }\r\n\r\n function startSlider() {\r\n stopSlider();\r\n sliderTimer = setInterval(nextSlide, slideInterval);\r\n }\r\n\r\n function stopSlider() {\r\n clearInterval(sliderTimer);\r\n }\r\n\r\n function resetSlider() {\r\n stopSlider();\r\n startSlider();\r\n }\r\n\r\n \/\/ \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u062f\u0627\u06cc\u0631\u0647\u200c\u0627\u06cc\r\n dots.forEach((dot, index) => {\r\n dot.addEventListener('click', function() {\r\n if (currentSlide !== index) {\r\n goToSlide(index);\r\n resetSlider();\r\n }\r\n });\r\n });\r\n\r\n \/\/ \u0641\u0644\u0634 \u0642\u0628\u0644\u06cc\r\n if (prevBtn) {\r\n prevBtn.addEventListener('click', function() {\r\n prevSlide();\r\n resetSlider();\r\n });\r\n }\r\n\r\n \/\/ \u0641\u0644\u0634 \u0628\u0639\u062f\u06cc\r\n if (nextBtn) {\r\n nextBtn.addEventListener('click', function() {\r\n nextSlide();\r\n resetSlider();\r\n });\r\n }\r\n\r\n \/\/ \u062a\u0648\u0642\u0641 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631 \u0628\u0627 \u0647\u0627\u0648\u0631 \u0645\u0627\u0648\u0633\r\n if (heroSection) {\r\n heroSection.addEventListener('mouseenter', stopSlider);\r\n heroSection.addEventListener('mouseleave', startSlider);\r\n }\r\n\r\n \/\/ \u06a9\u06cc\u0628\u0648\u0631\u062f \u0646\u0627\u0648\u0628\u0631\u06cc\r\n document.addEventListener('keydown', function(e) {\r\n if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {\r\n e.preventDefault();\r\n if (e.key === 'ArrowRight') {\r\n nextSlide();\r\n } else {\r\n prevSlide();\r\n }\r\n resetSlider();\r\n }\r\n });\r\n\r\n \/\/ \u0634\u0631\u0648\u0639 \u0627\u0633\u0644\u0627\u06cc\u062f\u0631\r\n startSlider();\r\n\r\n console.log('\u2705 Hero Slider loaded successfully!');\r\n\r\n })();\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce63265 e-flex e-con-boxed e-con e-parent\" data-id=\"ce63265\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-65012f6 elementor-widget elementor-widget-html\" data-id=\"65012f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fa\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Intro Cards | Karen Farasakht<\/title>\r\n\r\n <style>\r\n \/* ============================================ *\/\r\n \/* \u067e\u0627\u0644\u062a \u0631\u0646\u06af\u06cc \u062c\u062f\u06cc\u062f *\/\r\n \/* ============================================ *\/\r\n :root {\r\n --midnight-navy: #071525;\r\n --deep-steel: #172635;\r\n --architectural-silver: #AEB7BF;\r\n --glass-white: #F4F6F7;\r\n --electric-blue: #3978FF;\r\n \r\n --bg-light: var(--glass-white);\r\n --bg-soft: #e8edf0;\r\n --text-dark: var(--midnight-navy);\r\n --text-gray: var(--architectural-silver);\r\n --border: #d0d7dd;\r\n --shadow: 0 10px 30px rgba(7, 21, 37, 0.08);\r\n --accent: var(--electric-blue);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* \u0641\u0648\u0646\u062a \u0648\u0632\u06cc\u0631\u0645\u062a\u0646 (\u06a9\u0627\u0645\u0644\u0627\u064b \u0644\u0648\u06a9\u0627\u0644) *\/\r\n \/* ============================================ *\/\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn'), local('Vazir'), local('Vazir-FD'), local('Vazirmatn-Regular');\r\n font-weight: 400;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-Bold'), local('Vazir-Bold'), local('Vazir-FD-Bold');\r\n font-weight: 700;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-ExtraBold'), local('Vazir-ExtraBold'), local('Vazir-FD-ExtraBold');\r\n font-weight: 900;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n body {\r\n font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;\r\n background-color: var(--glass-white);\r\n color: var(--midnight-navy);\r\n overflow-x: hidden;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* ===== \u062f\u0645\u0648 \u06a9\u0627\u0646\u062a\u0646\u062a ===== *\/\r\n .demo-info {\r\n padding: 40px 5%;\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background: var(--glass-white);\r\n }\r\n\r\n .demo-info h2 {\r\n font-size: 32px;\r\n margin-bottom: 15px;\r\n color: var(--midnight-navy);\r\n font-weight: 900;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info p {\r\n font-size: 16px;\r\n color: var(--deep-steel);\r\n line-height: 2;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info .highlight {\r\n color: var(--electric-blue);\r\n font-weight: 700;\r\n }\r\n\r\n .demo-info .badge {\r\n display: inline-block;\r\n background: var(--midnight-navy);\r\n color: var(--glass-white);\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n font-size: 13px;\r\n margin-top: 10px;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* SECTION: INTRO CARDS *\/\r\n \/* ============================================ *\/\r\n\r\n .intro-section {\r\n max-width: 1200px;\r\n margin: 40px auto 80px;\r\n padding: 0 20px;\r\n position: relative;\r\n z-index: 20;\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 30px;\r\n }\r\n\r\n .intro-card {\r\n background: var(--glass-white);\r\n border: 1px solid var(--border);\r\n border-radius: 20px;\r\n padding: 40px 35px;\r\n box-shadow: var(--shadow);\r\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n \r\n \/* ===== \u0648\u0633\u0637\u200c\u0686\u06cc\u0646 \u06a9\u0631\u062f\u0646 \u0645\u062d\u062a\u0648\u0627 ===== *\/\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n \/* ===== \u0627\u0633\u062a\u0631\u0648\u06a9 \u06cc\u06a9\u062f\u0633\u062a \u062f\u0631 \u0647\u0645\u0647 \u062c\u0647\u0627\u062a \u0647\u0646\u06af\u0627\u0645 \u0647\u0627\u0648\u0631 ===== *\/\r\n .intro-card::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n border-radius: 20px;\r\n padding: 2px;\r\n background: transparent;\r\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\r\n -webkit-mask-composite: xor;\r\n mask-composite: exclude;\r\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n pointer-events: none;\r\n }\r\n\r\n .intro-card:hover::before {\r\n background: var(--electric-blue);\r\n }\r\n\r\n \/* ===== \u0627\u0633\u062a\u0631\u0648\u06a9 \u062c\u0627\u06cc\u06af\u0632\u06cc\u0646 \u0628\u0627 border ===== *\/\r\n .intro-card:hover {\r\n border-color: var(--electric-blue);\r\n transform: translateY(-10px);\r\n box-shadow: 0 20px 50px rgba(7, 21, 37, 0.12);\r\n }\r\n\r\n \/* ===== \u0622\u06cc\u06a9\u0648\u0646 \u06a9\u0627\u0631\u062a (\u0628\u0627 SVG \u062e\u0637\u06cc) ===== *\/\r\n .intro-icon {\r\n width: 64px;\r\n height: 64px;\r\n margin-bottom: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: rgba(57, 120, 255, 0.08);\r\n border-radius: 16px;\r\n transition: all 0.3s ease;\r\n flex-shrink: 0;\r\n }\r\n\r\n .intro-card:hover .intro-icon {\r\n background: rgba(57, 120, 255, 0.15);\r\n transform: scale(1.05);\r\n }\r\n\r\n .intro-icon .icon-svg {\r\n width: 32px;\r\n height: 32px;\r\n fill: none;\r\n stroke: var(--electric-blue);\r\n stroke-width: 1.8;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: stroke 0.3s ease;\r\n }\r\n\r\n .intro-card:hover .intro-icon .icon-svg {\r\n stroke: var(--electric-blue);\r\n }\r\n\r\n .intro-card h3 {\r\n font-size: 24px;\r\n font-weight: 700;\r\n margin-bottom: 15px;\r\n color: var(--midnight-navy);\r\n font-family: 'Vazirmatn', sans-serif;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .intro-card:hover h3 {\r\n color: var(--electric-blue);\r\n }\r\n\r\n .intro-card p {\r\n color: var(--deep-steel);\r\n line-height: 1.9;\r\n font-size: 15px;\r\n font-family: 'Vazirmatn', sans-serif;\r\n opacity: 0.85;\r\n margin-bottom: 20px;\r\n max-width: 100%;\r\n }\r\n\r\n .intro-card a {\r\n color: var(--electric-blue);\r\n text-decoration: none;\r\n font-size: 14px;\r\n font-weight: 600;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n transition: all 0.3s ease;\r\n font-family: 'Vazirmatn', sans-serif;\r\n border-bottom: 2px solid transparent;\r\n padding-bottom: 2px;\r\n margin-top: auto;\r\n }\r\n\r\n .intro-card a:hover {\r\n border-bottom-color: var(--electric-blue);\r\n transform: translateX(-5px);\r\n }\r\n\r\n .intro-card a .arrow-svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: none;\r\n stroke: var(--electric-blue);\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .intro-card a:hover .arrow-svg {\r\n transform: translateX(-4px);\r\n }\r\n\r\n \/* ===== \u062f\u06a9\u0645\u0647 \u0645\u0631\u06a9\u0632\u06cc ===== *\/\r\n .btn-center {\r\n display: flex;\r\n justify-content: center;\r\n margin-top: -30px;\r\n margin-bottom: 80px;\r\n }\r\n\r\n .btn-center a {\r\n background: var(--electric-blue);\r\n color: var(--glass-white);\r\n padding: 14px 36px;\r\n text-decoration: none;\r\n border-radius: 50px;\r\n font-weight: 700;\r\n font-family: 'Vazirmatn', sans-serif;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 8px 25px rgba(57, 120, 255, 0.3);\r\n border: none;\r\n cursor: pointer;\r\n display: inline-block;\r\n }\r\n\r\n .btn-center a:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 12px 35px rgba(57, 120, 255, 0.4);\r\n background: #2a6ae0;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* RESPONSIVE *\/\r\n \/* ============================================ *\/\r\n\r\n @media (max-width: 992px) {\r\n .intro-section {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 25px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .intro-section {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n margin: 20px auto 60px;\r\n }\r\n\r\n .intro-card {\r\n padding: 30px 25px;\r\n }\r\n\r\n .intro-card a:hover {\r\n transform: translateX(0) scale(1.02);\r\n }\r\n\r\n .intro-card a .arrow-svg {\r\n display: none;\r\n }\r\n\r\n .btn-center {\r\n margin-top: -10px;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .btn-center a {\r\n padding: 12px 30px;\r\n font-size: 15px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .intro-card {\r\n padding: 25px 20px;\r\n }\r\n\r\n .intro-card h3 {\r\n font-size: 20px;\r\n }\r\n\r\n .intro-card p {\r\n font-size: 14px;\r\n }\r\n\r\n .intro-icon {\r\n width: 54px;\r\n height: 54px;\r\n }\r\n\r\n .intro-icon .icon-svg {\r\n width: 26px;\r\n height: 26px;\r\n }\r\n\r\n .btn-center a {\r\n padding: 10px 24px;\r\n font-size: 14px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n <!-- ============================================ -->\r\n <!-- SECTION: INTRO CARDS -->\r\n <!-- ============================================ -->\r\n\r\n <section class=\"intro-section\">\r\n <!-- \u06a9\u0627\u0631\u062a \u06f1: \u0645\u0639\u0645\u0627\u0631\u06cc -->\r\n <div class=\"intro-card\">\r\n <div class=\"intro-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <rect x=\"2\" y=\"4\" width=\"20\" height=\"16\" rx=\"2\"\/>\r\n <path d=\"M8 20v-4h8v4\"\/>\r\n <path d=\"M2 12h20\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>\u0645\u0639\u0645\u0627\u0631\u06cc<\/h3>\r\n <p>\u0637\u0631\u0627\u062d\u06cc\u060c \u062f\u06cc\u06af\u0631 \u0641\u0642\u0637 \u0631\u0633\u0645 \u062e\u0637 \u0646\u06cc\u0633\u062a\u061b \u062e\u0644\u0642 \u0641\u0636\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0632\u0646\u062f\u06af\u06cc \u0627\u0646\u0633\u0627\u0646\u200c\u0647\u0627 \u0631\u0627 \u0645\u062a\u062d\u0648\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062a\u06cc\u0645 \u0645\u0627 \u0628\u0627 \u0627\u0644\u0647\u0627\u0645 \u0627\u0632 \u0645\u0639\u0645\u0627\u0631\u06cc \u067e\u0627\u06cc\u062f\u0627\u0631 \u0648 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc \u0631\u0648\u0632\u060c \u0622\u06cc\u0646\u062f\u0647 \u0631\u0627 \u0645\u06cc\u200c\u0633\u0627\u0632\u062f.<\/p>\r\n <a href=\"#\">\r\n \u06a9\u0634\u0641 \u0627\u0633\u062a\u0639\u062f\u0627\u062f\u0647\u0627\r\n <svg class=\"arrow-svg\" viewBox=\"0 0 24 24\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\r\n <polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- \u06a9\u0627\u0631\u062a \u06f2: \u062a\u0648\u0633\u0639\u0647 -->\r\n <div class=\"intro-card\">\r\n <div class=\"intro-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <polyline points=\"16 18 22 12 16 6\"\/>\r\n <polyline points=\"8 6 2 12 8 18\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>\u062a\u0648\u0633\u0639\u0647<\/h3>\r\n <p>\u0645\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u062e\u0648\u062f \u0627\u0632 BIM \u0648 \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u062e\u0637\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0641\u0631 \u0628\u0631\u0633\u0627\u0646\u06cc\u0645. \u0633\u0631\u0639\u062a\u060c \u062f\u0642\u062a \u0648 \u06a9\u06cc\u0641\u06cc\u062a\u060c \u0633\u0647 \u0636\u0644\u0639 \u0645\u062b\u0644\u062b \u0627\u0639\u062a\u0645\u0627\u062f \u0645\u0627\u0633\u062a.<\/p>\r\n <a href=\"#\">\r\n \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0633\u0627\u062e\u062a\r\n <svg class=\"arrow-svg\" viewBox=\"0 0 24 24\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\r\n <polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- \u06a9\u0627\u0631\u062a \u06f3: \u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u06af\u0630\u0627\u0631\u06cc -->\r\n <div class=\"intro-card\">\r\n <div class=\"intro-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2v20\"\/>\r\n <path d=\"M17 7H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H7\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>\u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u06af\u0630\u0627\u0631\u06cc<\/h3>\r\n <p>\u0633\u0631\u0645\u0627\u06cc\u0647 \u0634\u0645\u0627 \u0627\u0645\u0627\u0646\u062a \u0627\u0633\u062a. \u0628\u0627 \u062a\u062d\u0644\u06cc\u0644 \u062f\u0642\u06cc\u0642 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u0628\u0627\u0632\u0627\u0631 \u0648 \u062a\u06cc\u0645 \u0627\u0642\u062a\u0635\u0627\u062f\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc\u060c \u0628\u0627\u0632\u062f\u0647\u06cc \u0633\u0631\u0645\u0627\u06cc\u0647\u200c\u06af\u0630\u0627\u0631\u06cc \u0634\u0645\u0627 \u0631\u0627 \u062a\u0636\u0645\u06cc\u0646 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\r\n <a href=\"#\">\r\n \u062a\u062d\u0644\u06cc\u0644 \u0628\u0627\u0632\u0627\u0631\r\n <svg class=\"arrow-svg\" viewBox=\"0 0 24 24\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\r\n <polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ===== \u062f\u06a9\u0645\u0647 \u0645\u0631\u06a9\u0632\u06cc ===== -->\r\n <div class=\"btn-center\">\r\n <a href=\"#\">\u0645\u0634\u0627\u0647\u062f\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0632\u0646\u062f\u0647<\/a>\r\n <\/div>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-72efe7b e-flex e-con-boxed e-con e-parent\" data-id=\"72efe7b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-270e9e6 elementor-widget elementor-widget-html\" data-id=\"270e9e6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fa\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Gallery Strip | Karen Farasakht<\/title>\r\n\r\n <style>\r\n \/* ============================================ *\/\r\n \/* \u067e\u0627\u0644\u062a \u0631\u0646\u06af\u06cc \u062c\u062f\u06cc\u062f *\/\r\n \/* ============================================ *\/\r\n :root {\r\n --midnight-navy: #071525;\r\n --deep-steel: #172635;\r\n --architectural-silver: #AEB7BF;\r\n --glass-white: #F4F6F7;\r\n --electric-blue: #3978FF;\r\n \r\n --bg-light: var(--glass-white);\r\n --bg-soft: #e8edf0;\r\n --text-dark: var(--midnight-navy);\r\n --text-gray: var(--architectural-silver);\r\n --border: #d0d7dd;\r\n --shadow: 0 10px 30px rgba(7, 21, 37, 0.08);\r\n --accent: var(--electric-blue);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* \u0641\u0648\u0646\u062a \u0648\u0632\u06cc\u0631\u0645\u062a\u0646 (\u06a9\u0627\u0645\u0644\u0627\u064b \u0644\u0648\u06a9\u0627\u0644) *\/\r\n \/* ============================================ *\/\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn'), local('Vazir'), local('Vazir-FD'), local('Vazirmatn-Regular');\r\n font-weight: 400;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-Bold'), local('Vazir-Bold'), local('Vazir-FD-Bold');\r\n font-weight: 700;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-ExtraBold'), local('Vazir-ExtraBold'), local('Vazir-FD-ExtraBold');\r\n font-weight: 900;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n body {\r\n font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;\r\n background-color: var(--glass-white);\r\n color: var(--midnight-navy);\r\n overflow-x: hidden;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* ===== \u062f\u0645\u0648 \u06a9\u0627\u0646\u062a\u0646\u062a ===== *\/\r\n .demo-info {\r\n padding: 40px 5%;\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background: var(--glass-white);\r\n }\r\n\r\n .demo-info h2 {\r\n font-size: 32px;\r\n margin-bottom: 15px;\r\n color: var(--midnight-navy);\r\n font-weight: 900;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info p {\r\n font-size: 16px;\r\n color: var(--deep-steel);\r\n line-height: 2;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info .highlight {\r\n color: var(--electric-blue);\r\n font-weight: 700;\r\n }\r\n\r\n .demo-info .badge {\r\n display: inline-block;\r\n background: var(--midnight-navy);\r\n color: var(--glass-white);\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n font-size: 13px;\r\n margin-top: 10px;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* SECTION: GALLERY STRIP *\/\r\n \/* ============================================ *\/\r\n\r\n .gallery-strip {\r\n display: grid;\r\n grid-template-columns: repeat(5, 1fr);\r\n gap: 15px;\r\n }\r\n\r\n .gallery-item {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n height: 300px;\r\n cursor: pointer;\r\n border: 1px solid var(--border);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: var(--deep-steel);\r\n }\r\n\r\n .gallery-item:hover {\r\n border-color: var(--electric-blue);\r\n transform: translateY(-5px);\r\n box-shadow: 0 15px 40px rgba(7, 21, 37, 0.15);\r\n }\r\n\r\n .gallery-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .gallery-item:hover img {\r\n transform: scale(1.08);\r\n }\r\n\r\n \/* ===== \u0627\u0648\u0648\u0631\u0644\u06cc \u06af\u0631\u0627\u062f\u06cc\u0627\u0646 ===== *\/\r\n .gallery-item::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n height: 60%;\r\n background: linear-gradient(to top, rgba(7, 21, 37, 0.8), transparent);\r\n opacity: 0;\r\n transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .gallery-item:hover::after {\r\n opacity: 1;\r\n }\r\n\r\n \/* ===== \u0628\u0631\u0686\u0633\u0628 \u0645\u062a\u0646 ===== *\/\r\n .gallery-item span {\r\n position: absolute;\r\n bottom: -30px;\r\n right: 20px;\r\n z-index: 10;\r\n color: var(--glass-white);\r\n font-size: 15px;\r\n font-weight: 600;\r\n font-family: 'Vazirmatn', sans-serif;\r\n transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n opacity: 0;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .gallery-item:hover span {\r\n bottom: 25px;\r\n opacity: 1;\r\n }\r\n\r\n \/* ===== \u062e\u0637 \u0622\u06a9\u0646\u062a \u0632\u06cc\u0631 \u0628\u0631\u0686\u0633\u0628 ===== *\/\r\n .gallery-item span::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -4px;\r\n right: 0;\r\n width: 0;\r\n height: 2px;\r\n background: var(--electric-blue);\r\n transition: width 0.4s ease;\r\n }\r\n\r\n .gallery-item:hover span::after {\r\n width: 100%;\r\n }\r\n\r\n \/* ===== \u0622\u06cc\u06a9\u0648\u0646 \u0632\u0648\u0645 \u062f\u0631 \u0647\u0627\u0648\u0631 ===== *\/\r\n .gallery-item .zoom-icon {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%) scale(0.5);\r\n z-index: 5;\r\n opacity: 0;\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n background: rgba(57, 120, 255, 0.2);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n border: 2px solid rgba(255, 255, 255, 0.3);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n\r\n .gallery-item .zoom-icon .icon-svg {\r\n width: 24px;\r\n height: 24px;\r\n fill: none;\r\n stroke: var(--glass-white);\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n .gallery-item:hover .zoom-icon {\r\n opacity: 1;\r\n transform: translate(-50%, -50%) scale(1);\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* RESPONSIVE *\/\r\n \/* ============================================ *\/\r\n\r\n @media (max-width: 992px) {\r\n .gallery-strip {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 12px;\r\n }\r\n\r\n .gallery-item {\r\n height: 250px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .gallery-strip {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n }\r\n\r\n .gallery-item {\r\n height: 200px;\r\n }\r\n\r\n .gallery-item .zoom-icon {\r\n display: none;\r\n }\r\n\r\n .gallery-item span {\r\n font-size: 13px;\r\n }\r\n\r\n .gallery-item:hover span {\r\n bottom: 18px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .gallery-strip {\r\n grid-template-columns: 1fr;\r\n gap: 12px;\r\n }\r\n\r\n .gallery-item {\r\n height: 220px;\r\n }\r\n\r\n .gallery-item span {\r\n font-size: 14px;\r\n bottom: -30px;\r\n right: 16px;\r\n }\r\n\r\n .gallery-item:hover span {\r\n bottom: 16px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n <!-- ============================================ -->\r\n <!-- SECTION: GALLERY STRIP -->\r\n <!-- ============================================ -->\r\n\r\n <section class=\"gallery-strip\">\r\n <!-- \u0622\u06cc\u062a\u0645 \u06f1: \u0633\u0627\u0632\u0647\u200c\u0647\u0627\u06cc \u0641\u0648\u0644\u0627\u062f\u06cc -->\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u0633\u0627\u0632\u0647\u200c\u0647\u0627\u06cc \u0641\u0648\u0644\u0627\u062f\u06cc\">\r\n <div class=\"zoom-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\r\n <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/>\r\n <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span>\u0633\u0627\u0632\u0647\u200c\u0647\u0627\u06cc \u0641\u0648\u0644\u0627\u062f\u06cc<\/span>\r\n <\/div>\r\n\r\n <!-- \u0622\u06cc\u062a\u0645 \u06f2: \u0646\u0645\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f -->\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u0646\u0645\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f\">\r\n <div class=\"zoom-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\r\n <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/>\r\n <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span>\u0646\u0645\u0627\u06cc \u0647\u0648\u0634\u0645\u0646\u062f<\/span>\r\n <\/div>\r\n\r\n <!-- \u0622\u06cc\u062a\u0645 \u06f3: \u0641\u0636\u0627\u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc -->\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u0641\u0636\u0627\u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc\">\r\n <div class=\"zoom-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\r\n <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/>\r\n <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span>\u0641\u0636\u0627\u0647\u0627\u06cc \u062f\u0627\u062e\u0644\u06cc<\/span>\r\n <\/div>\r\n\r\n <!-- \u0622\u06cc\u062a\u0645 \u06f4: \u0628\u0631\u062c\u200c\u0647\u0627\u06cc \u0645\u0633\u06a9\u0648\u0646\u06cc -->\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u0628\u0631\u062c\u200c\u0647\u0627\u06cc \u0645\u0633\u06a9\u0648\u0646\u06cc\">\r\n <div class=\"zoom-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\r\n <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/>\r\n <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span>\u0628\u0631\u062c\u200c\u0647\u0627\u06cc \u0645\u0633\u06a9\u0648\u0646\u06cc<\/span>\r\n <\/div>\r\n\r\n <!-- \u0622\u06cc\u062a\u0645 \u06f5: \u0645\u0631\u0627\u06a9\u0632 \u062a\u062c\u0627\u0631\u06cc -->\r\n <div class=\"gallery-item\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u0645\u0631\u0627\u06a9\u0632 \u062a\u062c\u0627\u0631\u06cc\">\r\n <div class=\"zoom-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <circle cx=\"11\" cy=\"11\" r=\"8\"\/>\r\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/>\r\n <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/>\r\n <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/>\r\n <\/svg>\r\n <\/div>\r\n <span>\u0645\u0631\u0627\u06a9\u0632 \u062a\u062c\u0627\u0631\u06cc<\/span>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-90d7206 e-con-full e-flex e-con e-parent\" data-id=\"90d7206\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2437c1e elementor-widget elementor-widget-html\" data-id=\"2437c1e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fa\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Services | Karen Farasakht<\/title>\r\n\r\n <style>\r\n \/* ============================================ *\/\r\n \/* \u067e\u0627\u0644\u062a \u0631\u0646\u06af\u06cc \u062c\u062f\u06cc\u062f *\/\r\n \/* ============================================ *\/\r\n :root {\r\n --midnight-navy: #071525;\r\n --deep-steel: #172635;\r\n --architectural-silver: #AEB7BF;\r\n --glass-white: #F4F6F7;\r\n --electric-blue: #3978FF;\r\n \r\n --bg-light: var(--glass-white);\r\n --bg-soft: #e8edf0;\r\n --text-dark: var(--midnight-navy);\r\n --text-gray: var(--architectural-silver);\r\n --border: #d0d7dd;\r\n --shadow: 0 10px 30px rgba(7, 21, 37, 0.08);\r\n --accent: var(--electric-blue);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* \u0641\u0648\u0646\u062a \u0648\u0632\u06cc\u0631\u0645\u062a\u0646 (\u06a9\u0627\u0645\u0644\u0627\u064b \u0644\u0648\u06a9\u0627\u0644) *\/\r\n \/* ============================================ *\/\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn'), local('Vazir'), local('Vazir-FD'), local('Vazirmatn-Regular');\r\n font-weight: 400;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-Bold'), local('Vazir-Bold'), local('Vazir-FD-Bold');\r\n font-weight: 700;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-ExtraBold'), local('Vazir-ExtraBold'), local('Vazir-FD-ExtraBold');\r\n font-weight: 900;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n body {\r\n font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;\r\n background-color: var(--glass-white);\r\n color: var(--midnight-navy);\r\n overflow-x: hidden;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* ===== \u062f\u0645\u0648 \u06a9\u0627\u0646\u062a\u0646\u062a ===== *\/\r\n .demo-info {\r\n padding: 40px 5%;\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background: var(--glass-white);\r\n }\r\n\r\n .demo-info h2 {\r\n font-size: 32px;\r\n margin-bottom: 15px;\r\n color: var(--midnight-navy);\r\n font-weight: 900;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info p {\r\n font-size: 16px;\r\n color: var(--deep-steel);\r\n line-height: 2;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info .highlight {\r\n color: var(--electric-blue);\r\n font-weight: 700;\r\n }\r\n\r\n .demo-info .badge {\r\n display: inline-block;\r\n background: var(--midnight-navy);\r\n color: var(--glass-white);\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n font-size: 13px;\r\n margin-top: 10px;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* SECTION: SERVICES *\/\r\n \/* ============================================ *\/\r\n\r\n .services {\r\n background: var(--bg-soft);\r\n padding: 80px 5%;\r\n border-top: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .services h2 {\r\n text-align: center;\r\n font-size: 40px;\r\n font-weight: 900;\r\n margin-bottom: 60px;\r\n color: var(--midnight-navy);\r\n font-family: 'Vazirmatn', sans-serif;\r\n position: relative;\r\n }\r\n\r\n \/* ===== \u062e\u0637 \u0622\u06a9\u0646\u062a \u0632\u06cc\u0631 \u062a\u06cc\u062a\u0631 ===== *\/\r\n .services h2::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n right: 50%;\r\n transform: translateX(50%);\r\n width: 60px;\r\n height: 3px;\r\n background: var(--electric-blue);\r\n border-radius: 3px;\r\n }\r\n\r\n .services-grid {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 30px;\r\n }\r\n\r\n .service-item {\r\n text-align: center;\r\n padding: 40px 30px;\r\n border-radius: 20px;\r\n border: 1px solid var(--border);\r\n background: var(--glass-white);\r\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n \/* ===== \u0627\u0633\u062a\u0631\u0648\u06a9 \u06cc\u06a9\u062f\u0633\u062a \u062f\u0631 \u0647\u0627\u0648\u0631 ===== *\/\r\n .service-item:hover {\r\n border-color: var(--electric-blue);\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 50px rgba(7, 21, 37, 0.12);\r\n }\r\n\r\n \/* ===== \u0622\u06cc\u06a9\u0648\u0646 \u0633\u0631\u0648\u06cc\u0633 ===== *\/\r\n .service-icon {\r\n width: 80px;\r\n height: 80px;\r\n margin: 0 auto 20px;\r\n background: rgba(57, 120, 255, 0.08);\r\n border-radius: 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\r\n flex-shrink: 0;\r\n }\r\n\r\n .service-item:hover .service-icon {\r\n background: rgba(57, 120, 255, 0.15);\r\n transform: scale(1.05);\r\n }\r\n\r\n .service-icon .icon-svg {\r\n width: 36px;\r\n height: 36px;\r\n fill: none;\r\n stroke: var(--electric-blue);\r\n stroke-width: 1.8;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: stroke 0.3s ease;\r\n }\r\n\r\n .service-item:hover .service-icon .icon-svg {\r\n stroke: var(--electric-blue);\r\n }\r\n\r\n .service-item h3 {\r\n font-size: 22px;\r\n font-weight: 700;\r\n margin-bottom: 15px;\r\n color: var(--midnight-navy);\r\n font-family: 'Vazirmatn', sans-serif;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .service-item:hover h3 {\r\n color: var(--electric-blue);\r\n }\r\n\r\n .service-item p {\r\n color: var(--deep-steel);\r\n font-size: 15px;\r\n line-height: 1.9;\r\n font-family: 'Vazirmatn', sans-serif;\r\n opacity: 0.85;\r\n margin-bottom: 0;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* RESPONSIVE *\/\r\n \/* ============================================ *\/\r\n\r\n @media (max-width: 992px) {\r\n .services {\r\n padding: 60px 4%;\r\n }\r\n\r\n .services h2 {\r\n font-size: 32px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .services-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 25px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .services {\r\n padding: 50px 4%;\r\n }\r\n\r\n .services h2 {\r\n font-size: 28px;\r\n margin-bottom: 35px;\r\n }\r\n\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n gap: 20px;\r\n }\r\n\r\n .service-item {\r\n padding: 30px 25px;\r\n }\r\n\r\n .service-item p {\r\n font-size: 14px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .services {\r\n padding: 40px 4%;\r\n }\r\n\r\n .services h2 {\r\n font-size: 24px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .services h2::after {\r\n width: 40px;\r\n height: 2px;\r\n bottom: -10px;\r\n }\r\n\r\n .service-item {\r\n padding: 25px 20px;\r\n }\r\n\r\n .service-icon {\r\n width: 64px;\r\n height: 64px;\r\n }\r\n\r\n .service-icon .icon-svg {\r\n width: 28px;\r\n height: 28px;\r\n }\r\n\r\n .service-item h3 {\r\n font-size: 19px;\r\n }\r\n\r\n .service-item p {\r\n font-size: 13px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ============================================ -->\r\n <!-- SECTION: SERVICES -->\r\n <!-- ============================================ -->\r\n\r\n <section class=\"services\">\r\n <h2>\u0633\u062a\u0648\u0646\u200c\u0647\u0627\u06cc \u0642\u062f\u0631\u062a \u0645\u0627<\/h2>\r\n \r\n <div class=\"services-grid\">\r\n <!-- \u0633\u0631\u0648\u06cc\u0633 \u06f1: \u0645\u0647\u0646\u062f\u0633\u06cc \u0648 \u0633\u0627\u062e\u062a -->\r\n <div class=\"service-item\">\r\n <div class=\"service-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\" ry=\"2\"\/>\r\n <path d=\"M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>\u0645\u0647\u0646\u062f\u0633\u06cc \u0648 \u0633\u0627\u062e\u062a<\/h3>\r\n <p>\u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0639\u0638\u06cc\u0645 \u0639\u0645\u0631\u0627\u0646\u06cc \u0628\u0627 \u062a\u06cc\u0645\u200c\u0647\u0627\u06cc \u0645\u062a\u062e\u0635\u0635\u060c \u0645\u062a\u0631\u06cc\u0627\u0644 \u062f\u0631\u062c\u0647\u200c\u06cc\u06a9 \u0648 \u0646\u0638\u0627\u0631\u062a \u06f2\u06f4 \u0633\u0627\u0639\u062a\u0647 \u062f\u0631 \u0645\u062d\u0644.<\/p>\r\n <\/div>\r\n\r\n <!-- \u0633\u0631\u0648\u06cc\u0633 \u06f2: \u0637\u0631\u0627\u062d\u06cc \u0648 \u0627\u062c\u0631\u0627 -->\r\n <div class=\"service-item\">\r\n <div class=\"service-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/>\r\n <path d=\"M2 17l10 5 10-5\"\/>\r\n <path d=\"M2 12l10 5 10-5\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>\u0637\u0631\u0627\u062d\u06cc \u0648 \u0627\u062c\u0631\u0627<\/h3>\r\n <p>\u0628\u0647\u200c\u06a9\u0627\u0631\u06af\u06cc\u0631\u06cc \u0646\u0633\u0644 \u062c\u062f\u06cc\u062f \u0645\u062a\u0631\u06cc\u0627\u0644\u200c\u0647\u0627 \u0648 \u0631\u0648\u0634\u200c\u0647\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u062e\u0644\u0642 \u0633\u0627\u062e\u062a\u0645\u0627\u0646\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0627\u0632 \u0632\u0645\u0627\u0646 \u062c\u0644\u0648\u062a\u0631\u0646\u062f.<\/p>\r\n <\/div>\r\n\r\n <!-- \u0633\u0631\u0648\u06cc\u0633 \u06f3: \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0631\u0648\u0698\u0647 -->\r\n <div class=\"service-item\">\r\n <div class=\"service-icon\">\r\n <svg class=\"icon-svg\" viewBox=\"0 0 24 24\">\r\n <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/>\r\n <polyline points=\"14 2 14 8 20 8\"\/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/>\r\n <polyline points=\"10 9 9 9 8 9\"\/>\r\n <\/svg>\r\n <\/div>\r\n <h3>\u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0631\u0648\u0698\u0647<\/h3>\r\n <p>\u0645\u062f\u06cc\u0631\u06cc\u062a \u0647\u0648\u0634\u0645\u0646\u062f \u0632\u0645\u0627\u0646\u060c \u0647\u0632\u06cc\u0646\u0647 \u0648 \u0645\u0646\u0627\u0628\u0639\u061b \u067e\u0631\u0648\u0698\u0647 \u0634\u0645\u0627 \u062f\u0642\u06cc\u0642\u0627\u064b \u0633\u0631 \u0645\u0648\u0639\u062f \u0648 \u0628\u0627 \u0628\u0627\u0644\u0627\u062a\u0631\u06cc\u0646 \u06a9\u06cc\u0641\u06cc\u062a \u062a\u062d\u0648\u06cc\u0644 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ef87354 e-flex e-con-boxed e-con e-parent\" data-id=\"ef87354\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6aebd31 elementor-widget elementor-widget-html\" data-id=\"6aebd31\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fa\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Trust Section | Karen Farasakht<\/title>\r\n\r\n <style>\r\n \/* ============================================ *\/\r\n \/* \u067e\u0627\u0644\u062a \u0631\u0646\u06af\u06cc \u062c\u062f\u06cc\u062f *\/\r\n \/* ============================================ *\/\r\n :root {\r\n --midnight-navy: #071525;\r\n --deep-steel: #172635;\r\n --architectural-silver: #AEB7BF;\r\n --glass-white: #F4F6F7;\r\n --electric-blue: #3978FF;\r\n \r\n --bg-light: var(--glass-white);\r\n --bg-soft: #e8edf0;\r\n --text-dark: var(--midnight-navy);\r\n --text-gray: var(--architectural-silver);\r\n --border: #d0d7dd;\r\n --shadow: 0 10px 30px rgba(7, 21, 37, 0.08);\r\n --accent: var(--electric-blue);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* \u0641\u0648\u0646\u062a \u0648\u0632\u06cc\u0631\u0645\u062a\u0646 (\u06a9\u0627\u0645\u0644\u0627\u064b \u0644\u0648\u06a9\u0627\u0644) *\/\r\n \/* ============================================ *\/\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn'), local('Vazir'), local('Vazir-FD'), local('Vazirmatn-Regular');\r\n font-weight: 400;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-Bold'), local('Vazir-Bold'), local('Vazir-FD-Bold');\r\n font-weight: 700;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-ExtraBold'), local('Vazir-ExtraBold'), local('Vazir-FD-ExtraBold');\r\n font-weight: 900;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n body {\r\n font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;\r\n background-color: var(--glass-white);\r\n color: var(--midnight-navy);\r\n overflow-x: hidden;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* ===== \u062f\u0645\u0648 \u06a9\u0627\u0646\u062a\u0646\u062a ===== *\/\r\n .demo-info {\r\n padding: 40px 5%;\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background: var(--glass-white);\r\n }\r\n\r\n .demo-info h2 {\r\n font-size: 32px;\r\n margin-bottom: 15px;\r\n color: var(--midnight-navy);\r\n font-weight: 900;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info p {\r\n font-size: 16px;\r\n color: var(--deep-steel);\r\n line-height: 2;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info .highlight {\r\n color: var(--electric-blue);\r\n font-weight: 700;\r\n }\r\n\r\n .demo-info .badge {\r\n display: inline-block;\r\n background: var(--midnight-navy);\r\n color: var(--glass-white);\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n font-size: 13px;\r\n margin-top: 10px;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* SECTION: TRUST SECTION *\/\r\n \/* ============================================ *\/\r\n\r\n .trust-section {\r\n max-width: 1200px;\r\n margin: 80px auto;\r\n padding: 0 20px;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n .trust-text h2 {\r\n font-size: 36px;\r\n font-weight: 900;\r\n margin-bottom: 20px;\r\n color: var(--midnight-navy);\r\n font-family: 'Vazirmatn', sans-serif;\r\n line-height: 1.4;\r\n position: relative;\r\n }\r\n\r\n \/* ===== \u062e\u0637 \u0622\u06a9\u0646\u062a \u0632\u06cc\u0631 \u062a\u06cc\u062a\u0631 ===== *\/\r\n .trust-text h2::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n right: 0;\r\n width: 50px;\r\n height: 3px;\r\n background: var(--electric-blue);\r\n border-radius: 3px;\r\n }\r\n\r\n .trust-text p {\r\n color: var(--deep-steel);\r\n line-height: 2;\r\n margin-bottom: 30px;\r\n font-size: 16px;\r\n font-family: 'Vazirmatn', sans-serif;\r\n opacity: 0.85;\r\n margin-top: 25px;\r\n }\r\n\r\n .trust-text a {\r\n color: var(--electric-blue);\r\n text-decoration: none;\r\n font-weight: 700;\r\n font-family: 'Vazirmatn', sans-serif;\r\n font-size: 15px;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n transition: all 0.3s ease;\r\n border-bottom: 2px solid transparent;\r\n padding-bottom: 3px;\r\n }\r\n\r\n .trust-text a:hover {\r\n border-bottom-color: var(--electric-blue);\r\n transform: translateX(-5px);\r\n }\r\n\r\n .trust-text a .arrow-svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: none;\r\n stroke: var(--electric-blue);\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .trust-text a:hover .arrow-svg {\r\n transform: translateX(-5px);\r\n }\r\n\r\n \/* ===== \u062a\u0635\u0648\u06cc\u0631 ===== *\/\r\n .trust-image {\r\n position: relative;\r\n border-radius: 20px;\r\n overflow: hidden;\r\n border: 1px solid var(--border);\r\n box-shadow: var(--shadow);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .trust-image:hover {\r\n border-color: var(--electric-blue);\r\n box-shadow: 0 20px 50px rgba(7, 21, 37, 0.15);\r\n transform: translateY(-5px);\r\n }\r\n\r\n .trust-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .trust-image:hover img {\r\n transform: scale(1.03);\r\n }\r\n\r\n \/* ===== \u0628\u0631\u0686\u0633\u0628 \u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631 ===== *\/\r\n .trust-image .image-badge {\r\n position: absolute;\r\n bottom: 20px;\r\n right: 20px;\r\n background: rgba(7, 21, 37, 0.8);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n color: var(--glass-white);\r\n padding: 10px 20px;\r\n border-radius: 12px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n font-family: 'Vazirmatn', sans-serif;\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .trust-image .image-badge .badge-icon {\r\n width: 16px;\r\n height: 16px;\r\n fill: none;\r\n stroke: var(--electric-blue);\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* RESPONSIVE *\/\r\n \/* ============================================ *\/\r\n\r\n @media (max-width: 992px) {\r\n .trust-section {\r\n margin: 60px auto;\r\n gap: 40px;\r\n }\r\n\r\n .trust-text h2 {\r\n font-size: 30px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .trust-section {\r\n grid-template-columns: 1fr;\r\n gap: 35px;\r\n margin: 50px auto;\r\n padding: 0 20px;\r\n }\r\n\r\n .trust-text h2 {\r\n font-size: 26px;\r\n text-align: center;\r\n }\r\n\r\n .trust-text h2::after {\r\n right: 50%;\r\n transform: translateX(50%);\r\n }\r\n\r\n .trust-text p {\r\n text-align: center;\r\n font-size: 15px;\r\n }\r\n\r\n .trust-text a {\r\n justify-content: center;\r\n }\r\n\r\n .trust-text a:hover {\r\n transform: translateX(0) scale(1.02);\r\n }\r\n\r\n .trust-image .image-badge {\r\n bottom: 15px;\r\n right: 15px;\r\n padding: 8px 16px;\r\n font-size: 12px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .trust-section {\r\n margin: 40px auto;\r\n gap: 25px;\r\n }\r\n\r\n .trust-text h2 {\r\n font-size: 22px;\r\n }\r\n\r\n .trust-text h2::after {\r\n width: 35px;\r\n height: 2px;\r\n }\r\n\r\n .trust-text p {\r\n font-size: 14px;\r\n }\r\n\r\n .trust-text a {\r\n font-size: 14px;\r\n }\r\n\r\n .trust-image .image-badge {\r\n bottom: 12px;\r\n right: 12px;\r\n padding: 6px 14px;\r\n font-size: 11px;\r\n }\r\n\r\n .trust-image .image-badge .badge-icon {\r\n width: 14px;\r\n height: 14px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ============================================ -->\r\n <!-- SECTION: TRUST SECTION -->\r\n <!-- ============================================ -->\r\n\r\n <section class=\"trust-section\">\r\n <!-- \u0633\u0645\u062a \u0631\u0627\u0633\u062a: \u0645\u062a\u0646 -->\r\n <div class=\"trust-text\">\r\n <h2>\u0627\u0639\u062a\u0645\u0627\u062f\u060c \u0633\u062e\u062a\u200c\u062a\u0631\u06cc\u0646 \u0648 \u0627\u0631\u0632\u0634\u0645\u0646\u062f\u062a\u0631\u06cc\u0646 \u0645\u0635\u0627\u0644\u062d \u0627\u0633\u062a<\/h2>\r\n <p>\u0645\u0627 \u0628\u0647 \u06a9\u06cc\u0641\u06cc\u062a \u0648\u0633\u0648\u0627\u0633 \u062f\u0627\u0631\u06cc\u0645. \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc ISO\u060c \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0639\u062a\u0628\u0631 \u0628\u06cc\u0646\u200c\u0627\u0644\u0645\u0644\u0644\u06cc \u0648 \u0633\u0627\u0628\u0642\u0647\u200c\u0627\u06cc \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0627\u0641\u062a\u062e\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\u060c \u0646\u0634\u0627\u0646 \u0645\u06cc\u200c\u062f\u0647\u062f \u06a9\u0647 \u0646\u0627\u0645 \u06a9\u0627\u0631\u0646\u200c\u0641\u0631\u0627\u0633\u0627\u062e\u062a \u06cc\u0639\u0646\u06cc \u062a\u0636\u0645\u06cc\u0646 \u06a9\u06cc\u0641\u06cc\u062a. \u0634\u0645\u0627 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0647 \u0645\u0627 \u0628\u0633\u067e\u0627\u0631\u06cc\u062f\u060c \u0645\u0627 \u0627\u0645\u0636\u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u067e\u0627\u06cc \u0622\u0646 \u0645\u06cc\u200c\u0632\u0646\u06cc\u0645.<\/p>\r\n <a href=\"#\">\r\n \u0645\u0634\u0627\u0647\u062f\u0647 \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u0648 \u0627\u0641\u062a\u062e\u0627\u0631\u0627\u062a\r\n <svg class=\"arrow-svg\" viewBox=\"0 0 24 24\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\r\n <polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- \u0633\u0645\u062a \u0686\u067e: \u062a\u0635\u0648\u06cc\u0631 -->\r\n <div class=\"trust-image\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627 \u0648 \u0627\u0641\u062a\u062e\u0627\u0631\u0627\u062a\">\r\n \r\n <!-- \u0628\u0631\u0686\u0633\u0628 \u0631\u0648\u06cc \u062a\u0635\u0648\u06cc\u0631 -->\r\n <div class=\"image-badge\">\r\n <svg class=\"badge-icon\" viewBox=\"0 0 24 24\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/>\r\n <polyline points=\"9 12 11 14 15 10\"\/>\r\n <\/svg>\r\n \u06af\u0648\u0627\u0647\u06cc\u200c\u0646\u0627\u0645\u0647 ISO 9001\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3026e23 e-con-full e-flex e-con e-parent\" data-id=\"3026e23\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dcfdb9a elementor-widget elementor-widget-html\" data-id=\"dcfdb9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fa\" dir=\"rtl\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Projects Section | Karen Farasakht<\/title>\r\n\r\n <style>\r\n \/* ============================================ *\/\r\n \/* \u067e\u0627\u0644\u062a \u0631\u0646\u06af\u06cc \u062c\u062f\u06cc\u062f *\/\r\n \/* ============================================ *\/\r\n :root {\r\n --midnight-navy: #071525;\r\n --deep-steel: #172635;\r\n --architectural-silver: #AEB7BF;\r\n --glass-white: #F4F6F7;\r\n --electric-blue: #3978FF;\r\n \r\n --bg-light: var(--glass-white);\r\n --bg-soft: #e8edf0;\r\n --text-dark: var(--midnight-navy);\r\n --text-gray: var(--architectural-silver);\r\n --border: #d0d7dd;\r\n --shadow: 0 10px 30px rgba(7, 21, 37, 0.08);\r\n --accent: var(--electric-blue);\r\n }\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* \u0641\u0648\u0646\u062a \u0648\u0632\u06cc\u0631\u0645\u062a\u0646 (\u06a9\u0627\u0645\u0644\u0627\u064b \u0644\u0648\u06a9\u0627\u0644) *\/\r\n \/* ============================================ *\/\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn'), local('Vazir'), local('Vazir-FD'), local('Vazirmatn-Regular');\r\n font-weight: 400;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-Bold'), local('Vazir-Bold'), local('Vazir-FD-Bold');\r\n font-weight: 700;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n @font-face {\r\n font-family: 'Vazirmatn';\r\n src: local('Vazirmatn-ExtraBold'), local('Vazir-ExtraBold'), local('Vazir-FD-ExtraBold');\r\n font-weight: 900;\r\n font-style: normal;\r\n font-display: swap;\r\n }\r\n\r\n body {\r\n font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;\r\n background-color: var(--glass-white);\r\n color: var(--midnight-navy);\r\n overflow-x: hidden;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* ===== \u062f\u0645\u0648 \u06a9\u0627\u0646\u062a\u0646\u062a ===== *\/\r\n .demo-info {\r\n padding: 40px 5%;\r\n text-align: center;\r\n max-width: 800px;\r\n margin: 0 auto;\r\n background: var(--glass-white);\r\n }\r\n\r\n .demo-info h2 {\r\n font-size: 32px;\r\n margin-bottom: 15px;\r\n color: var(--midnight-navy);\r\n font-weight: 900;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info p {\r\n font-size: 16px;\r\n color: var(--deep-steel);\r\n line-height: 2;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .demo-info .highlight {\r\n color: var(--electric-blue);\r\n font-weight: 700;\r\n }\r\n\r\n .demo-info .badge {\r\n display: inline-block;\r\n background: var(--midnight-navy);\r\n color: var(--glass-white);\r\n padding: 4px 16px;\r\n border-radius: 20px;\r\n font-size: 13px;\r\n margin-top: 10px;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* SECTION: PROJECTS *\/\r\n \/* ============================================ *\/\r\n\r\n .projects-section {\r\n padding: 80px 5%;\r\n background: var(--bg-soft);\r\n border-top: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n }\r\n\r\n .projects-section h2 {\r\n text-align: center;\r\n font-size: 40px;\r\n font-weight: 900;\r\n margin-bottom: 60px;\r\n color: var(--midnight-navy);\r\n font-family: 'Vazirmatn', sans-serif;\r\n position: relative;\r\n }\r\n\r\n \/* ===== \u062e\u0637 \u0622\u06a9\u0646\u062a \u0632\u06cc\u0631 \u062a\u06cc\u062a\u0631 ===== *\/\r\n .projects-section h2::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -12px;\r\n right: 50%;\r\n transform: translateX(50%);\r\n width: 60px;\r\n height: 3px;\r\n background: var(--electric-blue);\r\n border-radius: 3px;\r\n }\r\n\r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n grid-auto-rows: 250px;\r\n gap: 15px;\r\n margin-bottom: 50px;\r\n max-width: 1200px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n \/* ===== \u06a9\u0627\u0631\u062a \u067e\u0631\u0648\u0698\u0647 ===== *\/\r\n .project-card {\r\n position: relative;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n cursor: pointer;\r\n border: 1px solid var(--border);\r\n transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n background: var(--deep-steel);\r\n }\r\n\r\n \/* ===== \u06a9\u0627\u0631\u062a \u0628\u0632\u0631\u06af (\u06f2 \u0633\u062a\u0648\u0646 \u0648 \u06f2 \u0631\u062f\u06cc\u0641) ===== *\/\r\n .project-card.big {\r\n grid-column: span 2;\r\n grid-row: span 2;\r\n }\r\n\r\n .project-card img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n filter: grayscale(30%);\r\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .project-card:hover img {\r\n filter: grayscale(0%);\r\n transform: scale(1.06);\r\n }\r\n\r\n .project-card:hover {\r\n border-color: var(--electric-blue);\r\n box-shadow: 0 15px 40px rgba(7, 21, 37, 0.15);\r\n transform: translateY(-5px);\r\n }\r\n\r\n \/* ===== \u0627\u0648\u0648\u0631\u0644\u06cc ===== *\/\r\n .project-overlay {\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n left: 0;\r\n background: linear-gradient(to top, rgba(7, 21, 37, 0.85), transparent);\r\n padding: 30px 25px 25px;\r\n opacity: 0;\r\n transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n\r\n .project-card:hover .project-overlay {\r\n opacity: 1;\r\n }\r\n\r\n .project-overlay h4 {\r\n color: var(--glass-white);\r\n font-size: 20px;\r\n font-weight: 700;\r\n margin-bottom: 5px;\r\n font-family: 'Vazirmatn', sans-serif;\r\n }\r\n\r\n .project-overlay p {\r\n color: var(--architectural-silver);\r\n font-size: 14px;\r\n font-family: 'Vazirmatn', sans-serif;\r\n opacity: 0.9;\r\n }\r\n\r\n \/* ===== \u062e\u0637 \u0622\u06a9\u0646\u062a \u0632\u06cc\u0631 \u0639\u0646\u0648\u0627\u0646 \u062f\u0631 \u0627\u0648\u0648\u0631\u0644\u06cc ===== *\/\r\n .project-overlay h4::after {\r\n content: '';\r\n display: block;\r\n width: 30px;\r\n height: 2px;\r\n background: var(--electric-blue);\r\n margin-top: 6px;\r\n border-radius: 2px;\r\n transition: width 0.4s ease;\r\n }\r\n\r\n .project-card:hover .project-overlay h4::after {\r\n width: 50px;\r\n }\r\n\r\n \/* ===== \u062f\u06a9\u0645\u0647 \u0645\u0631\u06a9\u0632\u06cc ===== *\/\r\n .projects-btn {\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n .projects-btn a {\r\n background: transparent;\r\n border: 2px solid var(--electric-blue);\r\n color: var(--electric-blue);\r\n padding: 14px 36px;\r\n text-decoration: none;\r\n border-radius: 50px;\r\n font-weight: 700;\r\n font-family: 'Vazirmatn', sans-serif;\r\n font-size: 16px;\r\n transition: all 0.3s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n\r\n .projects-btn a:hover {\r\n background: var(--electric-blue);\r\n color: var(--glass-white);\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 30px rgba(57, 120, 255, 0.3);\r\n }\r\n\r\n .projects-btn a .arrow-svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: none;\r\n stroke: currentColor;\r\n stroke-width: 2;\r\n stroke-linecap: round;\r\n stroke-linejoin: round;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .projects-btn a:hover .arrow-svg {\r\n transform: translateX(-5px);\r\n }\r\n\r\n \/* ============================================ *\/\r\n \/* RESPONSIVE *\/\r\n \/* ============================================ *\/\r\n\r\n @media (max-width: 992px) {\r\n .projects-section {\r\n padding: 60px 4%;\r\n }\r\n\r\n .projects-section h2 {\r\n font-size: 32px;\r\n margin-bottom: 40px;\r\n }\r\n\r\n .projects-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n grid-auto-rows: 220px;\r\n gap: 12px;\r\n }\r\n\r\n .project-card.big {\r\n grid-column: span 2;\r\n grid-row: span 2;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .projects-section {\r\n padding: 50px 4%;\r\n }\r\n\r\n .projects-section h2 {\r\n font-size: 28px;\r\n margin-bottom: 35px;\r\n }\r\n\r\n .projects-section h2::after {\r\n width: 40px;\r\n height: 2px;\r\n bottom: -10px;\r\n }\r\n\r\n .projects-grid {\r\n grid-template-columns: 1fr 1fr;\r\n grid-auto-rows: 180px;\r\n gap: 10px;\r\n margin-bottom: 35px;\r\n }\r\n\r\n .project-card.big {\r\n grid-column: span 2;\r\n grid-row: span 2;\r\n }\r\n\r\n .project-overlay {\r\n padding: 20px 18px 18px;\r\n }\r\n\r\n .project-overlay h4 {\r\n font-size: 17px;\r\n }\r\n\r\n .project-overlay p {\r\n font-size: 13px;\r\n }\r\n\r\n .projects-btn a {\r\n padding: 12px 28px;\r\n font-size: 15px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .projects-section {\r\n padding: 40px 4%;\r\n }\r\n\r\n .projects-section h2 {\r\n font-size: 24px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .projects-section h2::after {\r\n width: 30px;\r\n height: 2px;\r\n bottom: -8px;\r\n }\r\n\r\n .projects-grid {\r\n grid-template-columns: 1fr;\r\n grid-auto-rows: 200px;\r\n gap: 12px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .project-card.big {\r\n grid-column: span 1;\r\n grid-row: span 1;\r\n }\r\n\r\n .project-overlay {\r\n padding: 18px 16px 16px;\r\n }\r\n\r\n .project-overlay h4 {\r\n font-size: 16px;\r\n }\r\n\r\n .project-overlay p {\r\n font-size: 12px;\r\n }\r\n\r\n .project-overlay h4::after {\r\n width: 20px;\r\n height: 2px;\r\n }\r\n\r\n .project-card:hover .project-overlay h4::after {\r\n width: 35px;\r\n }\r\n\r\n .projects-btn a {\r\n padding: 10px 24px;\r\n font-size: 14px;\r\n }\r\n\r\n .projects-btn a .arrow-svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- ============================================ -->\r\n <!-- SECTION: PROJECTS -->\r\n <!-- ============================================ -->\r\n\r\n <section class=\"projects-section\">\r\n <h2>\u0627\u0645\u067e\u0631\u0627\u062a\u0648\u0631\u06cc \u0645\u0627 \u062f\u0631 \u06cc\u06a9 \u0646\u06af\u0627\u0647<\/h2>\r\n\r\n <div class=\"projects-grid\">\r\n <!-- \u067e\u0631\u0648\u0698\u0647 \u06f1: \u0628\u0631\u062c \u0622\u0633\u0645\u0627\u0646 (\u0628\u0632\u0631\u06af) -->\r\n <div class=\"project-card big\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u0628\u0631\u062c \u0622\u0633\u0645\u0627\u0646\">\r\n <div class=\"project-overlay\">\r\n <h4>\u0628\u0631\u062c \u0622\u0633\u0645\u0627\u0646<\/h4>\r\n <p>\u0628\u0644\u0646\u062f\u062a\u0631\u06cc\u0646 \u0628\u0631\u062c \u0645\u0633\u06a9\u0648\u0646\u06cc \u0647\u0648\u0634\u0645\u0646\u062f \u062a\u0647\u0631\u0627\u0646<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u067e\u0631\u0648\u0698\u0647 \u06f2: \u0645\u062c\u062a\u0645\u0639 \u067e\u0627\u0631\u0633 -->\r\n <div class=\"project-card\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u0645\u062c\u062a\u0645\u0639 \u067e\u0627\u0631\u0633\">\r\n <div class=\"project-overlay\">\r\n <h4>\u0645\u062c\u062a\u0645\u0639 \u067e\u0627\u0631\u0633<\/h4>\r\n <p>\u0642\u0637\u0628 \u062a\u062c\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0634\u06cc\u0631\u0627\u0632<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u067e\u0631\u0648\u0698\u0647 \u06f3: \u062f\u0641\u062a\u0631 \u0645\u0631\u06a9\u0632\u06cc -->\r\n <div class=\"project-card\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u062f\u0641\u062a\u0631 \u0645\u0631\u06a9\u0632\u06cc\">\r\n <div class=\"project-overlay\">\r\n <h4>\u062f\u0641\u062a\u0631 \u0645\u0631\u06a9\u0632\u06cc<\/h4>\r\n <p>\u0646\u0645\u0627\u062f \u0645\u0639\u0645\u0627\u0631\u06cc \u067e\u0627\u06cc\u062f\u0627\u0631 \u062f\u0631 \u0627\u0635\u0641\u0647\u0627\u0646<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u067e\u0631\u0648\u0698\u0647 \u06f4: \u0648\u06cc\u0644\u0627\u0647\u0627\u06cc \u0633\u0627\u062d\u0644\u06cc -->\r\n <div class=\"project-card\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u0648\u06cc\u0644\u0627\u0647\u0627\u06cc \u0633\u0627\u062d\u0644\u06cc\">\r\n <div class=\"project-overlay\">\r\n <h4>\u0648\u06cc\u0644\u0627\u0647\u0627\u06cc \u0633\u0627\u062d\u0644\u06cc<\/h4>\r\n <p>\u0644\u0648\u06a9\u0633\u200c\u062a\u0631\u06cc\u0646 \u0648\u06cc\u0644\u0627\u0647\u0627\u06cc \u062c\u0632\u06cc\u0631\u0647 \u06a9\u06cc\u0634<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u067e\u0631\u0648\u0698\u0647 \u06f5: \u0628\u0631\u062c \u0646\u064f\u0648\u0627 -->\r\n <div class=\"project-card\">\r\n <img decoding=\"async\" src=\"https:\/\/sitemelli.com\/wp-content\/uploads\/2026\/08\/diplomat-baran.webp\" alt=\"\u0628\u0631\u062c \u0646\u064f\u0648\u0627\">\r\n <div class=\"project-overlay\">\r\n <h4>\u0628\u0631\u062c \u0646\u064f\u0648\u0627<\/h4>\r\n <p>\u0646\u0645\u0627\u062f \u0647\u0648\u0634 \u0645\u0635\u0646\u0648\u0639\u06cc \u062f\u0631 \u0633\u0627\u062e\u062a\u0645\u0627\u0646\u200c\u0633\u0627\u0632\u06cc<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- \u062f\u06a9\u0645\u0647 \u0645\u0631\u06a9\u0632\u06cc -->\r\n <div class=\"projects-btn\">\r\n <a href=\"#\">\r\n \u062a\u0645\u0627\u0634\u0627\u06cc \u0647\u0645\u0647 \u0634\u0627\u0647\u06a9\u0627\u0631\u0647\u0627\r\n <svg class=\"arrow-svg\" viewBox=\"0 0 24 24\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\r\n <polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hero Slider | Karen Farasakht \u0645\u0627 \u0622\u06cc\u0646\u062f\u0647 \u0631\u0627\u0628\u062a\u0646\u200c\u0631\u06cc\u0632\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0627\u0632 \u0627\u06cc\u062f\u0647 \u062a\u0627 \u0648\u0627\u0642\u0639\u06cc\u062a\u061b \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u062c\u0647\u0627\u0646\u06cc \u0645\u0639\u0645\u0627\u0631\u06cc \u062f\u0631 \u062e\u0627\u06a9 \u0627\u06cc\u0631\u0627\u0646. \u0648\u0631\u0648\u062f \u0628\u0647 \u062f\u0646\u06cc\u0627\u06cc \u06a9\u0627\u0631\u0646\u200c\u0641\u0631\u0627\u0633\u0627\u062e\u062a \u276e \u276f Intro Cards | Karen Farasakht \u0645\u0639\u0645\u0627\u0631\u06cc \u0637\u0631\u0627\u062d\u06cc\u060c \u062f\u06cc\u06af\u0631 \u0641\u0642\u0637 \u0631\u0633\u0645 \u062e\u0637 \u0646\u06cc\u0633\u062a\u061b \u062e\u0644\u0642 \u0641\u0636\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0632\u0646\u062f\u06af\u06cc \u0627\u0646\u0633\u0627\u0646\u200c\u0647\u0627 \u0631\u0627 \u0645\u062a\u062d\u0648\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f. \u062a\u06cc\u0645 \u0645\u0627 \u0628\u0627 \u0627\u0644\u0647\u0627\u0645 \u0627\u0632 \u0645\u0639\u0645\u0627\u0631\u06cc \u067e\u0627\u06cc\u062f\u0627\u0631 \u0648 \u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc\u200c\u0647\u0627\u06cc […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/karenfarasakht.ir\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/karenfarasakht.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/karenfarasakht.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/karenfarasakht.ir\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/karenfarasakht.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":15,"href":"https:\/\/karenfarasakht.ir\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":60,"href":"https:\/\/karenfarasakht.ir\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/60"}],"wp:attachment":[{"href":"https:\/\/karenfarasakht.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}