{"id":1155,"date":"2025-07-05T14:37:00","date_gmt":"2025-07-05T14:37:00","guid":{"rendered":"https:\/\/websavant.ir\/skill\/theme-skill\/?page_id=1155"},"modified":"2025-11-27T13:08:25","modified_gmt":"2025-11-27T13:08:25","slug":"demo-developer","status":"publish","type":"page","link":"https:\/\/websavant.ir\/skill\/theme-skill\/demo-developer\/","title":{"rendered":"\u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1155\" class=\"elementor elementor-1155\">\n\t\t\t\t<div class=\"elementor-element elementor-element-894beab e-flex e-con-boxed e-con e-parent\" data-id=\"894beab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-eaac1fb e-con-full e-flex e-con e-child\" data-id=\"eaac1fb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5379306 elementor-widget elementor-widget-skill_instagram_stories\" data-id=\"5379306\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_instagram_stories.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t            <div class=\"skill-instagram-stories\">\r\n                                <div class=\"stories-wrapper\">\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;794b8ca&quot;,&quot;story_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u0642\\u0627\\u0644\\u0628 \\u0648\\u0631\\u062f\\u067e\\u0631\\u0633\\u06cc \\u0645\\u0647\\u0627\\u0631\\u062a&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;image&quot;,&quot;content_duration&quot;:10,&quot;_id&quot;:&quot;6a1cd68&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Black-Business-Webinar-Instagram-Story-1.jpg&quot;,&quot;id&quot;:3937,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_link&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/&quot;,&quot;is_external&quot;:&quot;on&quot;,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;}},{&quot;_id&quot;:&quot;fba7763&quot;,&quot;content_type&quot;:&quot;video&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Black-and-Grey-Modern-Minimalist-Happy-Monday-Instagram-Story.mp4&quot;,&quot;id&quot;:4002,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:5,&quot;content_link&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/&quot;,&quot;is_external&quot;:&quot;on&quot;,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;}}],&quot;activeItemIndex&quot;:1,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Frame-96.png&quot;,&quot;id&quot;:3968,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;}}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/Frame-96.png\" alt=\"\u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633\u06cc \u0645\u0647\u0627\u0631\u062a\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633\u06cc \u0645\u0647\u0627\u0631\u062a<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;76601c5&quot;,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Ellipse-25.png&quot;,&quot;id&quot;:4511,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u0634\\u0631\\u0648\\u0639 \\u06cc\\u0627\\u062f\\u06af\\u06cc\\u0631\\u06cc&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/2025-09-04_21-03-40.png&quot;,&quot;id&quot;:4512,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:10,&quot;content_link&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/demo-developer\\\/#contact&quot;,&quot;is_external&quot;:&quot;on&quot;,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;9da99c3&quot;}],&quot;activeItemIndex&quot;:1}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/Ellipse-25.png\" alt=\"\u0634\u0631\u0648\u0639 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u0634\u0631\u0648\u0639 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;c7c7d76&quot;,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/image-rasanika.com_.png&quot;,&quot;id&quot;:4552,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u0628\\u0647 \\u0648\\u0642\\u062a \\u0622\\u0645\\u0648\\u0632\\u0634 \\u0647\\u0627\\u06cc \\u062c\\u0630\\u0627\\u0628&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;video&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/jsmagic_csspower_htmlcraft_webtricks_frontendlove_devflow.mp4&quot;,&quot;id&quot;:4554,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:17,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;6df78cd&quot;},{&quot;_id&quot;:&quot;3ced47b&quot;,&quot;content_type&quot;:&quot;video&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/cleanjavascript_frontendfocus_htmlcssjs_frontendworld_webdevdaily-1.mp4&quot;,&quot;id&quot;:4555,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:17,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;}}],&quot;activeItemIndex&quot;:1}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/image-rasanika.com_.png\" alt=\"\u0628\u0647 \u0648\u0642\u062a \u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc \u062c\u0630\u0627\u0628\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u0628\u0647 \u0648\u0642\u062a \u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc \u062c\u0630\u0627\u0628<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;8231e97&quot;,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Frame-101-3.png&quot;,&quot;id&quot;:4467,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u062f\\u0631\\u0628\\u0627\\u0631\\u0647 \\u0645\\u0646&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/2025-09-04_22-39-19.png&quot;,&quot;id&quot;:4516,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:5,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;9da99c3&quot;},{&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/2025-09-04_22-47-19.png&quot;,&quot;id&quot;:4523,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:5,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;5c744f6&quot;}],&quot;activeItemIndex&quot;:1}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/Frame-101-3.png\" alt=\"\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;e1fb44b&quot;,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Frame-101-5.png&quot;,&quot;id&quot;:4556,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u0637\\u0646\\u0632\\u0647\\u0627\\u06cc \\u0628\\u0631\\u0646\\u0627\\u0645\\u0647 \\u0646\\u0648\\u06cc\\u0633\\u06cc&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;video&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Relatable-enough-codinglife-coding.mp4&quot;,&quot;id&quot;:4557,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:7,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;6df78cd&quot;},{&quot;content_type&quot;:&quot;video&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/The_hint_is_clear_to_those_who_understand\\u0938\\u092e\\u091d\\u0928\\u0947\\u0935\\u093e\\u0932\\u0947_\\u0915\\u094b_\\u0907\\u0936\\u093e\\u0930\\u093e_coffe.mp4&quot;,&quot;id&quot;:4558,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:5,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;ab039cc&quot;}],&quot;activeItemIndex&quot;:1}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/Frame-101-5.png\" alt=\"\u0637\u0646\u0632\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u0637\u0646\u0632\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;6096812&quot;,&quot;story_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u0645\\u062d\\u06cc\\u0637 \\u06a9\\u0627\\u0631\\u06cc \\u062c\\u062f\\u06cc\\u062f \\u0645\\u0646&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;video&quot;,&quot;content_duration&quot;:10,&quot;_id&quot;:&quot;6a1cd68&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/dthg2-olgha.m4v&quot;,&quot;id&quot;:3991,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;}}],&quot;activeItemIndex&quot;:1,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Frame-97.png&quot;,&quot;id&quot;:3987,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;}}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/Frame-97.png\" alt=\"\u0645\u062d\u06cc\u0637 \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0645\u0646\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u0645\u062d\u06cc\u0637 \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0645\u0646<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;3927464&quot;,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Frame-101-4.png&quot;,&quot;id&quot;:4527,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u0646\\u0645\\u0648\\u0646\\u0647 \\u06a9\\u062f\\u0647\\u0627\\u06cc \\u0632\\u062f\\u0647 \\u0634\\u062f\\u0647&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/coode.png&quot;,&quot;id&quot;:4529,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:10,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;9da99c3&quot;},{&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/code.png&quot;,&quot;id&quot;:4530,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:10,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;0fe109b&quot;}],&quot;activeItemIndex&quot;:1}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/Frame-101-4.png\" alt=\"\u0646\u0645\u0648\u0646\u0647 \u06a9\u062f\u0647\u0627\u06cc \u0632\u062f\u0647 \u0634\u062f\u0647\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u0646\u0645\u0648\u0646\u0647 \u06a9\u062f\u0647\u0627\u06cc \u0632\u062f\u0647 \u0634\u062f\u0647<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;0f42834&quot;,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Frame-101.png&quot;,&quot;id&quot;:4426,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u0633\\u0648\\u067e\\u0631\\u0627\\u06cc\\u0632 \\u062f\\u0645\\u0648\\u06cc \\u062c\\u062f\\u06cc\\u062f \\u0642\\u0627\\u0644\\u0628 \\u0645\\u0647\\u0627\\u0631\\u062a \\u0628\\u0647 \\u0632\\u0648\\u062f\\u06cc&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/new-demo.png&quot;,&quot;id&quot;:4425,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:10,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;0b5903c&quot;}],&quot;activeItemIndex&quot;:1}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/Frame-101.png\" alt=\"\u0633\u0648\u067e\u0631\u0627\u06cc\u0632 \u062f\u0645\u0648\u06cc \u062c\u062f\u06cc\u062f \u0642\u0627\u0644\u0628 \u0645\u0647\u0627\u0631\u062a \u0628\u0647 \u0632\u0648\u062f\u06cc\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u0633\u0648\u067e\u0631\u0627\u06cc\u0632 \u062f\u0645\u0648\u06cc \u062c\u062f\u06cc\u062f \u0642\u0627\u0644\u0628 \u0645\u0647\u0627\u0631\u062a \u0628\u0647 \u0632\u0648\u062f\u06cc<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;01dceb7&quot;,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Frame-101-1.png&quot;,&quot;id&quot;:4437,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u067e\\u0631\\u0648\\u0698\\u0647 \\u062c\\u062f\\u06cc\\u062f \\u0631\\u0648 \\u0645\\u0634\\u0627\\u0647\\u062f\\u0647 \\u06a9\\u0646\\u06cc\\u062f&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;video&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Grey-Black-Modern-Website-Laptop-Mockup-Instagram-Story.mp4&quot;,&quot;id&quot;:4439,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:8,&quot;content_link&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/project\\\/project-demo-developer\\\/&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;0b5903c&quot;}],&quot;activeItemIndex&quot;:1}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/Frame-101-1.png\" alt=\"\u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0631\u0648 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0631\u0648 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;23a6148&quot;,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Frame-101-2.png&quot;,&quot;id&quot;:4456,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u0646\\u0638\\u0631\\u0627\\u062a \\u0647\\u0645\\u0631\\u0627\\u0647\\u0627\\u0646 \\u0639\\u0632\\u06cc\\u0632\\u0645&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/2025-09-03_19-34-05.png&quot;,&quot;id&quot;:4458,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:10,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;1def373&quot;},{&quot;_id&quot;:&quot;ecebcb0&quot;,&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/2025-09-03_19-24-53.png&quot;,&quot;id&quot;:4457,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:10,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;}},{&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/2025-09-03_19-43-23.png&quot;,&quot;id&quot;:4462,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:10,&quot;content_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:false,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;9cef798&quot;}],&quot;activeItemIndex&quot;:1}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/Frame-101-2.png\" alt=\"\u0646\u0638\u0631\u0627\u062a \u0647\u0645\u0631\u0627\u0647\u0627\u0646 \u0639\u0632\u06cc\u0632\u0645\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u0646\u0638\u0631\u0627\u062a \u0647\u0645\u0631\u0627\u0647\u0627\u0646 \u0639\u0632\u06cc\u0632\u0645<\/span>\r\n                        <\/div>\r\n                                            <div class=\"story-item\" data-story='{&quot;_id&quot;:&quot;4991a4e&quot;,&quot;profile_image&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Frame-101-3.png&quot;,&quot;id&quot;:4467,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;story_title&quot;:&quot;\\u0647\\u0631\\u0622\\u0646\\u0686\\u0647 \\u062f\\u0631 \\u0630\\u0647\\u0646 \\u062f\\u0627\\u0631\\u06cc \\u0627\\u0632 \\u0645\\u0646 \\u0628\\u067e\\u0631\\u0633&quot;,&quot;story_content_items&quot;:[{&quot;content_type&quot;:&quot;image&quot;,&quot;content_media&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/2025-09-03_20-15-33.png&quot;,&quot;id&quot;:4466,&quot;size&quot;:&quot;&quot;,&quot;alt&quot;:&quot;&quot;,&quot;source&quot;:&quot;library&quot;},&quot;content_duration&quot;:8,&quot;content_link&quot;:{&quot;url&quot;:&quot;https:\\\/\\\/websavant.ir\\\/skill\\\/theme-skill\\\/demo-developer\\\/#contact&quot;,&quot;is_external&quot;:&quot;on&quot;,&quot;nofollow&quot;:false,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;1def373&quot;}],&quot;activeItemIndex&quot;:1}'>\r\n                            <div class=\"story-thumbnail\">\r\n                                                                <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/Frame-101-3.png\" alt=\"\u0647\u0631\u0622\u0646\u0686\u0647 \u062f\u0631 \u0630\u0647\u0646 \u062f\u0627\u0631\u06cc \u0627\u0632 \u0645\u0646 \u0628\u067e\u0631\u0633\">\r\n                            <\/div>\r\n                            <span class=\"story-title\">\u0647\u0631\u0622\u0646\u0686\u0647 \u062f\u0631 \u0630\u0647\u0646 \u062f\u0627\u0631\u06cc \u0627\u0632 \u0645\u0646 \u0628\u067e\u0631\u0633<\/span>\r\n                        <\/div>\r\n                                    <\/div>\r\n                <div class=\"story-popup\">\r\n                    <span class=\"close-popup\">&times;<\/span>\r\n                    <div class=\"story-header\">\r\n                        <div class=\"story-profile-info\">\r\n                            <div class=\"story-profile-image\">\r\n                                <img decoding=\"async\" src=\"\" alt=\"Profile\" class=\"header-profile-img\">\r\n                            <\/div>\r\n                            <span class=\"story-profile-name\"><\/span>\r\n                        <\/div>\r\n                        <div class=\"story-progress-bars\">\r\n                            <div class=\"progress-bar\"><div class=\"progress-fill\" data-index=\"0\"><\/div><\/div>\r\n                        <\/div>\r\n                        <div class=\"story-time\">\u0627\u06a9\u0646\u0648\u0646<\/div>\r\n                    <\/div>\r\n                    <div class=\"story-content\">\r\n                    <\/div>\r\n                    <div class=\"story-title-overlay\" aria-hidden=\"true\"><\/div>\r\n                                        <div class=\"story-share\">\r\n                        <div class=\"like-and-share\">\r\n                                                            <button type=\"button\" class=\"like-toggle\" aria-pressed=\"false\" title=\"\u067e\u0633\u0646\u062f\u06cc\u062f\u0646\"><\/button>\r\n                                <span class=\"like-count\" aria-live=\"polite\" title=\"\u062a\u0639\u062f\u0627\u062f \u0644\u0627\u06cc\u06a9\">0<\/span>\r\n                                                                                        <button type=\"button\" class=\"share-toggle\">\u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc<\/button>\r\n                                                    <\/div>\r\n                                                <div class=\"share-menu\" aria-hidden=\"true\">\r\n                            <a href=\"#\" class=\"share-icon share-telegram\" title=\"\u062a\u0644\u06af\u0631\u0627\u0645\" target=\"_blank\" rel=\"nofollow noopener\"><\/a>\r\n                            <a href=\"#\" class=\"share-icon share-whatsapp\" title=\"\u0648\u0627\u062a\u0633\u0627\u067e\" target=\"_blank\" rel=\"nofollow noopener\"><\/a>\r\n                        <\/div>\r\n                                            <\/div>\r\n                                        <div class=\"story-right-area\"><\/div>\r\n                    <div class=\"story-left-area\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <style>\r\n                \/* --- Instagram Stories Styles --- *\/\r\n                .skill-instagram-stories {\r\n                    position: relative;\r\n                    width: 100%;\r\n                }\r\n                .stories-wrapper {\r\n                    display: flex;\r\n                    gap: 22px;\r\n                    overflow-x: auto;\r\n                    padding: 10px;\r\n                    scrollbar-width: none;\r\n                }\r\n                .stories-wrapper::-webkit-scrollbar {\r\n                    display: none;\r\n                }\r\n                .story-item {\r\n                    text-align: center;\r\n                    cursor: pointer;\r\n                    flex-shrink: 0;\r\n                }\r\n                .story-thumbnail {\r\n                    width: 88px;\r\n                    height: 88px;\r\n                    border-radius: 50%;\r\n                    overflow: hidden;\r\n                    border: 3px solid transparent;\r\n                    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);\r\n                    background-clip: padding-box;\r\n                    padding: 3px;\r\n                    margin: 0 auto 5px;\r\n                }\r\n                .story-thumbnail img {\r\n                    width: 100%;\r\n                    height: 100%;\r\n                    object-fit: cover;\r\n                    border-radius: 50%;\r\n                }\r\n                .story-title {\r\n                    font-size: 16px;\r\n                    display: block;\r\n                    color: #333333; \/* Default color, will be overridden by Elementor control *\/\r\n                    transition: color 0.3s ease;\r\n                    max-width: 100px;\r\n                    overflow: hidden;\r\n                    text-overflow: ellipsis;\r\n                    white-space: nowrap;\r\n                }\r\n                .story-popup {\r\n                    display: none;\r\n                    position: fixed;\r\n                    top: 0;\r\n                    left: 0;\r\n                    width: 100%;\r\n                    height: 100%;\r\n                    background: rgba(0,0,0,0.8);\r\n                    justify-content: center;\r\n                    align-items: center;\r\n                    z-index: 9999;\r\n                    flex-direction: column;\r\n                }\r\n                .story-popup.active {\r\n                    display: flex;\r\n                }\r\n                .story-content {\r\n                    max-width: 100%;\r\n                    max-height: 100%;\r\n                    position: relative;\r\n                    border-radius: 10px;\r\n                    overflow: hidden;\r\n                    cursor: pointer;\r\n                }\r\n                .story-content img, .story-content video {\r\n                    max-width: 100%;\r\n                    max-height: 100%;\r\n                    border-radius: 10px;\r\n                    width: 375px;\r\n                    height: 667px;\r\n                    object-fit: cover;\r\n                    display: block;\r\n                }\r\n                .story-content a {\r\n                    display: block;\r\n                    text-decoration: none;\r\n                    color: inherit;\r\n                }\r\n                .story-content a:hover {\r\n                    opacity: 0.9;\r\n                }\r\n                .story-title-overlay {\r\n                    position: absolute;\r\n                    top: 50%;\r\n                    left: 50%;\r\n                    transform: translate(-50%, -50%);\r\n                    color: #fff;\r\n                    font-size: 22px;\r\n                    font-weight: 700;\r\n                    text-align: center;\r\n                    padding: 10px 16px;\r\n                    border-radius: 10px;\r\n                    background: rgba(0,0,0,0.35);\r\n                    backdrop-filter: blur(3px);\r\n                    opacity: 0;\r\n                    pointer-events: none;\r\n                    transition: opacity 400ms ease;\r\n                    z-index: 10002;\r\n                    max-width: 80vw;\r\n                    white-space: nowrap;\r\n                    overflow: hidden;\r\n                    text-overflow: ellipsis;\r\n                }\r\n                .story-title-overlay.active { opacity: 1; }\r\n                .story-share {\r\n                    position: absolute;\r\n                    bottom: 20px;\r\n                    left: 50%;\r\n                    transform: translateX(-50%);\r\n                    display: flex;\r\n                    flex-direction: column-reverse;\r\n                    align-items: center;\r\n                    gap: 10px;\r\n                    z-index: 10001;\r\n                }\r\n                .like-and-share { display: flex; gap: 8px; align-items: center; }\r\n                .like-toggle {\r\n                    width: 40px;\r\n                    height: 40px;\r\n                    border-radius: 50%;\r\n                    border: none;\r\n                    cursor: pointer;\r\n                    background: rgba(0,0,0,0.5);\r\n                    backdrop-filter: blur(4px);\r\n                    position: relative;\r\n                }\r\n                .like-toggle::before{\r\n                    content: '';\r\n                    position: absolute;\r\n                    top: 50%;\r\n                    left: 50%;\r\n                    width: 22px;\r\n                    height: 22px;\r\n                    transform: translate(-50%, -50%);\r\n                    background-repeat: no-repeat;\r\n                    background-position: center;\r\n                    background-size: contain;\r\n                    background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z\"\/><\/svg>');\r\n                }\r\n                .like-toggle.liked { background: rgba(255,255,255,0.15); }\r\n                .like-toggle.liked::before{\r\n                    background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"%23ff2d55\" d=\"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41.81 4.5 2.09C12.09 4.81 13.76 4 15.5 4 18 4 20 6 20 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z\"\/><\/svg>');\r\n                }\r\n                .like-count {\r\n                    color: #fff;\r\n                    font-size: 13px;\r\n                    min-width: 22px;\r\n                    text-align: center;\r\n                    background: rgba(255,255,255,0.15);\r\n                    padding: 6px 10px;\r\n                    border-radius: 999px;\r\n                    line-height: 1;\r\n                    user-select: none;\r\n                }\r\n                .share-toggle {\r\n                    background: rgba(0,0,0,0.5);\r\n                    color: #fff;\r\n                    border: none;\r\n                    border-radius: 999px;\r\n                    padding: 8px 14px;\r\n                    font-size: 13px;\r\n                    cursor: pointer;\r\n                    backdrop-filter: blur(4px);\r\n                }\r\n                .share-menu {\r\n                    display: none;\r\n                    background: rgba(0,0,0,0.6);\r\n                    padding: 8px 10px;\r\n                    border-radius: 12px;\r\n                    display: none;\r\n                    gap: 10px;\r\n                }\r\n                .story-share.open .share-menu { display: flex; }\r\n                .share-icon {\r\n                    width: 40px;\r\n                    height: 40px;\r\n                    border-radius: 50%;\r\n                    display: inline-block;\r\n                    background-position: center;\r\n                    background-repeat: no-repeat;\r\n                    background-size: 22px 22px;\r\n                }\r\n                .share-telegram { background-color: #229ED9; background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 240 240\" fill=\"white\"><path d=\"M120 0C53.8 0 0 53.8 0 120s53.8 120 120 120 120-53.8 120-120S186.2 0 120 0zm58.7 80.6l-19.9 94.1c-1.5 6.5-5.3 8.1-10.7 5l-29.6-21.8-14.3 13.8c-1.6 1.6-3 3-6.1 3l2.2-31.6 57.5-51.9c2.5-2.2-.5-3.5-3.9-1.2l-71 44.7-30.6-9.6c-6.6-2.1-6.7-6.6 1.4-9.8l119.5-46.1c5.5-2 10.3 1.3 8.6 9.4z\"\/><\/svg>'); }\r\n                .share-whatsapp { background-color: #25D366; background-image: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 32 32\" fill=\"white\"><path d=\"M19.11 17.41c-.27-.14-1.6-.79-1.85-.88-.25-.09-.43-.14-.62.14-.19.27-.71.88-.87 1.06-.16.18-.32.2-.59.07-.27-.14-1.14-.42-2.18-1.33-.81-.72-1.36-1.6-1.52-1.87-.16-.27-.02-.42.12-.56.12-.12.27-.32.41-.48.14-.16.18-.27.27-.45.09-.18.05-.34-.02-.48-.07-.14-.62-1.5-.85-2.05-.22-.53-.45-.45-.62-.46l-.53-.01c-.18 0-.48.07-.73.34-.25.27-.96.94-.96 2.29s.98 2.66 1.12 2.84c.14.18 1.93 2.95 4.68 4.14.65.28 1.15.45 1.54.58.65.2 1.24.17 1.71.1.52-.08 1.6-.65 1.83-1.28.23-.63.23-1.18.16-1.28-.07-.1-.25-.16-.52-.29z\"\/><path d=\"M26.64 5.36A12.7 12.7 0 0 0 16 1.33C8.94 1.33 3.2 7.07 3.2 14.13c0 2.3.62 4.45 1.7 6.3L3 30.67l10.47-1.9c1.77.97 3.8 1.52 5.97 1.52 7.06 0 12.8-5.74 12.8-12.8 0-3.41-1.36-6.58-3.6-8.93zM16 28c-2.03 0-3.92-.62-5.49-1.68l-.39-.25-6.13 1.11 1.16-5.99-.26-.41a11.33 11.33 0 1 1 11.11 7.22z\"\/><\/svg>'); }\r\n                .story-header {\r\n                    position: absolute;\r\n                    top: 20px;\r\n                    left: 20px;\r\n                    right: 20px;\r\n                    display: flex;\r\n                    justify-content: space-between;\r\n                    align-items: center;\r\n                    z-index: 10000;\r\n                }\r\n                .story-profile-info {\r\n                    display: flex;\r\n                    align-items: center;\r\n                    gap: 12px;\r\n                }\r\n                .story-profile-image {\r\n                    width: 40px;\r\n                    height: 40px;\r\n                    border-radius: 50%;\r\n                    overflow: hidden;\r\n                    border: 2px solid #fff;\r\n                }\r\n                .story-profile-image img {\r\n                    width: 100%;\r\n                    height: 100%;\r\n                    object-fit: cover;\r\n                }\r\n                .story-profile-name {\r\n                    color: #fff;\r\n                    font-weight: 600;\r\n                    font-size: 16px;\r\n                }\r\n                .story-progress-bars {\r\n                    display: flex;\r\n                    gap: 3px;\r\n                    flex: 1;\r\n                    margin: 0 20px;\r\n                }\r\n                .story-time {\r\n                    color: rgba(255,255,255,0.8);\r\n                    font-size: 14px;\r\n                    white-space: nowrap;\r\n                }\r\n                .progress-bar {\r\n                    flex: 1;\r\n                    height: 2px;\r\n                    background: rgba(255,255,255,0.3);\r\n                    border-radius: 2px;\r\n                    overflow: hidden;\r\n                    margin: 0 1px;\r\n                    min-width: 20px;\r\n                }\r\n                .progress-fill {\r\n                    height: 100%;\r\n                    background: #fff;\r\n                    width: 0%;\r\n                    transition: width linear;\r\n                    border-radius: 2px;\r\n                }\r\n                .close-popup {\r\n                    position: absolute;\r\n                    top: -5px;\r\n                    right: 5px;\r\n                    font-size: 40px;\r\n                    color: #fff;\r\n                    cursor: pointer;\r\n                    z-index: 10001;\r\n                }\r\n                .story-left-area, .story-right-area {\r\n                    position: absolute;\r\n                    top: 0;\r\n                    width: 50%;\r\n                    height: 100%;\r\n                    cursor: pointer;\r\n                    z-index: 10000;\r\n                }\r\n                .story-left-area {\r\n                    right: -90px;\r\n                }\r\n                .story-right-area {\r\n                    left: -90px;\r\n                }\r\n\r\n                \/* --- Responsive Styles --- *\/\r\n                \r\n                \/* Tablet Styles *\/\r\n                @media (max-width: 768px) {\r\n                    .stories-wrapper {\r\n                        gap: 12px;\r\n                        padding: 8px;\r\n                    }\r\n                    .story-thumbnail {\r\n                        width: 72px;\r\n                        height: 72px;\r\n                    }\r\n                    .story-title {\r\n                        font-size: 13px;\r\n                        max-width: 85px;\r\n                    }\r\n                    .story-content img, .story-content video {\r\n                        width: 320px;\r\n                        height: 568px;\r\n                    }\r\n                    .story-header {\r\n                        top: 15px;\r\n                        left: 15px;\r\n                        right: 15px;\r\n                        padding: 12px 15px;\r\n                    }\r\n                    .story-profile-image {\r\n                        width: 35px;\r\n                        height: 35px;\r\n                    }\r\n                    .story-profile-name {\r\n                        font-size: 14px;\r\n                    }\r\n                    .story-time {\r\n                        font-size: 12px;\r\n                    }\r\n                    .close-popup {\r\n                        top: 0;\r\n                        right: -7px;\r\n                        font-size: 35px;\r\n                    }\r\n                }\r\n\r\n                \/* Mobile Styles *\/\r\n                @media (max-width: 480px) {\r\n                    .stories-wrapper {\r\n                        gap: 10px;\r\n                        padding: 6px;\r\n                    }\r\n                    .story-thumbnail {\r\n                        width: 60px;\r\n                        height: 60px;\r\n                    }\r\n                    .story-title {\r\n                        font-size: 12px;\r\n                        max-width: 75px;\r\n                    }\r\n                    .story-content img, .story-content video {\r\n                        width: 280px;\r\n                        height: 497px;\r\n                    }\r\n                    .story-share { bottom: 12px; gap: 8px; }\r\n                    .story-header {\r\n                        top: 10px;\r\n                        left: 10px;\r\n                        right: 10px;\r\n                        padding: 10px 12px;\r\n                        flex-direction: column;\r\n                        gap: 8px;\r\n                        align-items: center;\r\n                    }\r\n                    .story-left-area {\r\n                        right: -60px;\r\n                    }\r\n                    .story-right-area {\r\n                        left: -60px;\r\n                    }\r\n                    .story-profile-info {\r\n                        gap: 8px;\r\n                    }\r\n                    .story-profile-image {\r\n                        width: 30px;\r\n                        height: 30px;\r\n                    }\r\n                    .story-profile-name {\r\n                        font-size: 13px;\r\n                    }\r\n                    .story-progress-bars {\r\n                        margin: 0;\r\n                        width: 100%;\r\n                        order: 2;\r\n                    }\r\n                    .story-time {\r\n                        font-size: 11px;\r\n                        order: 3;\r\n                    }\r\n                    .close-popup {\r\n                        top: 5px;\r\n                        right: 15px;\r\n                        font-size: 30px;\r\n                    }\r\n                    .story-left-area, .story-right-area {\r\n                        width: 40%;\r\n                    }\r\n                }\r\n\r\n                \/* Small Mobile Styles *\/\r\n                @media (max-width: 360px) {\r\n                    .stories-wrapper {\r\n                        gap: 8px;\r\n                        padding: 5px;\r\n                    }\r\n                    .story-thumbnail {\r\n                        width: 52px;\r\n                        height: 52px;\r\n                    }\r\n                    .story-title {\r\n                        font-size: 11px;\r\n                        max-width: 65px;\r\n                    }\r\n                    .story-content img, .story-content video {\r\n                        width: 250px;\r\n                        height: 444px;\r\n                    }\r\n                    .story-header {\r\n                        top: 8px;\r\n                        left: 8px;\r\n                        right: 8px;\r\n                        padding: 8px 10px;\r\n                    }\r\n                    .story-profile-image {\r\n                        width: 28px;\r\n                        height: 28px;\r\n                    }\r\n                    .story-profile-name {\r\n                        font-size: 12px;\r\n                    }\r\n                    .story-time {\r\n                        font-size: 10px;\r\n                    }\r\n                    .close-popup {\r\n                        top: 3px;\r\n                        right: 12px;\r\n                        font-size: 28px;\r\n                    }\r\n                }\r\n\r\n                \/* Landscape Mobile Styles *\/\r\n                @media (max-width: 768px) and (orientation: landscape) {\r\n                    .story-header {\r\n                        top: 10px;\r\n                        left: 10px;\r\n                        right: 10px;\r\n                        padding: 8px 15px;\r\n                    }\r\n                }\r\n\r\n                \/* High DPI Displays *\/\r\n                @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\r\n                    .story-thumbnail {\r\n                        border-width: 2px;\r\n                    }\r\n                    .story-profile-image {\r\n                        border-width: 1px;\r\n                    }\r\n                }\r\n\r\n                \/* Body scroll lock for mobile *\/\r\n                body.story-open {\r\n                    overflow: hidden;\r\n                    position: fixed;\r\n                    width: 100%;\r\n                }\r\n\r\n                \/* Touch-friendly improvements *\/\r\n                @media (hover: none) and (pointer: coarse) {\r\n                    .story-item {\r\n                        min-height: 44px;\r\n                        min-width: 44px;\r\n                    }\r\n                    .close-popup {\r\n                        min-height: 44px;\r\n                        min-width: 44px;\r\n                        display: flex;\r\n                        align-items: center;\r\n                        justify-content: center;\r\n                    }\r\n                    .story-left-area, .story-right-area {\r\n                        min-height: 44px;\r\n                    }\r\n                }\r\n            <\/style>\r\n\r\n            <script>\r\n                (function($){\r\n                    $(document).ready(function(){\r\n                        var currentStory = null;\r\n                        var currentItemIndex = 0;\r\n                        var storyTimer = null;\r\n                        var titleOverlayTimer = null;\r\n                        var touchStartX = 0;\r\n                        var touchStartY = 0;\r\n                        var isMobile = window.innerWidth <= 768;\r\n                        var currentStoryKey = null;\r\n                        var allStories = [];\r\n                        var currentStoryIndex = 0;\r\n\r\n                        function updateShareLinks(item) {\r\n                            if (!currentStory) return;\r\n                            var title = currentStory.story_title || '';\r\n                            var targetUrl = '';\r\n                            if (item && item.content_link && item.content_link.url) {\r\n                                targetUrl = item.content_link.url;\r\n                            } else if (item && item.content_media && item.content_media.url) {\r\n                                targetUrl = item.content_media.url;\r\n                            } else if (currentStory.profile_image && currentStory.profile_image.url) {\r\n                                targetUrl = currentStory.profile_image.url;\r\n                            } else {\r\n                                targetUrl = window.location.href;\r\n                            }\r\n\r\n                            var encUrl = encodeURIComponent(targetUrl);\r\n                            var encText = encodeURIComponent(title);\r\n\r\n                            var telegramHref = 'https:\/\/t.me\/share\/url?url=' + encUrl + '&text=' + encText;\r\n                            var whatsappHref = 'https:\/\/api.whatsapp.com\/send?text=' + encText + '%20' + encUrl;\r\n\r\n                            $('.story-share .share-telegram').attr('href', telegramHref);\r\n                            $('.story-share .share-whatsapp').attr('href', whatsappHref);\r\n                        }\r\n\r\n                        function buildStoryKey(storyData){\r\n                            var title = (storyData && storyData.story_title) ? String(storyData.story_title) : '';\r\n                            var img = (storyData && storyData.profile_image && storyData.profile_image.url) ? String(storyData.profile_image.url) : '';\r\n                            return btoa(unescape(encodeURIComponent(title + '|' + img)));\r\n                        }\r\n\r\n                        function getItemLikeCount(itemIndex){\r\n                            if (!currentStoryKey) return 0;\r\n                            var likeKey = 'skill_story_likes_' + btoa(currentStoryKey + '_' + itemIndex);\r\n                            var raw = localStorage.getItem(likeKey);\r\n                            var n = parseInt(raw, 10);\r\n                            return isNaN(n) ? 0 : n;\r\n                        }\r\n\r\n                        function setItemLikeCount(itemIndex, value){\r\n                            if (!currentStoryKey) return;\r\n                            var likeKey = 'skill_story_likes_' + btoa(currentStoryKey + '_' + itemIndex);\r\n                            try { localStorage.setItem(likeKey, String(Math.max(0, value|0))); } catch(err) {}\r\n                        }\r\n\r\n                        function isItemLiked(itemIndex){\r\n                            if (!currentStoryKey) return false;\r\n                            var userKey = 'skill_story_users_' + btoa(currentStoryKey + '_' + itemIndex);\r\n                            return localStorage.getItem(userKey) === '1';\r\n                        }\r\n\r\n                        function setItemLiked(itemIndex, liked){\r\n                            if (!currentStoryKey) return;\r\n                            var userKey = 'skill_story_users_' + btoa(currentStoryKey + '_' + itemIndex);\r\n                            try { \r\n                                if (liked) {\r\n                                    localStorage.setItem(userKey, '1');\r\n                                } else {\r\n                                    localStorage.removeItem(userKey);\r\n                                }\r\n                            } catch(err) {}\r\n                        }\r\n\r\n                        function updateLikeCountDisplay(itemIndex){\r\n                            var count = getItemLikeCount(itemIndex);\r\n                            $('.like-count').text(String(count));\r\n                        }\r\n\r\n                        function refreshLikeState(itemIndex){\r\n                            var liked = isItemLiked(itemIndex);\r\n                            var $btn = $('.like-toggle');\r\n                            $btn.toggleClass('liked', !!liked);\r\n                            $btn.attr('aria-pressed', liked ? 'true' : 'false');\r\n                            updateLikeCountDisplay(itemIndex);\r\n                        }\r\n\r\n\r\n                        $('.story-item').on('click', function(){\r\n                            \/\/ Collect all stories from the page\r\n                            allStories = [];\r\n                            $('.story-item').each(function(index) {\r\n                                allStories.push($(this).data('story'));\r\n                            });\r\n                            \r\n                            \/\/ Find current story index\r\n                            var storyData = $(this).data('story');\r\n                            currentStoryIndex = $(this).index();\r\n                            \r\n                            openStory(storyData);\r\n                        });\r\n\r\n                        \/\/ Toggle share menu\r\n                        $(document).on('click', '.share-toggle', function(e) {\r\n                            e.stopPropagation();\r\n                            var $wrap = $(this).closest('.story-share');\r\n                            $wrap.toggleClass('open');\r\n                            $wrap.find('.share-menu').attr('aria-hidden', !$wrap.hasClass('open'));\r\n                        });\r\n\r\n                        \/\/ Like click (toggle like\/unlike per item using AJAX)\r\n                        $(document).on('click', '.like-toggle', function(e){\r\n                            e.stopPropagation();\r\n                            if (!currentStory) return;\r\n                            if (!currentStoryKey) currentStoryKey = buildStoryKey(currentStory);\r\n                            \r\n                            var $btn = $(this);\r\n                            var likedAlready = isItemLiked(currentItemIndex);\r\n                            var action = likedAlready ? 'unlike' : 'like';\r\n                            \r\n                            \/\/ Check if AJAX data is available\r\n                            if (typeof skill_story_like_data === 'undefined') {\r\n                                console.log('AJAX data not available, using local storage only');\r\n                                \/\/ Fallback to local storage only\r\n                                if (likedAlready) {\r\n                                    var curr = getItemLikeCount(currentItemIndex);\r\n                                    setItemLikeCount(currentItemIndex, Math.max(0, curr - 1));\r\n                                    setItemLiked(currentItemIndex, false);\r\n                                } else {\r\n                                    var curr2 = getItemLikeCount(currentItemIndex);\r\n                                    setItemLikeCount(currentItemIndex, curr2 + 1);\r\n                                    setItemLiked(currentItemIndex, true);\r\n                                }\r\n                                refreshLikeState(currentItemIndex);\r\n                                return;\r\n                            }\r\n                            \r\n                            \/\/ Disable button during request\r\n                            $btn.prop('disabled', true);\r\n                            \r\n                            \/\/ Make AJAX request\r\n                            $.ajax({\r\n                                url: skill_story_like_data.ajaxurl,\r\n                                type: 'POST',\r\n                                data: {\r\n                                    action: 'skill_story_like',\r\n                                    nonce: skill_story_like_data.nonce,\r\n                                    story_key: currentStoryKey,\r\n                                    item_index: currentItemIndex,\r\n                                    action_type: action\r\n                                },\r\n                                success: function(response) {\r\n                                    console.log('AJAX response:', response);\r\n                                    if (response.success) {\r\n                                        \/\/ Update local storage with server data\r\n                                        setItemLikeCount(currentItemIndex, response.data.likes_count);\r\n                                        setItemLiked(currentItemIndex, response.data.user_has_liked);\r\n                                        \r\n                                        \/\/ Update UI\r\n                                        refreshLikeState(currentItemIndex);\r\n                                        \r\n                                        \/\/ Show success message briefly\r\n                                        var $message = $('.like-count');\r\n                                        var originalText = $message.text();\r\n                                        $message.text(response.data.message).css('color', '#4CAF50');\r\n                                        setTimeout(function() {\r\n                                            $message.text(response.data.likes_count).css('color', '');\r\n                                        }, 2000);\r\n                                    } else {\r\n                                        console.log('Server error:', response.data);\r\n                                        \/\/ Show error message\r\n                                        var $message = $('.like-count');\r\n                                        var originalText = $message.text();\r\n                                        $message.text(response.data.message || '\u062e\u0637\u0627 \u062f\u0631 \u062b\u0628\u062a \u0644\u0627\u06cc\u06a9').css('color', '#f44336');\r\n                                        setTimeout(function() {\r\n                                            $message.text(originalText).css('color', '');\r\n                                        }, 3000);\r\n                                    }\r\n                                },\r\n                                error: function(xhr, status, error) {\r\n                                    console.log('AJAX error:', error, xhr.responseText);\r\n                                    \/\/ Show error message\r\n                                    var $message = $('.like-count');\r\n                                    var originalText = $message.text();\r\n                                    $message.text('\u062e\u0637\u0627 \u062f\u0631 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0633\u0631\u0648\u0631').css('color', '#f44336');\r\n                                    setTimeout(function() {\r\n                                        $message.text(originalText).css('color', '');\r\n                                    }, 3000);\r\n                                },\r\n                                complete: function() {\r\n                                    \/\/ Re-enable button\r\n                                    $btn.prop('disabled', false);\r\n                                }\r\n                            });\r\n                        });\r\n\r\n                        function openStory(storyData) {\r\n                            currentStory = storyData;\r\n                            currentItemIndex = 0;\r\n                            currentStoryKey = buildStoryKey(storyData);\r\n                            \r\n                            \/\/ Debug: Check if AJAX data is available\r\n                            console.log('AJAX data available:', typeof skill_story_like_data !== 'undefined');\r\n                            if (typeof skill_story_like_data !== 'undefined') {\r\n                                console.log('AJAX URL:', skill_story_like_data.ajaxurl);\r\n                                console.log('Nonce:', skill_story_like_data.nonce);\r\n                            }\r\n                            \r\n                            \/\/ Update story header\r\n                            $('.header-profile-img').attr('src', storyData.profile_image.url);\r\n                            $('.story-profile-name').text(storyData.story_title);\r\n                            \r\n                            \/\/ Load like data from server for all items\r\n                            loadLikeDataFromServer();\r\n                            \r\n                            \/\/ Show centered title overlay briefly\r\n                            var $overlay = $('.story-title-overlay');\r\n                            $overlay.text(storyData.story_title || '');\r\n                            $overlay.addClass('active').attr('aria-hidden', 'false');\r\n                            if (titleOverlayTimer) { clearTimeout(titleOverlayTimer); }\r\n                            titleOverlayTimer = setTimeout(function(){\r\n                                $overlay.removeClass('active').attr('aria-hidden', 'true');\r\n                            }, 2000);\r\n                            \r\n                            if (!storyData.story_content_items || storyData.story_content_items.length === 0) {\r\n                                \/\/ Fallback to profile image if no content items\r\n                                var content = '<img decoding=\"async\" src=\"'+storyData.profile_image.url+'\" alt=\"Story Profile\">';\r\n                                $('.story-content').html(content);\r\n                                \/\/ Create single progress bar for single media\r\n                                $('.story-header .story-progress-bars').html('<div class=\"progress-bar\"><div class=\"progress-fill\" data-index=\"0\"><\/div><\/div>');\r\n                                \/\/ Reset progress bar to 0% before starting animation\r\n                                $('.progress-fill[data-index=\"0\"]').css('width', '0%');\r\n                                startProgressAnimation(0);\r\n                                \/\/ Update share links for fallback\r\n                                var fallbackItem = { content_link: { url: '' }, content_media: { url: storyData.profile_image.url } };\r\n                                updateShareLinks(fallbackItem);\r\n                                refreshLikeState(0);\r\n                            } else {\r\n                                \/\/ New multi-content format\r\n                                createProgressBars();\r\n                                showStoryItem(0);\r\n                            }\r\n                            \r\n                            $('.story-popup').addClass('active');\r\n                            \r\n                            \/\/ Prevent body scroll on mobile\r\n                            if (isMobile) {\r\n                                $('body').addClass('story-open');\r\n                            }\r\n                        }\r\n\r\n                        function loadLikeDataFromServer() {\r\n                            if (!currentStory || !currentStoryKey) return;\r\n                            \r\n                            \/\/ Check if AJAX data is available\r\n                            if (typeof skill_story_like_data === 'undefined') {\r\n                                console.log('AJAX data not available, using local storage only');\r\n                                refreshLikeState(currentItemIndex);\r\n                                return;\r\n                            }\r\n                            \r\n                            var items = currentStory.story_content_items || [{ content_media: { url: currentStory.profile_image.url } }];\r\n                            \r\n                            \/\/ Load like data for each item\r\n                            items.forEach(function(item, index) {\r\n                                $.ajax({\r\n                                    url: skill_story_like_data.ajaxurl,\r\n                                    type: 'POST',\r\n                                    data: {\r\n                                        action: 'skill_story_like',\r\n                                        nonce: skill_story_like_data.nonce,\r\n                                        story_key: currentStoryKey,\r\n                                        item_index: index,\r\n                                        action_type: 'get_data'\r\n                                    },\r\n                                    success: function(response) {\r\n                                        if (response.success) {\r\n                                            \/\/ Update local storage with server data\r\n                                            setItemLikeCount(index, response.data.likes_count);\r\n                                            setItemLiked(index, response.data.user_has_liked);\r\n                                            \r\n                                            \/\/ Update UI if this is the current item\r\n                                            if (index === currentItemIndex) {\r\n                                                refreshLikeState(index);\r\n                                            }\r\n                                        } else {\r\n                                            console.log('Server response error:', response.data);\r\n                                            refreshLikeState(index);\r\n                                        }\r\n                                    },\r\n                                    error: function(xhr, status, error) {\r\n                                        console.log('AJAX error:', error);\r\n                                        \/\/ Fallback to local storage if server fails\r\n                                        refreshLikeState(index);\r\n                                    }\r\n                                });\r\n                            });\r\n                        }\r\n\r\n                        function createProgressBars() {\r\n                            var progressHtml = '';\r\n                            for(var i = 0; i < currentStory.story_content_items.length; i++) {\r\n                                progressHtml += '<div class=\"progress-bar\"><div class=\"progress-fill\" data-index=\"'+i+'\"><\/div><\/div>';\r\n                            }\r\n                            $('.story-header .story-progress-bars').html(progressHtml);\r\n                            \r\n                            \/\/ Wait for DOM to render, then reset progress bars\r\n                            setTimeout(function() {\r\n                                \/\/ Reset all progress bars to 0% with no transition\r\n                                $('.progress-fill').css('transition', 'none').css('width', '0%');\r\n                            }, 10);\r\n                        }\r\n\r\n                        function showStoryItem(index) {\r\n                            if (!currentStory.story_content_items || index >= currentStory.story_content_items.length) {\r\n                                \/\/ Current story finished, try to go to next story\r\n                                goToNextStory();\r\n                                return;\r\n                            }\r\n\r\n                            currentItemIndex = index;\r\n                            var item = currentStory.story_content_items[index];\r\n                            var content = '';\r\n\r\n                            if(item.content_type === 'video') {\r\n                                content = '<video controls autoplay muted><source src=\"'+item.content_media.url+'\" type=\"video\/mp4\"><\/video>';\r\n                            } else {\r\n                                content = '<img decoding=\"async\" src=\"'+item.content_media.url+'\" alt=\"Story Content\">';\r\n                            }\r\n\r\n                            \/\/ Add link wrapper if content_link exists\r\n                            if(item.content_link && item.content_link.url) {\r\n                                var linkTarget = item.content_link.is_external ? 'target=\"_blank\"' : '';\r\n                                var linkRel = item.content_link.nofollow ? 'rel=\"nofollow\"' : '';\r\n                                content = '<a href=\"'+item.content_link.url+'\" '+linkTarget+' '+linkRel+'>'+content+'<\/a>';\r\n                            }\r\n\r\n                            \/\/ Update only the content area, preserve header\r\n                            $('.story-content').html(content);\r\n                            \/\/ Update share links and like state for current item\r\n                            updateShareLinks(item);\r\n                            refreshLikeState(currentItemIndex);\r\n                            \r\n                            \/\/ Wait a bit for DOM to render, then reset progress bars\r\n                            setTimeout(function() {\r\n                                \/\/ Reset all progress bars to 0%\r\n                                $('.progress-fill').css('transition', 'none').css('width', '0%');\r\n                                \r\n                                \/\/ Fill completed progress bars\r\n                                for(var i = 0; i < index; i++) {\r\n                                    $('.progress-fill[data-index=\"'+i+'\"]').css('transition', 'none').css('width', '100%');\r\n                                }\r\n                                \r\n                                \/\/ Start progress animation for current item\r\n                                startProgressAnimation(index);\r\n                            }, 10);\r\n                            \r\n                            \/\/ Auto advance to next item\r\n                            var duration = (item.content_duration || 3) * 1000;\r\n                            storyTimer = setTimeout(function() {\r\n                                showStoryItem(index + 1);\r\n                            }, duration);\r\n                        }\r\n\r\n                        function startProgressAnimation(index) {\r\n                            var item = currentStory.story_content_items[index];\r\n                            var duration = (item.content_duration || 3) * 1000;\r\n                            \r\n                            \/\/ Get the progress bar element\r\n                            var progressBar = $('.progress-fill[data-index=\"'+index+'\"]');\r\n                            \r\n                            \/\/ Reset transition and width first\r\n                            progressBar.css('transition', 'none').css('width', '0%');\r\n                            \r\n                            \/\/ Force reflow to ensure CSS changes are applied\r\n                            progressBar[0].offsetHeight;\r\n                            \r\n                            \/\/ Now set transition and animate\r\n                            progressBar.css('transition', 'width '+duration+'ms linear').css('width', '100%');\r\n                        }\r\n\r\n                        function goToNextStory() {\r\n                            \/\/ Check if there's a next story\r\n                            if (currentStoryIndex < allStories.length - 1) {\r\n                                currentStoryIndex++;\r\n                                \r\n                                \/\/ Clear current timers\r\n                                if (storyTimer) {\r\n                                    clearTimeout(storyTimer);\r\n                                    storyTimer = null;\r\n                                }\r\n                                \r\n                                \/\/ Open next story\r\n                                var nextStory = allStories[currentStoryIndex];\r\n                                openStory(nextStory);\r\n                            } else {\r\n                                closeStory();\r\n                            }\r\n                        }\r\n\r\n                        function closeStory() {\r\n                            $('.story-popup').removeClass('active');\r\n                            $('.story-content').html('');\r\n                            \/\/ Reset header\r\n                            $('.header-profile-img').attr('src', '');\r\n                            $('.story-profile-name').text('');\r\n                            \/\/ Hide and clear title overlay\r\n                            var $overlay = $('.story-title-overlay');\r\n                            $overlay.removeClass('active').attr('aria-hidden', 'true').text('');\r\n                            if (titleOverlayTimer) { clearTimeout(titleOverlayTimer); titleOverlayTimer = null; }\r\n                            if (storyTimer) {\r\n                                clearTimeout(storyTimer);\r\n                                storyTimer = null;\r\n                            }\r\n                            currentStory = null;\r\n                            currentItemIndex = 0;\r\n                            currentStoryIndex = 0;\r\n                            allStories = [];\r\n                            \r\n                            \/\/ Restore body scroll on mobile\r\n                            if (isMobile) {\r\n                                $('body').removeClass('story-open');\r\n                            }\r\n                        }\r\n\r\n                        $('.close-popup').on('click', closeStory);\r\n\r\n                        \/\/ Touch events for mobile\r\n                        $('.story-content').on('touchstart', function(e) {\r\n                            touchStartX = e.originalEvent.touches[0].clientX;\r\n                            touchStartY = e.originalEvent.touches[0].clientY;\r\n                        });\r\n\r\n                        $('.story-content').on('touchend', function(e) {\r\n                            if (!currentStory) return;\r\n                            \r\n                            var touchEndX = e.originalEvent.changedTouches[0].clientX;\r\n                            var touchEndY = e.originalEvent.changedTouches[0].clientY;\r\n                            var diffX = touchStartX - touchEndX;\r\n                            var diffY = touchStartY - touchEndY;\r\n                            \r\n                            \/\/ Minimum swipe distance\r\n                            var minSwipeDistance = 50;\r\n                            \r\n                            if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > minSwipeDistance) {\r\n                                if (diffX > 0) {\r\n                                    \/\/ Swipe left - next item or next story\r\n                                    if (storyTimer) {\r\n                                        clearTimeout(storyTimer);\r\n                                    }\r\n                                    if (currentStory && currentStory.story_content_items && currentItemIndex < currentStory.story_content_items.length - 1) {\r\n                                        \/\/ Go to next item in current story\r\n                                        showStoryItem(currentItemIndex + 1);\r\n                                    } else {\r\n                                        \/\/ Go to next story\r\n                                        goToNextStory();\r\n                                    }\r\n                                } else {\r\n                                    \/\/ Swipe right - previous item or previous story\r\n                                    if (storyTimer) {\r\n                                        clearTimeout(storyTimer);\r\n                                    }\r\n                                    if (currentItemIndex > 0) {\r\n                                        \/\/ Go to previous item in current story\r\n                                        showStoryItem(currentItemIndex - 1);\r\n                                    } else if (currentStoryIndex > 0) {\r\n                                        \/\/ Go to previous story\r\n                                        currentStoryIndex--;\r\n                                        var prevStory = allStories[currentStoryIndex];\r\n                                        openStory(prevStory);\r\n                                    }\r\n                                }\r\n                            }\r\n                        });\r\n\r\n                        \/\/ Click on left side to go to previous story item or previous story\r\n                        $('.story-left-area').on('click', function(){\r\n                            if (storyTimer) {\r\n                                clearTimeout(storyTimer);\r\n                            }\r\n                            if (currentItemIndex > 0) {\r\n                                \/\/ Go to previous item in current story\r\n                                showStoryItem(currentItemIndex - 1);\r\n                            } else if (currentStoryIndex > 0) {\r\n                                \/\/ Go to previous story\r\n                                currentStoryIndex--;\r\n                                var prevStory = allStories[currentStoryIndex];\r\n                                openStory(prevStory);\r\n                            }\r\n                        });\r\n\r\n                        \/\/ Click on right side to go to next story item or next story\r\n                        $('.story-right-area').on('click', function(){\r\n                            if (storyTimer) {\r\n                                clearTimeout(storyTimer);\r\n                            }\r\n                            if (currentStory && currentStory.story_content_items && currentItemIndex < currentStory.story_content_items.length - 1) {\r\n                                \/\/ Go to next item in current story\r\n                                showStoryItem(currentItemIndex + 1);\r\n                            } else {\r\n                                \/\/ Go to next story\r\n                                goToNextStory();\r\n                            }\r\n                        });\r\n\r\n                        \/\/ Click on story content to go to next item or next story\r\n                        $('.story-content').on('click', function(e){\r\n                            \/\/ Don't trigger on touch devices to avoid conflict with swipe\r\n                            if (e.type === 'click' && 'ontouchstart' in window) return;\r\n                            \r\n                            if (storyTimer) {\r\n                                clearTimeout(storyTimer);\r\n                            }\r\n                            if (currentStory && currentStory.story_content_items && currentItemIndex < currentStory.story_content_items.length - 1) {\r\n                                \/\/ Go to next item in current story\r\n                                showStoryItem(currentItemIndex + 1);\r\n                            } else {\r\n                                \/\/ Go to next story\r\n                                goToNextStory();\r\n                            }\r\n                        });\r\n\r\n                        \/\/ Keyboard navigation\r\n                        $(document).on('keydown', function(e){\r\n                            if (!$('.story-popup').hasClass('active')) return;\r\n                            \r\n                            if (e.keyCode === 37) { \/\/ Left arrow\r\n                                if (storyTimer) {\r\n                                    clearTimeout(storyTimer);\r\n                                }\r\n                                if (currentItemIndex > 0) {\r\n                                    \/\/ Go to previous item in current story\r\n                                    showStoryItem(currentItemIndex - 1);\r\n                                } else if (currentStoryIndex > 0) {\r\n                                    \/\/ Go to previous story\r\n                                    currentStoryIndex--;\r\n                                    var prevStory = allStories[currentStoryIndex];\r\n                                    openStory(prevStory);\r\n                                }\r\n                            } else if (e.keyCode === 39) { \/\/ Right arrow\r\n                                if (storyTimer) {\r\n                                    clearTimeout(storyTimer);\r\n                                }\r\n                                if (currentStory && currentStory.story_content_items && currentItemIndex < currentStory.story_content_items.length - 1) {\r\n                                    \/\/ Go to next item in current story\r\n                                    showStoryItem(currentItemIndex + 1);\r\n                                } else {\r\n                                    \/\/ Go to next story\r\n                                    goToNextStory();\r\n                                }\r\n                            } else if (e.keyCode === 27) { \/\/ Escape\r\n                                closeStory();\r\n                            }\r\n                        });\r\n\r\n                        \/\/ Handle window resize\r\n                        $(window).on('resize', function() {\r\n                            isMobile = window.innerWidth <= 768;\r\n                        });\r\n\r\n                        \/\/ Close share menu and story on outside click \/ escape\r\n                        $(document).on('click', function(e) {\r\n                            if ($('.story-popup').hasClass('active') && !$(e.target).closest('.story-popup, .story-item').length) {\r\n                                closeStory();\r\n                            }\r\n                            if (!$(e.target).closest('.story-share').length) {\r\n                                $('.story-share').removeClass('open').find('.share-menu').attr('aria-hidden', 'true');\r\n                            }\r\n                        });\r\n                    });\r\n                    \/\/ scorol story\r\n                    $('.stories-wrapper').on('mousedown touchstart', function(e) {\r\n                        var startX = e.pageX || e.originalEvent.touches[0].pageX;\r\n                        var scrollLeft = $(this).scrollLeft();\r\n                        var $this = $(this);\r\n    \r\n                        $(document).on('mousemove touchmove', function(e) {\r\n                            var x = e.pageX || e.originalEvent.touches[0].pageX;\r\n                            var walked = (x - startX) * 2;\r\n                            $this.scrollLeft(scrollLeft - walked);\r\n                        });\r\n    \r\n                        $(document).on('mouseup touchend', function() {\r\n                            $(document).off('mousemove touchmove mouseup touchend');\r\n                        });\r\n                    });\r\n                })(jQuery);\r\n            <\/script>\r\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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-0cbaea1 e-con-full e-flex e-con e-parent\" data-id=\"0cbaea1\" data-element_type=\"container\" data-e-type=\"container\" id=\"home\">\n\t\t<div class=\"elementor-element elementor-element-21f5467 e-con-full e-flex e-con e-child\" data-id=\"21f5467\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6c1f01 elementor-widget elementor-widget-my_avatar_widget\" data-id=\"b6c1f01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"my_avatar_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        \n        <style>\n        .skill_my_avatar {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            position: relative;\n            cursor: pointer;\n        }\n\n        .skill_my_avatar img {\n            border-radius: 50%;\n            border: 10px solid #272627;\n            width: 200px;\n            height: 200px;\n            object-fit: cover;\n            transition: all 0.3s ease;\n            position: relative;\n            z-index: 5;\n        }\n\n        .skill_my_avatar img:hover {\n            transform: scale(1.05);\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n        }\n\n        \/* Ensure status text shows on image hover *\/\n        .skill_my_avatar img:hover ~ .online-status-text {\n            opacity: 1 !important;\n            visibility: visible !important;\n        }\n\n        \/* Better hover effect for status text *\/\n        .skill_my_avatar:hover .online-status-text {\n            opacity: 1 !important;\n            transform: translateX(-50%) translateY(-2px);\n        }\n\n        \/* Alternative hover trigger *\/\n        .skill_my_avatar img:hover + .online-status-text,\n        .skill_my_avatar img:hover ~ .online-status-text {\n            opacity: 1 !important;\n            transform: translateX(-50%) translateY(-2px);\n        }\n\n        \/* Force show on hover for debugging *\/\n        .skill_my_avatar:hover .online-status-text {\n            opacity: 1 !important;\n            visibility: visible !important;\n        }\n\n        \/* Bubbles Container *\/\n        .bubbles-container {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: 1;\n            overflow: hidden;\n        }\n\n        \/* Individual Bubbles *\/\n        .bubble {\n            position: absolute;\n            background-color: #4CAF50;\n            border: 1px solid #ffffff;\n            border-radius: 50%;\n            opacity: 0.3;\n            filter: blur(2px);\n            animation: float 15s infinite ease-in-out;\n        }\n\n        \/* Different sizes and positions for variety *\/\n        .bubble-0 { width: 20px; height: 20px; left: 10%; animation-delay: 0s; }\n        .bubble-1 { width: 35px; height: 35px; left: 20%; animation-delay: 2s; }\n        .bubble-2 { width: 25px; height: 25px; left: 30%; animation-delay: 4s; }\n        .bubble-3 { width: 40px; height: 40px; left: 40%; animation-delay: 6s; }\n        .bubble-4 { width: 15px; height: 15px; left: 50%; animation-delay: 8s; }\n        .bubble-5 { width: 30px; height: 30px; left: 60%; animation-delay: 10s; }\n        .bubble-6 { width: 45px; height: 45px; left: 70%; animation-delay: 12s; }\n        .bubble-7 { width: 20px; height: 20px; left: 80%; animation-delay: 14s; }\n        .bubble-8 { width: 35px; height: 35px; left: 90%; animation-delay: 1s; }\n        .bubble-9 { width: 25px; height: 25px; left: 15%; animation-delay: 3s; }\n        .bubble-10 { width: 40px; height: 40px; left: 25%; animation-delay: 5s; }\n        .bubble-11 { width: 30px; height: 30px; left: 35%; animation-delay: 7s; }\n        .bubble-12 { width: 20px; height: 20px; left: 45%; animation-delay: 9s; }\n        .bubble-13 { width: 35px; height: 35px; left: 55%; animation-delay: 11s; }\n        .bubble-14 { width: 25px; height: 25px; left: 65%; animation-delay: 13s; }\n\n        \/* Floating Animation *\/\n        @keyframes float {\n            0% {\n                transform: translateY(100vh) scale(0);\n                opacity: 0;\n            }\n            10% {\n                opacity: 0.3;\n            }\n            90% {\n                opacity: 0.3;\n            }\n            100% {\n                transform: translateY(-100px) scale(1);\n                opacity: 0;\n            }\n        }\n\n        \/* Online Status Indicator *\/\n        .online-status-indicator,\n        .busy-status-indicator,\n        .away-status-indicator,\n        .offline-status-indicator,\n        .auto-status-indicator {\n            position: absolute;\n            bottom: 15px;\n            right: 15px;\n            width: 12px;\n            height: 12px;\n            border: 2px solid #ffffff;\n            border-radius: 50%;\n            z-index: 10;\n        }\n\n        .online-status-indicator {\n            background-color: #4CAF50;\n            animation: pulse 2s infinite;\n        }\n\n        .busy-status-indicator {\n            background-color: #FF9800;\n            animation: pulse 2s infinite;\n        }\n\n        .away-status-indicator {\n            background-color: #FFC107;\n            animation: pulse 2s infinite;\n        }\n\n        .offline-status-indicator {\n            background-color: #9E9E9E;\n        }\n\n        .auto-status-indicator {\n            background-color: #4CAF50;\n            animation: pulse 2s infinite;\n        }\n\n        .online-status-text {\n            position: absolute;\n            bottom: 5px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: rgba(0, 0, 0, 0.8);\n            color: #4CAF50;\n            padding: 4px 8px;\n            border-radius: 12px;\n            font-size: 11px;\n            font-weight: 500;\n            white-space: nowrap;\n            opacity: 0;\n            transition: all 0.3s ease;\n            z-index: 15;\n            pointer-events: none;\n            min-width: 60px;\n            text-align: center;\n        }\n\n        @keyframes pulse {\n            0% {\n                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);\n            }\n            70% {\n                box-shadow: 0 0 0 8px rgba(76, 175, 80, 0);\n            }\n            100% {\n                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);\n            }\n        }\n\n        \/* Responsive styles *\/\n        @media (max-width: 768px) {\n            .skill_my_avatar img {\n                width: 150px;\n                height: 150px;\n                border-width: 8px;\n            }\n            .online-status-indicator,\n            .busy-status-indicator,\n            .away-status-indicator,\n            .offline-status-indicator,\n            .auto-status-indicator {\n                bottom: 10px;\n                right: 10px;\n                width: 10px;\n                height: 10px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .skill_my_avatar img {\n                width: 120px;\n                height: 120px;\n                border-width: 6px;\n            }\n            .online-status-indicator,\n            .busy-status-indicator,\n            .away-status-indicator,\n            .offline-status-indicator,\n            .auto-status-indicator {\n                bottom: 8px;\n                right: 8px;\n                width: 8px;\n                height: 8px;\n            }\n        }\n        <\/style>\n        \n        <div class=\"skill_my_avatar\">\n                            <div class=\"bubbles-container\">\n                                            <div class=\"bubble bubble-0\"><\/div>\n                                            <div class=\"bubble bubble-1\"><\/div>\n                                            <div class=\"bubble bubble-2\"><\/div>\n                                            <div class=\"bubble bubble-3\"><\/div>\n                                            <div class=\"bubble bubble-4\"><\/div>\n                                            <div class=\"bubble bubble-5\"><\/div>\n                                            <div class=\"bubble bubble-6\"><\/div>\n                                            <div class=\"bubble bubble-7\"><\/div>\n                                    <\/div>\n                        \n            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/04\/avatar.jpg\" alt=\"\u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\">\n            \n                            <div class=\"auto-status-indicator\"><\/div>\n                <div class=\"online-status-text\">\u0622\u0646\u0644\u0627\u06cc\u0646<\/div>\n                    <\/div>\n\n                <script>\n        (function() {\n            let lastActivity = Date.now();\n            let isOnline = true;\n            const indicator = document.querySelector('.auto-status-indicator');\n            const statusText = document.querySelector('.online-status-text');\n            \n            \/\/ Update activity on user interaction\n            function updateActivity() {\n                lastActivity = Date.now();\n                if (!isOnline) {\n                    setOnline();\n                }\n            }\n            \n            \/\/ Check if user is active\n            function checkActivity() {\n                const now = Date.now();\n                const inactiveTime = now - lastActivity;\n                \n                \/\/ Consider offline after 5 minutes of inactivity\n                if (inactiveTime > 5 * 60 * 1000 && isOnline) {\n                    setOffline();\n                } else if (inactiveTime <= 5 * 60 * 1000 && !isOnline) {\n                    setOnline();\n                }\n            }\n            \n            function setOnline() {\n                isOnline = true;\n                if (indicator) {\n                    indicator.style.backgroundColor = '#4CAF50';\n                    indicator.style.animation = 'pulse 2s infinite';\n                }\n                if (statusText) {\n                    statusText.textContent = '\u0622\u0646\u0644\u0627\u06cc\u0646';\n                    statusText.style.color = '#4CAF50';\n                }\n            }\n            \n            function setOffline() {\n                isOnline = false;\n                if (indicator) {\n                    indicator.style.backgroundColor = '#9E9E9E';\n                    indicator.style.animation = 'none';\n                }\n                if (statusText) {\n                    statusText.textContent = '\u0622\u0641\u0644\u0627\u06cc\u0646';\n                    statusText.style.color = '#9E9E9E';\n                }\n            }\n            \n            \/\/ Listen for user activity\n            ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart', 'click'].forEach(function(event) {\n                document.addEventListener(event, updateActivity, true);\n            });\n            \n            \/\/ Check activity every 30 seconds\n            setInterval(checkActivity, 30000);\n            \n            \/\/ Initial check\n            checkActivity();\n        })();\n        <\/script>\n        \n                <script>\n        (function() {\n            const bubblesContainer = document.querySelector('.bubbles-container');\n            if (!bubblesContainer) return;\n\n            \/\/ Get settings from PHP\n            const bubblesCount = 8;\n            const bubblesSize = 30;\n            const bubblesSpeed = 15;\n            const bubblesOpacity = 0.3;\n\n            \/\/ Update bubble styles based on settings\n            const bubbles = bubblesContainer.querySelectorAll('.bubble');\n            bubbles.forEach((bubble, index) => {\n                \/\/ Set custom size if different from default\n                if (bubblesSize !== 30) {\n                    const customSize = Math.random() * (bubblesSize * 0.8) + (bubblesSize * 0.2);\n                    bubble.style.width = customSize + 'px';\n                    bubble.style.height = customSize + 'px';\n                }\n\n                \/\/ Set custom animation duration\n                bubble.style.animationDuration = bubblesSpeed + 's';\n\n                \/\/ Set custom opacity\n                bubble.style.opacity = bubblesOpacity;\n\n                \/\/ Randomize positions for more natural movement\n                const randomLeft = Math.random() * 100;\n                const randomDelay = Math.random() * bubblesSpeed;\n                bubble.style.left = randomLeft + '%';\n                bubble.style.animationDelay = randomDelay + 's';\n            });\n\n            \/\/ Add hover effect to make bubbles more interactive\n            bubblesContainer.addEventListener('mouseenter', function() {\n                bubbles.forEach(bubble => {\n                    bubble.style.animationPlayState = 'paused';\n                });\n            });\n\n            bubblesContainer.addEventListener('mouseleave', function() {\n                bubbles.forEach(bubble => {\n                    bubble.style.animationPlayState = 'running';\n                });\n            });\n        })();\n        <\/script>\n                \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-016f2f5 elementor-widget elementor-widget-my_name_job_widget\" data-id=\"016f2f5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"my_name_job_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        \r\n        <style>\r\n        .skill_my_name h1 {\r\n            color: #fff;\r\n        }\r\n\r\n        .name-container {\r\n            gap: 15px;\r\n        }\r\n\r\n        .full-name {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .job-title-container {\r\n            display: flex;\r\n            justify-content: center;\r\n            margin-top: 5px;\r\n            width: 100%;\r\n            text-align: center;\r\n        }\r\n\r\n        .animated-title {\r\n            color: #fff;\r\n            position: relative;\r\n            min-width: 150px;\r\n            height: 40px;\r\n            display: inline-block;\r\n            font-size: 17px;\r\n        }\r\n\r\n        .fade-out {\r\n            animation: fadeOut 0.5s forwards;\r\n        }\r\n\r\n        .fade-in {\r\n            animation: fadeIn 0.5s forwards;\r\n        }\r\n\r\n        @keyframes fadeOut {\r\n            from { \r\n                opacity: 1; \r\n                transform: translateY(0); \r\n            }\r\n            to { \r\n                opacity: 0; \r\n                transform: translateY(calc(-1 * var(--animation-distance, 10px))); \r\n            }\r\n        }\r\n\r\n        @keyframes fadeIn {\r\n            from { \r\n                opacity: 0; \r\n                transform: translateY(calc(1 * var(--animation-distance, 10px))); \r\n            }\r\n            to { \r\n                opacity: 1; \r\n                transform: translateY(0); \r\n            }\r\n        }\r\n\r\n        \/* Responsive styles *\/\r\n        @media (max-width: 768px) {\r\n            .skill_my_name h1 {\r\n                font-size: 1.5rem;\r\n            }\r\n            \r\n            .animated-title {\r\n                font-size: 14px;\r\n                min-width: 120px;\r\n                height: 35px;\r\n            }\r\n            \r\n            .name-container {\r\n                gap: 10px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .skill_my_name h1 {\r\n                font-size: 1.2rem;\r\n            }\r\n            \r\n            .animated-title {\r\n                font-size: 12px;\r\n                min-width: 100px;\r\n                height: 30px;\r\n            }\r\n            \r\n            .name-container {\r\n                gap: 8px;\r\n            }\r\n        }\r\n        <\/style>\r\n        \r\n        <div class=\"skill_my_name d-flex flex-column align-items-center\">\r\n            <div class=\"full-name\">\r\n                <h1 class=\"mb-0\">\u0645\u062d\u0645\u062f<\/h1>\r\n                <h1 class=\"mb-0\">\u062d\u06cc\u062f\u0631\u06cc<\/h1>\r\n            <\/div>\r\n            <div class=\"job-title-container\">\r\n                <b class=\"animated-title\" id=\"animated-job-016f2f5\">\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0628<\/b>\r\n            <\/div>\r\n        <\/div>\r\n        \r\n        <script>\r\n        document.addEventListener('DOMContentLoaded', function() {\r\n            const textElement = document.getElementById('animated-job-016f2f5');\r\n            const texts = [\"\\u062a\\u0648\\u0633\\u0639\\u0647 \\u062f\\u0647\\u0646\\u062f\\u0647 \\u0648\\u0628\",\"\\u062a\\u0648\\u0633\\u0639\\u0647 \\u0648\\u0631\\u062f\\u067e\\u0631\\u0633\",\"\\u0637\\u0631\\u0627\\u062d \\u0645\\u062d\\u0635\\u0648\\u0644\"];\r\n            const interval = 1500;\r\n            let index = 0;\r\n\r\n            if (textElement && texts.length > 1) {\r\n                function changeText() {\r\n                    textElement.classList.add('fade-out');\r\n\r\n                    setTimeout(() => {\r\n                        index = (index + 1) % texts.length;\r\n                        textElement.textContent = texts[index];\r\n\r\n                        textElement.classList.remove('fade-out');\r\n                        textElement.classList.add('fade-in');\r\n\r\n                        setTimeout(() => {\r\n                            textElement.classList.remove('fade-in');\r\n                        }, 600);\r\n                    }, 600);\r\n                }\r\n\r\n                setInterval(changeText, interval);\r\n            }\r\n        });\r\n        <\/script>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90d7ff8 elementor-widget elementor-widget-text-editor\" data-id=\"90d7ff8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633\u061b \u067e\u0644\u06cc \u0645\u06cc\u0627\u0646 \u06cc\u06a9 \u0637\u0631\u062d \u062e\u0644\u0627\u0642\u0627\u0646\u0647 \u0648 \u06cc\u06a9 \u0627\u062c\u0631\u0627\u06cc \u0641\u0646\u06cc \u0628\u06cc\u200c\u0639\u06cc\u0628 \u0648 \u0646\u0642\u0635<\/p><p>\u062e\u0627\u0644\u0642 \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ce8e35 elementor-widget elementor-widget-button\" data-id=\"2ce8e35\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#portfolio\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0645\u0634\u0627\u0647\u062f\u0647 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0645\u0646<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0e190f6 e-con-full e-flex e-con e-parent\" data-id=\"0e190f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3798fdc elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"3798fdc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-34e562c e-grid e-con-boxed e-con e-parent\" data-id=\"34e562c\" 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-410f492 elementor-widget elementor-widget-skill_title_desc\" data-id=\"410f492\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"about\" data-widget_type=\"skill_title_desc.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tdw-wrap\" dir=\"rtl\">\r\n\t\t\t<div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n\t\t\t\t\t\t\t\t\t<h2 class=\"tdw-title\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<div class=\"tdw-desc\" style=\"margin-top:10px;\">\r\n\t\t\t\t\t\u0628\u0627 \u06a9\u062f\u0647\u0627\u06cc \u062a\u0645\u06cc\u0632 \u0648 \u0645\u0639\u0645\u0627\u0631\u06cc \u0645\u0642\u06cc\u0627\u0633\u200c\u067e\u0630\u06cc\u0631\u060c \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc \u0648\u0631\u062f\u067e\u0631\u0633\u06cc \u0645\u06cc\u200c\u0633\u0627\u0632\u0645 \u06a9\u0647 \u0646\u0647 \u062a\u0646\u0647\u0627 \u0627\u0645\u0631\u0648\u0632\u060c \u0628\u0644\u06a9\u0647 \u0628\u0631\u0627\u06cc \u0622\u06cc\u0646\u062f\u0647\u200c\u06cc \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u0634\u0645\u0627 \u0646\u06cc\u0632 \u0628\u0647\u06cc\u0646\u0647 \u0647\u0633\u062a\u0646\u062f. \u062a\u062e\u0635\u0635 \u0645\u0646 \u062a\u0628\u062f\u06cc\u0644 \u0686\u0627\u0644\u0634\u200c\u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0647 \u0631\u0627\u0647\u200c\u062d\u0644\u200c\u0647\u0627\u06cc \u0633\u0627\u062f\u0647 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a.\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\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-9ea4bba e-flex e-con-boxed e-con e-parent\" data-id=\"9ea4bba\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4489055 e-con-full e-flex e-con e-child\" data-id=\"4489055\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c5873b8 elementor-widget elementor-widget-skill_personal_modern_card\" data-id=\"c5873b8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_personal_modern_card.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"spm-card\" dir=\"rtl\">\r\n\t\t\t\t\t\t<a class=\"spm-contact\" href=\"https:\/\/websavant.ir\/skill\/theme-skill\/demo-developer\/#contact\" target=\"_self\">\r\n\t\t\t\t<i class=\"fas fa-comments\" aria-hidden=\"true\"><\/i>\r\n\t\t\t\t<span>\u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0645\u0646<\/span>\r\n\t\t\t<\/a>\r\n\t\t\t\t\t\t<div class=\"spm-avatar-wrap\">\r\n\t\t\t\t<img decoding=\"async\" class=\"spm-avatar\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/avatar.jpg\" alt=\"\u0645\u062d\u0645\u062f \u062d\u06cc\u062f\u0631\u06cc\" \/>\r\n\t\t\t\t<div class=\"spm-badge\" title=\"status\"><i class=\"fas fa-pen\" aria-hidden=\"true\"><\/i><\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<h2 class=\"spm-name\">\u0645\u062d\u0645\u062f \u062d\u06cc\u062f\u0631\u06cc<\/h2>\r\n\t\t\t<div class=\"spm-meta\" aria-hidden=\"true\">\r\n\t\t\t\t<div class=\"spm-item\"><span class=\"spm-label\">\u0633\u0627\u0628\u0642\u0647:<\/span><span class=\"spm-value\">\u062f\u0647 \u0633\u0627\u0644<\/span><\/div>\r\n\t\t\t\t<div class=\"spm-item\"><span class=\"spm-label\">\u062a\u062e\u0635\u0635:<\/span><span class=\"spm-value\">\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/span><\/div>\r\n\t\t\t\t<div class=\"spm-item\"><span class=\"spm-label\">\u062a\u062d\u0635\u06cc\u0644\u0627\u062a:<\/span><span class=\"spm-value\">\u0627\u0631\u0634\u062f<\/span><\/div>\r\n\t\t\t<\/div>\r\n\t\t\t<div class=\"spm-bio\"><i class=\"fas fa-pen spm-bio-icon\" aria-hidden=\"true\"><\/i><p>\u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647\u200c\u0627\u06cc \u0647\u0633\u062a\u0645 \u06a9\u0647 \u0648\u0631\u062f\u067e\u0631\u0633 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u06a9\u0641 \u062f\u0633\u062a \u0645\u06cc\u200c\u0634\u0646\u0627\u0633\u0645. \u0645\u0634\u06a9\u0644 \u0631\u0627 \u0628\u0647 \u0645\u0646 \u0628\u06af\u0648\u06cc\u06cc\u062f\u061b \u0645\u0646 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0631\u0627\u0647\u200c\u062d\u0644 \u0641\u0646\u06cc \u0648 \u0628\u0647\u200c\u0635\u0631\u0641\u0647 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u06a9\u0646\u0645.<\/p><\/div>\r\n\t\t\t<hr class=\"spm-sep\" \/>\r\n\t\t<\/div>\r\n\t\t<style>\r\n\t\t.spm-card{position:relative;max-width:760px;margin:0 auto;padding:56px 40px 34px;box-sizing:border-box;color:#fff;text-align:center}\r\n\t\t.spm-contact{position:absolute;left:24px;top:22px;display:inline-flex;gap:10px;align-items:center;color:rgba(255,255,255,.7);font-size:14px;text-decoration:none}\r\n\t\t.spm-contact i{opacity:.9}\r\n\t\t.spm-avatar-wrap{width:140px;height:140px;margin:0 auto 18px;position:relative;border-radius:50%;display:flex;align-items:center;justify-content:center}\r\n        .spm-avatar{width:145px;height:145px !important;border-radius:50%;object-fit:cover;display:block;z-index:2;box-shadow:0 6px 20px rgba(0,0,0,.6);border:0 solid transparent}\r\n\t\t.spm-badge{position:absolute;width:36px;height:36px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.45);right:calc(50% - 60px);bottom:8px;transform:translate(28px,10px);z-index:3}\r\n\t\t.spm-badge i{color:#2b9cff}\r\n\t\t.spm-name{margin:6px 0 12px;font-size:28px;letter-spacing:.6px;font-weight:700}\r\n\t\t.spm-meta{display:flex;gap:34px;justify-content:center;align-items:center;color:rgba(255,255,255,.7);font-size:14px;margin-bottom:18px;flex-wrap:wrap}\r\n\t\t.spm-item{display:flex;gap:10px;align-items:center}\r\n\t\t.spm-label{font-size:13px;color:rgba(255,255,255,.7)}\r\n\t\t.spm-value{font-weight:600}\r\n\t\t.spm-bio{max-width:720px;margin:18px auto 20px;color:rgba(255,255,255,.92);line-height:1.9;font-size:15px;text-align:justify;padding:0 12px;display:flex;gap:10px;align-items:flex-start;border-top:1px solid rgba(255,255,255,0.12);border-bottom:1px solid rgba(255,255,255,0.12);padding-top:12px;padding-bottom:12px}\r\n\t\t.spm-bio-icon{opacity:.95}\r\n\t\t.spm-bio p{margin:0}\r\n\t\t.spm-sep{border:0;height:1px;background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.08));margin-top:26px;width:80%;margin-left:auto;margin-right:auto}\r\n\t\t@media(max-width:520px){.spm-card{padding:40px 20px}.spm-avatar{width:107px;height:109px !important}.spm-name{font-size:22px}.spm-meta{gap:18px;font-size:13px}.spm-badge{width:30px;height:30px}}\r\n\t\t<\/style>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d7e6b0e e-con-full e-flex e-con e-child\" data-id=\"d7e6b0e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4d54eb0 e-con-full e-flex e-con e-child\" data-id=\"4d54eb0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48e5b70 elementor-widget elementor-widget-skill_title_desc\" data-id=\"48e5b70\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_title_desc.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tdw-wrap\" dir=\"rtl\">\r\n\t\t\t<div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n\t\t\t\t\t\t\t\t\t<h2 class=\"tdw-title\">\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u06cc<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-30cfe5d elementor-widget elementor-widget-skill_work_educational_experience_widget\" data-id=\"30cfe5d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_work_educational_experience_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n                    <a href=\"#\" style=\"text-decoration:none;display:block;\">            <div class=\"skill-experience-widget\" style=\"display:flex;align-items:center;gap:15px;direction:rtl;margin-bottom:15px;\">\n                <div>\n                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/comp-symbl-1.png\" alt=\"\u0641\u0631\u06cc\u0644\u0646\u0633\u0631 \u062a\u0645\u0627\u0645 \u0648\u0642\u062a \u062f\u0631 \u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a\" class=\"skill-experience-image\" style=\"max-width: 100%;height: auto;width: 80px;padding: 10px;object-fit:cover;background:#222;border-radius:15px;\">\n                                    <\/div>\n                <div>\n                    <div class=\"skill-experience-title\" style=\"margin-bottom:5px;\">\n                        \u0641\u0631\u06cc\u0644\u0646\u0633\u0631 \u062a\u0645\u0627\u0645 \u0648\u0642\u062a \u062f\u0631 \u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a                    <\/div>\n                    <div class=\"skill-experience-date\">\n                        \u0622\u0630\u0631 1399 \u062a\u0627 \u062d\u0627\u0644\u0627                    <\/div>\n                <\/div>\n            <\/div>\n            <\/a><a href=\"#\" style=\"text-decoration:none;display:block;\">            <div class=\"skill-experience-widget\" style=\"display:flex;align-items:center;gap:15px;direction:rtl;margin-bottom:15px;\">\n                <div>\n                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/comp-symbl-7.png\" alt=\"\u0633\u0626\u0648 \u0633\u0627\u06cc\u062a \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc\" class=\"skill-experience-image\" style=\"max-width: 100%;height: auto;width: 80px;padding: 10px;object-fit:cover;background:#222;border-radius:15px;\">\n                                    <\/div>\n                <div>\n                    <div class=\"skill-experience-title\" style=\"margin-bottom:5px;\">\n                        \u0633\u0626\u0648 \u0633\u0627\u06cc\u062a \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc                    <\/div>\n                    <div class=\"skill-experience-date\">\n                        \u0645\u0631\u062f\u0627\u062f 1400 \u0627\u0644\u06cc \u0645\u0647\u0631 1400                    <\/div>\n                <\/div>\n            <\/div>\n            <\/a><a href=\"#\" style=\"text-decoration:none;display:block;\">            <div class=\"skill-experience-widget\" style=\"display:flex;align-items:center;gap:15px;direction:rtl;margin-bottom:15px;\">\n                <div>\n                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/comp-symbl-1.png\" alt=\"\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633\" class=\"skill-experience-image\" style=\"max-width: 100%;height: auto;width: 80px;padding: 10px;object-fit:cover;background:#222;border-radius:15px;\">\n                                    <\/div>\n                <div>\n                    <div class=\"skill-experience-title\" style=\"margin-bottom:5px;\">\n                        \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633                    <\/div>\n                    <div class=\"skill-experience-date\">\n                        \u0627\u0631\u062f\u06cc\u0628\u0647\u0634\u062a 1402 \u0627\u0644\u06cc \u062e\u0631\u062f\u0627\u062f 1402                    <\/div>\n                <\/div>\n            <\/div>\n            <\/a>                \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a84928f e-con-full e-flex e-con e-child\" data-id=\"a84928f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-be07064 elementor-widget elementor-widget-skill_title_desc\" data-id=\"be07064\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_title_desc.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tdw-wrap\" dir=\"rtl\">\r\n\t\t\t<div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n\t\t\t\t\t\t\t\t\t<h2 class=\"tdw-title\">\u062a\u062c\u0631\u0628\u0647 \u062a\u062d\u0635\u06cc\u0644\u06cc<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2ff117 elementor-widget elementor-widget-skill_work_educational_experience_widget\" data-id=\"e2ff117\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_work_educational_experience_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n                    <a href=\"#\" style=\"text-decoration:none;display:block;\">            <div class=\"skill-experience-widget\" style=\"display:flex;align-items:center;gap:15px;direction:rtl;margin-bottom:15px;\">\n                <div>\n                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/comp-symbl-7.png\" alt=\"\u0644\u06cc\u0633\u0627\u0646\u0633 \u0645\u0647\u0646\u062f\u0633\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631\" class=\"skill-experience-image\" style=\"max-width: 100%;height: auto;width: 80px;padding: 10px;object-fit:cover;background:#222;border-radius:15px;\">\n                                    <\/div>\n                <div>\n                    <div class=\"skill-experience-title\" style=\"margin-bottom:5px;\">\n                        \u0644\u06cc\u0633\u0627\u0646\u0633 \u0645\u0647\u0646\u062f\u0633\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631                    <\/div>\n                    <div class=\"skill-experience-date\">\n                        \u062e\u0631\u062f\u0627\u062f 1404                    <\/div>\n                <\/div>\n            <\/div>\n            <\/a>                \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fd18888 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"fd18888\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b9c9ba5 e-con-full e-flex e-con e-child\" data-id=\"b9c9ba5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-57857b7 elementor-widget elementor-widget-skill_title_desc\" data-id=\"57857b7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_title_desc.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tdw-wrap\" dir=\"rtl\">\r\n\t\t\t<div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n\t\t\t\t\t\t\t\t\t<h2 class=\"tdw-title\">\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0636\u0631\u0648\u0631\u06cc \u06a9\u0647 \u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u06a9\u0646\u0645<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-295025f elementor-widget elementor-widget-skill_tools_widget\" data-id=\"295025f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_tools_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"skill-tools-list\" style=\"display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:20px;width:100%;flex-wrap:wrap;\"><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-1.png\" alt=\"Figma\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">Figma<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-4.png\" alt=\"Photoshop\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">Photoshop<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-3.png\" alt=\"Framer\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">Framer<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-5.png\" alt=\"Webflow\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">Webflow<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-6.png\" alt=\"Notion\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">Notion<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-7.png\" alt=\"Angulor\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">Angulor<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-8.png\" alt=\"VueJS\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">VueJS<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-9.png\" alt=\"Wordpress\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">WordPress<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-10.png\" alt=\"HTML\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">HTML<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><div class=\"skill-tool-item\"><span class=\"skill-tool-img-wrap\" style=\"display:flex;align-items:center;justify-content:center;min-width:56px;min-height:56px;\"><a href=\"#\" class=\"skill-tool-img-link\" style=\"display:inline-block;\"><img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/tools-symbl-2.png\" alt=\"Magento\" class=\"skill-tool-img\"><\/a><\/span><div style=\"flex:1;text-align:right;padding-right:16px;\"><div class=\"skill-tool-title\">Magento<\/div><div class=\"skill-tool-desc\">\u0627\u0628\u0632\u0627\u0631 \u0637\u0631\u0627\u062d\u06cc<\/div><\/div><\/div><\/div>        <style>\r\n\t\t.skill-tools-main-title {\r\n\t\t\tfont-weight: 700;\r\n\t\t}\r\n        .skill-tools-main-title {\r\n            width: 100%;\r\n        }\r\n        .skill-tools-list {\r\n            display: flex;\r\n            flex-direction: row;\r\n            align-items: flex-start;\r\n            justify-content: center;\r\n            gap: 20px;\r\n            width: 100%;\r\n            flex-wrap: wrap;\r\n        }\r\n        .skill-tool-item {\r\n            \/* width: 210px; *\/\r\n            max-width: 100%;\r\n            flex: 0 0 auto;\r\n            margin: 0;\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 12px 18px;\r\n            box-sizing: border-box;\r\n            background: #151415;\r\n            border: 1px solid #333;\r\n            border-radius: 12px;\r\n            transition: box-shadow .2s;\r\n        }\r\n        .skill-tool-item:hover {\r\n            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);\r\n            cursor: pointer;\r\n        }\r\n        .skill-tool-img-wrap {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            min-width: 56px;\r\n            min-height: 56px;\r\n            background: #151415;\r\n            border-radius: 12px;\r\n        }\r\n        .skill-tool-img {\r\n            display: block;\r\n            filter: grayscale(100%);\r\n            transition: filter .3s;\r\n        }\r\n        .skill-tool-item:hover .skill-tool-img {\r\n            filter: none !important;\r\n        }\r\n        .skill-tool-img-link {\r\n            display: inline-block;\r\n        }\r\n        .skill-tool-img-link {\r\n            background: none !important;\r\n            border: none !important;\r\n            border-radius: 0 !important;\r\n            padding: 0 !important;\r\n            margin: 0 !important;\r\n            box-shadow: none !important;\r\n        }\r\n        .skill-tool-img-link:active,\r\n        .skill-tool-img-link:visited,\r\n        .skill-tool-img-link:focus {\r\n            background: none !important;\r\n            color: inherit !important;\r\n        }\r\n        @media (max-width: 900px) {\r\n            .skill-tools-list {\r\n                flex-direction: column;\r\n                align-items: center;\r\n                gap: 14px;\r\n            }\r\n            .skill-tool-item {\r\n                max-width: 100%;\r\n                width: 100%;\r\n            }\r\n        }\r\n        <\/style>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3901c55 e-con-full e-flex e-con e-child\" data-id=\"3901c55\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-b2bec41 e-con-full e-flex e-con e-child\" data-id=\"b2bec41\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7d4b8a elementor-widget elementor-widget-skill_title_desc\" data-id=\"d7d4b8a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_title_desc.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tdw-wrap\" dir=\"rtl\">\r\n\t\t\t<div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n\t\t\t\t\t\t\t\t\t<h2 class=\"tdw-title\">\u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u0645\u0646<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f64e3b elementor-widget elementor-widget-skill_progress_bar\" data-id=\"2f64e3b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_progress_bar.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-progress-bar-group\" dir=\"rtl\" id=\"skill-progress-2f64e3b\">\r\n                                    <div class=\"skill-progress-bar\" style=\"margin-bottom: 18px;\">\r\n                <div class=\"skill-progress-bar__track\" style=\"\">\r\n                    <div class=\"skill-progress-bar__fill\" data-target-percent=\"95\" style=\"width: 0%; background:#7D7D7D;\">\r\n                        <span class=\"skill-progress-bar__label\">\u0628\u0631\u0646\u062f\u0633\u0627\u0632\u06cc \u0645\u062d\u0635\u0648\u0644<\/span>\r\n                        <span class=\"skill-progress-bar__percent\">0\u066a<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"skill-progress-bar\" style=\"margin-bottom: 18px;\">\r\n                <div class=\"skill-progress-bar__track\" style=\"\">\r\n                    <div class=\"skill-progress-bar__fill\" data-target-percent=\"85\" style=\"width: 0%;\">\r\n                        <span class=\"skill-progress-bar__label\">\u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc<\/span>\r\n                        <span class=\"skill-progress-bar__percent\">0\u066a<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"skill-progress-bar\" style=\"margin-bottom: 18px;\">\r\n                <div class=\"skill-progress-bar__track\" style=\"\">\r\n                    <div class=\"skill-progress-bar__fill\" data-target-percent=\"98\" style=\"width: 0%;\">\r\n                        <span class=\"skill-progress-bar__label\">\u062a\u0648\u0633\u0639\u0647 \u0648\u0631\u062f\u067e\u0631\u0633<\/span>\r\n                        <span class=\"skill-progress-bar__percent\">0\u066a<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"skill-progress-bar\" style=\"margin-bottom: 18px;\">\r\n                <div class=\"skill-progress-bar__track\" style=\"\">\r\n                    <div class=\"skill-progress-bar__fill\" data-target-percent=\"100\" style=\"width: 0%;\">\r\n                        <span class=\"skill-progress-bar__label\">\u0633\u0626\u0648 \u0648 \u062a\u0648\u0644\u06cc\u062f \u0645\u062d\u062a\u0648\u0627<\/span>\r\n                        <span class=\"skill-progress-bar__percent\">0\u066a<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <\/div>\r\n        <style>\r\n        .skill-progress-bar__main-title {\r\n            font-weight: 700;\r\n            font-size: 1.1em;\r\n            margin-bottom: 12px;\r\n            line-height: 1.7;\r\n        }\r\n        .skill-progress-bar__track {\r\n            width: 100%;\r\n            background: #ededed;\r\n            border-radius: 999px;\r\n            overflow: hidden;\r\n            position: relative;\r\n        }\r\n        .skill-progress-bar__fill {\r\n            display: flex;\r\n            flex-direction: row;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            height: 100%;\r\n            background: #fff;\r\n            border-radius: 999px;\r\n            transition: width 1.4s cubic-bezier(.4,0,.2,1);\r\n            padding: 0 16px;\r\n            font-size: 1em;\r\n            position: relative;\r\n            overflow: hidden;\r\n            will-change: width;\r\n        }\r\n        .skill-progress-bar__fill::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            bottom: 0;\r\n            left: -40%;\r\n            width: 40%;\r\n            background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);\r\n            transform: skewX(-20deg);\r\n            animation: skillShimmer 2.2s ease-in-out infinite;\r\n            pointer-events: none;\r\n        }\r\n        @keyframes skillShimmer {\r\n            0% { left: -40%; }\r\n            100% { left: 120%; }\r\n        }\r\n        .skill-progress-bar__label {\r\n            font-weight: 500;\r\n            font-size: 1em;\r\n            white-space: nowrap;\r\n        }\r\n        .skill-progress-bar__percent {\r\n            font-weight: 700;\r\n            font-size: 1em;\r\n            white-space: nowrap;\r\n        }\r\n        <\/style>\r\n        <script>\r\n        (function(){\r\n            var root = document.getElementById('skill-progress-2f64e3b');\r\n            if (!root || root.dataset.animated === '1') { return; }\r\n            var startAnimation = function() {\r\n                if (root.dataset.animated === '1') { return; }\r\n                root.dataset.animated = '1';\r\n                var fills = root.querySelectorAll('.skill-progress-bar__fill');\r\n                fills.forEach(function(fill){\r\n                    var target = parseInt(fill.getAttribute('data-target-percent') || '0', 10);\r\n                    var percentEl = fill.querySelector('.skill-progress-bar__percent');\r\n                    var startTime = null;\r\n                    var duration = 1200;\r\n                    function step(ts){\r\n                        if (!startTime) startTime = ts;\r\n                        var progress = Math.min((ts - startTime) \/ duration, 1);\r\n                        var current = Math.floor(target * progress);\r\n                        fill.style.width = current + '%';\r\n                        if (percentEl) { percentEl.textContent = current + '\u066a'; }\r\n                        if (progress < 1) { requestAnimationFrame(step); }\r\n                    }\r\n                    requestAnimationFrame(step);\r\n                });\r\n            };\r\n            if ('IntersectionObserver' in window) {\r\n                var io = new IntersectionObserver(function(entries){\r\n                    entries.forEach(function(entry){\r\n                        if (entry.isIntersecting) { startAnimation(); io.disconnect(); }\r\n                    });\r\n                }, { threshold: 0.3 });\r\n                io.observe(root);\r\n            } else {\r\n                startAnimation();\r\n            }\r\n        })();\r\n        <\/script>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2f1f08d e-con-full e-flex e-con e-child\" data-id=\"2f1f08d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-638a18a elementor-widget elementor-widget-skill_title_desc\" data-id=\"638a18a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_title_desc.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tdw-wrap\" dir=\"rtl\">\r\n\t\t\t<div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n\t\t\t\t\t\t\t\t\t<h2 class=\"tdw-title\">\u0645\u0633\u0644\u0637 \u0628\u0647 \u0632\u0628\u0627\u0646 \u0647\u0627\u06cc<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8ee01c4 elementor-widget elementor-widget-skill_foreign_language\" data-id=\"8ee01c4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_foreign_language.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"skill-language-arc\" id=\"skill-lang-arc-8ee01c4\"><svg class=\"skill-language-arc-path\" viewBox=\"0 0 800 300\" preserveAspectRatio=\"none\" aria-hidden=\"true\"><path d=\"M20 260 C 220 140, 580 140, 780 260\" fill=\"none\" stroke=\"rgba(255,255,255,0.08)\" stroke-width=\"2\"\/><\/svg><div class=\"skill-language-flag-item\" data-index=\"0\"><img decoding=\"async\" class=\"skill-language-flag-img\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/world_16397183.png\" alt=\"\u0627\u0646\u06af\u0644\u06cc\u0633\u06cc\"><span class=\"skill-language-tooltip\">\u0627\u0646\u06af\u0644\u06cc\u0633\u06cc<\/span><\/div><div class=\"skill-language-flag-item\" data-index=\"1\"><img decoding=\"async\" class=\"skill-language-flag-img\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/germany-flag-48871.png\" alt=\"\u0622\u0644\u0645\u0627\u0646\u06cc\"><span class=\"skill-language-tooltip\">\u0622\u0644\u0645\u0627\u0646\u06cc<\/span><\/div><div class=\"skill-language-flag-item\" data-index=\"2\"><img decoding=\"async\" class=\"skill-language-flag-img\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/french-flag-png-29342.png\" alt=\"\u0641\u0631\u0627\u0646\u0633\u0648\u06cc\"><span class=\"skill-language-tooltip\">\u0641\u0631\u0627\u0646\u0633\u0648\u06cc<\/span><\/div><div class=\"skill-language-flag-item\" data-index=\"3\"><img decoding=\"async\" class=\"skill-language-flag-img\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/unnamed.jpg\" alt=\"\u067e\u0631\u062a\u063a\u0627\u0644\u06cc\"><span class=\"skill-language-tooltip\">\u067e\u0631\u062a\u063a\u0627\u0644\u06cc<\/span><\/div><div class=\"skill-language-flag-item\" data-index=\"4\"><img decoding=\"async\" class=\"skill-language-flag-img\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/360_F_58763467_0sQaA11LqEAzz0NtEtpFopUllb94UhWL.jpg\" alt=\"\u06cc\u0648\u0646\u0627\u0646\u06cc\"><span class=\"skill-language-tooltip\">\u06cc\u0648\u0646\u0627\u0646\u06cc<\/span><\/div><div class=\"skill-language-flag-item\" data-index=\"5\"><img decoding=\"async\" class=\"skill-language-flag-img\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/360_F_1561815349_R3s26f1L0UOhoupQ84h6zc1QGlTHbCHT.jpg\" alt=\"\u0639\u0631\u0628\u06cc\"><span class=\"skill-language-tooltip\">\u0639\u0631\u0628\u06cc<\/span><\/div><button class=\"skill-language-arc-nav next\" type=\"button\" aria-label=\"\u0642\u0628\u0644\u06cc\"><i class=\"fa fa-chevron-right\"><\/i><\/button><button class=\"skill-language-arc-nav prev\" type=\"button\" aria-label=\"\u0628\u0639\u062f\u06cc\"><i class=\"fa fa-chevron-left\"><\/i><\/button><\/div><style>\r\n            .skill-language-arc { position: relative; height: 320px; max-width: 980px; margin: 0 auto; }\r\n            .skill-language-arc-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }\r\n            .skill-language-flag-item { position: absolute; top: 50%; left: 50%; width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); box-shadow: 0 10px 30px rgba(0,0,0,0.35); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); transition: transform .35s ease, opacity .35s ease, left .35s ease, top .35s ease; }\r\n            .skill-language-flag-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(100%) brightness(0.7); transition: transform .35s ease, filter .35s ease; }\r\n            .skill-language-flag-item:hover .skill-language-flag-img { transform: scale(1.04); }\r\n            .skill-language-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(8px); padding: 6px 10px; font-size: 12px; color: #fff; background: rgba(35,36,50,0.85); border-radius: 8px; white-space: nowrap; border: 1px solid rgba(255,255,255,0.08); opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease; }\r\n            .skill-language-tooltip::after { content: \"\"; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: rgba(35,36,50,0.85) transparent transparent transparent; }\r\n            .skill-language-flag-item:hover .skill-language-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }\r\n            .skill-language-flag-item.pos1 { left: 8%;  top: 72%; opacity: .35; transform: translate(-50%, -50%) scale(.9); }\r\n            .skill-language-flag-item.pos2 { left: 30%; top: 56%; opacity: .65; transform: translate(-50%, -50%) scale(.95); }\r\n            .skill-language-flag-item.pos3 { left: 50%; top: 36%; width: 130px; height: 130px; opacity: 1; z-index: 2; transform: translate(-50%, -50%) scale(1); }\r\n            .skill-language-flag-item.pos3 .skill-language-flag-img { filter: none; }\r\n            .skill-language-flag-item.pos4 { left: 70%; top: 56%; opacity: .65; transform: translate(-50%, -50%) scale(.95); }\r\n            .skill-language-flag-item.pos5 { left: 92%; top: 72%; opacity: .35; transform: translate(-50%, -50%) scale(.9); }\r\n            .skill-language-flag-item.is-hidden { opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.8); }\r\n            .skill-language-arc-nav { position: absolute; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s ease, transform .25s ease; z-index: 3; }\r\n            .skill-language-arc-nav:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }\r\n            .skill-language-arc-nav.prev { left: 12px; }\r\n            .skill-language-arc-nav.next { right: 12px; }\r\n            @media (max-width: 768px) {\r\n                .skill-language-arc { height: 260px; }\r\n                .skill-language-flag-item { width: 64px; height: 64px; }\r\n                .skill-language-flag-item.pos3 { width: 108px; height: 108px; top: 40%; }\r\n                .skill-language-flag-item.pos1 { left: 12%; top: 76%; }\r\n                .skill-language-flag-item.pos2 { left: 32%; top: 60%; }\r\n                .skill-language-flag-item.pos4 { left: 68%; top: 60%; }\r\n                .skill-language-flag-item.pos5 { left: 88%; top: 76%; }\r\n            }\r\n\t\t\t.skill-language-widget-title{\r\n\t\t\t\tfont-weight: 700;\r\n\t\t\t\tfont-size: 24px;\r\n\t\t\t}\r\n            <\/style><script>(function(){var root=document.getElementById(\"skill-lang-arc-8ee01c4\");if(!root)return;var items=[].slice.call(root.querySelectorAll(\".skill-language-flag-item\"));if(!items.length)return;var current=0;function render(){items.forEach(function(el){el.className=el.className.replace(\/\\bpos[1-5]\\b|\\bis-hidden\\b|\\bis-center\\b\/g,\"\").trim();});for(var o=-2;o<=2;o++){var idx=(current+o+items.length)%items.length;var el=items[idx];var posClass=\"pos\"+(o+3);el.classList.add(posClass);if(o===0)el.classList.add(\"is-center\");}for(var i=0;i<items.length;i++){if(!items[i].className.match(\/pos[1-5]\/))items[i].classList.add(\"is-hidden\");}}function next(){current=(current+1)%items.length;render();}function prev(){current=(current-1+items.length)%items.length;render();}render();var navNext=root.querySelector(\".skill-language-arc-nav.next\");var navPrev=root.querySelector(\".skill-language-arc-nav.prev\");if(navNext)navNext.addEventListener(\"click\",next);if(navPrev)navPrev.addEventListener(\"click\",prev);var autoplay=setInterval(next,3000);root.addEventListener(\"mouseenter\",function(){clearInterval(autoplay);autoplay=null;});root.addEventListener(\"mouseleave\",function(){if(!autoplay)autoplay=setInterval(next,3000);});})();<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bad67e7 e-con-full e-grid e-con e-child\" data-id=\"bad67e7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ad4280 elementor-widget elementor-widget-counter\" data-id=\"4ad4280\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">\u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\">+ <\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"10\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\"><\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df8c51b elementor-widget elementor-widget-counter\" data-id=\"df8c51b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">\u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\">+ <\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"520\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\"><\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a70cc2 elementor-widget elementor-widget-counter\" data-id=\"3a70cc2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">\u0631\u0636\u0627\u06cc\u062a \u0645\u0634\u062a\u0631\u06cc<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\">%<\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"100\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\"><\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-54d4243 e-con-full e-flex e-con e-parent\" data-id=\"54d4243\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c974ad1 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"c974ad1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-37a8a56 e-flex e-con-boxed e-con e-parent\" data-id=\"37a8a56\" data-element_type=\"container\" data-e-type=\"container\" id=\"collaboration\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8045539 e-con-full e-flex e-con e-child\" data-id=\"8045539\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-98c9b19 elementor-widget elementor-widget-skill_collaboration\" data-id=\"98c9b19\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_collaboration.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-collaboration-widget\" id=\"skill-collab-98c9b19\">\n            <div class=\"tdw-wrap\" dir=\"rtl\">\n                <div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\n                                            <h2 class=\"tdw-title\">\u0647\u0645\u06a9\u0627\u0631\u06cc\u200c\u0647\u0627\u06cc \u0645\u0646<\/h2>\n                                                                <span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\n                                    <\/div>\n                            <\/div>\n            <div class=\"collaboration-grid\">\n                                <article class=\"collaboration-item js-open-collab-modal\" aria-label=\"\u0634\u0631\u06a9\u062a \u0698\u0627\u06a9\u062a\" data-modal-id=\"collab-modal-98c9b19-0\">\n                                                            <div class=\"collaboration-content\">\n                        <div class=\"collaboration-logo-wrap\">\n                                                            <img loading=\"lazy\" class=\"collaboration-logo\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/05\/zhk-dark-logo.ab40b3b1-removebg-preview.png\" alt=\"\u0698\u0627\u06a9\u062a\" loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" \/>\n                                                    <\/div>\n                        <div class=\"collaboration-info\">\n                            <h3 class=\"collaboration-name\" title=\"\u0634\u0631\u06a9\u062a \u0698\u0627\u06a9\u062a\">\u0634\u0631\u06a9\u062a \u0698\u0627\u06a9\u062a<\/h3>\n                            <div class=\"collaboration-role\"><i class=\"fa fa-user\" aria-hidden=\"true\"><\/i>\u0645\u062a\u062e\u0635\u0635 \u0648\u0631\u062f\u067e\u0631\u0633<\/div>                            <div class=\"collaboration-period\"><i class=\"fa fa-calendar-alt\" aria-hidden=\"true\"><\/i>1399 \u2014 \u0647\u0645\u200c\u0627\u06a9\u0646\u0648\u0646<\/div>                        <\/div>\n                    <\/div>\n                    <div class=\"collaboration-desc\">\u0628\u0627 \u0633\u0627\u0628\u0642\u0647 \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0631 \u062a\u06cc\u0645 \u0641\u0646\u06cc \u06cc\u06a9 \u0634\u0631\u06a9\u062a \u0645\u0639\u062a\u0628\u0631\u060c \u062a\u062c\u0631\u0628\u0647 \u0639\u0645\u0644\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u06cc \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0632\u0631\u06af \u0631\u0627 \u06a9\u0633\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u0645. \u0627\u06cc\u0646 \u0641\u0631\u0635\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0645\u0646 \u062f\u0631 \u06a9\u0627\u0631 \u062a\u06cc\u0645\u06cc \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0686\u0627\u0644\u0634\u200c\u0647\u0627\u06cc \u0641\u0646\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0627\u0631\u062a\u0642\u0627 \u062f\u0627\u062f.\n\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u06cc \u0645\u0646 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u067e\u0648\u06cc\u0627\u06cc \u06cc\u06a9 \u0634\u0631\u06a9\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0627\u0645 \u062f\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u062a\u06cc\u0645\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0632\u0645\u0627\u0646\u200c\u0628\u0646\u062f\u06cc \u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u06a9\u06cc\u0641\u06cc \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a.<\/div>                                                        <\/article>\n\n                                    <div id=\"collab-modal-98c9b19-0\" class=\"collab-modal\" aria-hidden=\"true\">\n                        <div class=\"collab-modal__overlay\" data-close=\"1\"><\/div>\n                        <div class=\"collab-modal__dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"collab-modal-98c9b19-0-title\">\n                                                            <!-- Background Vectors -->\n                                <svg class=\"collab-modal__vector collab-modal__vector-1\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <circle cx=\"20\" cy=\"20\" r=\"8\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-2\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <path d=\"M80 15 L90 25 L80 35 L70 25 Z\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-3\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <rect x=\"15\" y=\"70\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-4\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <polygon points=\"85,75 90,85 80,85\" fill=\"currentColor\"\/>\n                                <\/svg>\n\n                                                                    <!-- Animated Background Vectors -->\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-2\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 66%; left: 52%; width: 28px; height: 28px; animation-delay: 0.5s;\">\n                                                                                            <path d=\"M25 25 L75 25 L75 75 L25 75 Z\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-3\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 18%; left: 50%; width: 36px; height: 36px; animation-delay: 1s;\">\n                                                                                            <polygon points=\"50,20 80,80 20,80\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-4\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 76%; left: 43%; width: 20px; height: 20px; animation-delay: 1.5s;\">\n                                                                                            <ellipse cx=\"50\" cy=\"50\" rx=\"30\" ry=\"20\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-1\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 63%; left: 83%; width: 28px; height: 28px; animation-delay: 2s;\">\n                                                                                            <circle cx=\"50\" cy=\"50\" r=\"25\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-2\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 69%; left: 44%; width: 36px; height: 36px; animation-delay: 2.5s;\">\n                                                                                            <path d=\"M25 25 L75 25 L75 75 L25 75 Z\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-3\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 71%; left: 32%; width: 20px; height: 20px; animation-delay: 3s;\">\n                                                                                            <polygon points=\"50,20 80,80 20,80\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-4\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 59%; left: 8%; width: 28px; height: 28px; animation-delay: 3.5s;\">\n                                                                                            <ellipse cx=\"50\" cy=\"50\" rx=\"30\" ry=\"20\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-1\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 80%; left: 40%; width: 36px; height: 36px; animation-delay: 4s;\">\n                                                                                            <circle cx=\"50\" cy=\"50\" r=\"25\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                                                                            <button class=\"collab-modal__close\" aria-label=\"\u0628\u0633\u062a\u0646\" data-close=\"1\">&times;<\/button>\n                            <div class=\"collab-modal__header\">\n                                <div class=\"collab-modal__logo-wrap\">\n                                                                            <img decoding=\"async\" class=\"collab-modal__logo\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/05\/zhk-dark-logo.ab40b3b1-removebg-preview.png\" alt=\"\u0698\u0627\u06a9\u062a\" width=\"112\" height=\"112\" \/>\n                                                                    <\/div>\n                                <div class=\"collab-modal__titles\">\n                                    <h2 id=\"collab-modal-98c9b19-0-title\" class=\"collab-modal__company\">\u0634\u0631\u06a9\u062a \u0698\u0627\u06a9\u062a<\/h2>\n                                    <div class=\"collab-modal__role\">\u0645\u062a\u062e\u0635\u0635 \u0648\u0631\u062f\u067e\u0631\u0633<\/div>                                <\/div>\n                            <\/div>\n                            <div class=\"collab-modal__body\">\n                                <div class=\"collab-modal__desc\">\u0628\u0627 \u0633\u0627\u0628\u0642\u0647 \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0631 \u062a\u06cc\u0645 \u0641\u0646\u06cc \u06cc\u06a9 \u0634\u0631\u06a9\u062a \u0645\u0639\u062a\u0628\u0631\u060c \u062a\u062c\u0631\u0628\u0647 \u0639\u0645\u0644\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u06cc \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0632\u0631\u06af \u0631\u0627 \u06a9\u0633\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u0645. \u0627\u06cc\u0646 \u0641\u0631\u0635\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0645\u0646 \u062f\u0631 \u06a9\u0627\u0631 \u062a\u06cc\u0645\u06cc \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0686\u0627\u0644\u0634\u200c\u0647\u0627\u06cc \u0641\u0646\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0627\u0631\u062a\u0642\u0627 \u062f\u0627\u062f.\n\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u06cc \u0645\u0646 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u067e\u0648\u06cc\u0627\u06cc \u06cc\u06a9 \u0634\u0631\u06a9\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0627\u0645 \u062f\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u062a\u06cc\u0645\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0632\u0645\u0627\u0646\u200c\u0628\u0646\u062f\u06cc \u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u06a9\u06cc\u0641\u06cc \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a.<\/div>\n                                <ul class=\"collab-modal__facts\">\n                                    <li><i class=\"fa fa-calendar-alt\" aria-hidden=\"true\"><\/i><span>1399 \u2014 \u0647\u0645\u200c\u0627\u06a9\u0646\u0648\u0646<\/span><\/li>                                    <li><i class=\"fa fa-user-tie\" aria-hidden=\"true\"><\/i><span>\u0645\u062a\u062e\u0635\u0635 \u0648\u0631\u062f\u067e\u0631\u0633<\/span><\/li>                                    <li><i class=\"fa fa-map-marker-alt\" aria-hidden=\"true\"><\/i><span>\u062f\u0648\u0631\u06a9\u0627\u0631\u06cc \/ \u0646\u06cc\u0645\u0647 \u062d\u0636\u0648\u0631\u06cc<\/span><\/li>                                    <li><i class=\"fa fa-clock\" aria-hidden=\"true\"><\/i><span>8 \u0635\u0628\u062d \u0627\u0644\u06cc 16 \u0628\u0639\u062f\u0627\u0632 \u0638\u0647\u0631<\/span><\/li>                                <\/ul>\n                                                                    <div class=\"collab-modal__actions\">\n                                        <a class=\"collaboration-cta\" href=\"https:\/\/www.zhaket.com\/\" target=\"_blank\" rel=\"noopener\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a<\/a>\n                                    <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                \n                                <article class=\"collaboration-item js-open-collab-modal\" aria-label=\"\u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a\" data-modal-id=\"collab-modal-98c9b19-1\">\n                                                            <div class=\"collaboration-content\">\n                        <div class=\"collaboration-logo-wrap\">\n                                                            <img loading=\"lazy\" class=\"collaboration-logo\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/logo.png\" alt=\"\u0645\u0647\u0627\u0631\u062a\" loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" \/>\n                                                    <\/div>\n                        <div class=\"collaboration-info\">\n                            <h3 class=\"collaboration-name\" title=\"\u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a\">\u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a<\/h3>\n                            <div class=\"collaboration-role\"><i class=\"fa fa-user\" aria-hidden=\"true\"><\/i>\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633<\/div>                            <div class=\"collaboration-period\"><i class=\"fa fa-calendar-alt\" aria-hidden=\"true\"><\/i>1404 \u2014 \u0647\u0645\u200c\u0627\u06a9\u0646\u0648\u0646<\/div>                        <\/div>\n                    <\/div>\n                    <div class=\"collaboration-desc\">\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u06cc \u0645\u0646 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u067e\u0648\u06cc\u0627\u06cc \u06cc\u06a9 \u0634\u0631\u06a9\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0627\u0645 \u062f\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u062a\u06cc\u0645\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0632\u0645\u0627\u0646\u200c\u0628\u0646\u062f\u06cc \u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u06a9\u06cc\u0641\u06cc \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a.\n\u0628\u0627 \u0633\u0627\u0628\u0642\u0647 \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0631 \u062a\u06cc\u0645 \u0641\u0646\u06cc \u06cc\u06a9 \u0634\u0631\u06a9\u062a \u0645\u0639\u062a\u0628\u0631\u060c \u062a\u062c\u0631\u0628\u0647 \u0639\u0645\u0644\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u06cc \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0632\u0631\u06af \u0631\u0627 \u06a9\u0633\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u0645. \u0627\u06cc\u0646 \u0641\u0631\u0635\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0645\u0646 \u062f\u0631 \u06a9\u0627\u0631 \u062a\u06cc\u0645\u06cc \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0686\u0627\u0644\u0634\u200c\u0647\u0627\u06cc \u0641\u0646\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0627\u0631\u062a\u0642\u0627 \u062f\u0627\u062f.<\/div>                                                        <\/article>\n\n                                    <div id=\"collab-modal-98c9b19-1\" class=\"collab-modal\" aria-hidden=\"true\">\n                        <div class=\"collab-modal__overlay\" data-close=\"1\"><\/div>\n                        <div class=\"collab-modal__dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"collab-modal-98c9b19-1-title\">\n                                                            <!-- Background Vectors -->\n                                <svg class=\"collab-modal__vector collab-modal__vector-1\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <circle cx=\"20\" cy=\"20\" r=\"8\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-2\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <path d=\"M80 15 L90 25 L80 35 L70 25 Z\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-3\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <rect x=\"15\" y=\"70\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-4\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <polygon points=\"85,75 90,85 80,85\" fill=\"currentColor\"\/>\n                                <\/svg>\n\n                                                                    <!-- Animated Background Vectors -->\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-2\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 56%; left: 36%; width: 28px; height: 28px; animation-delay: 0.5s;\">\n                                                                                            <path d=\"M25 25 L75 25 L75 75 L25 75 Z\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-3\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 57%; left: 5%; width: 36px; height: 36px; animation-delay: 1s;\">\n                                                                                            <polygon points=\"50,20 80,80 20,80\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-4\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 43%; left: 25%; width: 20px; height: 20px; animation-delay: 1.5s;\">\n                                                                                            <ellipse cx=\"50\" cy=\"50\" rx=\"30\" ry=\"20\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-1\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 68%; left: 22%; width: 28px; height: 28px; animation-delay: 2s;\">\n                                                                                            <circle cx=\"50\" cy=\"50\" r=\"25\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-2\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 31%; left: 13%; width: 36px; height: 36px; animation-delay: 2.5s;\">\n                                                                                            <path d=\"M25 25 L75 25 L75 75 L25 75 Z\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-3\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 82%; left: 47%; width: 20px; height: 20px; animation-delay: 3s;\">\n                                                                                            <polygon points=\"50,20 80,80 20,80\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-4\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 7%; left: 37%; width: 28px; height: 28px; animation-delay: 3.5s;\">\n                                                                                            <ellipse cx=\"50\" cy=\"50\" rx=\"30\" ry=\"20\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-1\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 41%; left: 63%; width: 36px; height: 36px; animation-delay: 4s;\">\n                                                                                            <circle cx=\"50\" cy=\"50\" r=\"25\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                                                                            <button class=\"collab-modal__close\" aria-label=\"\u0628\u0633\u062a\u0646\" data-close=\"1\">&times;<\/button>\n                            <div class=\"collab-modal__header\">\n                                <div class=\"collab-modal__logo-wrap\">\n                                                                            <img decoding=\"async\" class=\"collab-modal__logo\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/logo.png\" alt=\"\u0645\u0647\u0627\u0631\u062a\" width=\"112\" height=\"112\" \/>\n                                                                    <\/div>\n                                <div class=\"collab-modal__titles\">\n                                    <h2 id=\"collab-modal-98c9b19-1-title\" class=\"collab-modal__company\">\u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a<\/h2>\n                                    <div class=\"collab-modal__role\">\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633<\/div>                                <\/div>\n                            <\/div>\n                            <div class=\"collab-modal__body\">\n                                <div class=\"collab-modal__desc\">\u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u06cc \u0645\u0646 \u062f\u0631 \u0645\u062d\u06cc\u0637 \u067e\u0648\u06cc\u0627\u06cc \u06cc\u06a9 \u0634\u0631\u06a9\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0627\u0645 \u062f\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u062a\u06cc\u0645\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0632\u0645\u0627\u0646\u200c\u0628\u0646\u062f\u06cc \u0648 \u0627\u0633\u062a\u0627\u0646\u062f\u0627\u0631\u062f\u0647\u0627\u06cc \u06a9\u06cc\u0641\u06cc \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0646\u0634\u0627\u0646 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a.\n\u0628\u0627 \u0633\u0627\u0628\u0642\u0647 \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0631 \u062a\u06cc\u0645 \u0641\u0646\u06cc \u06cc\u06a9 \u0634\u0631\u06a9\u062a \u0645\u0639\u062a\u0628\u0631\u060c \u062a\u062c\u0631\u0628\u0647 \u0639\u0645\u0644\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0646\u0631\u0645\u200c\u0627\u0641\u0632\u0627\u0631\u06cc \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0632\u0631\u06af \u0631\u0627 \u06a9\u0633\u0628 \u06a9\u0631\u062f\u0647\u200c\u0627\u0645. \u0627\u06cc\u0646 \u0641\u0631\u0635\u062a\u060c \u062a\u0648\u0627\u0646\u0627\u06cc\u06cc \u0645\u0646 \u062f\u0631 \u06a9\u0627\u0631 \u062a\u06cc\u0645\u06cc \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0686\u0627\u0644\u0634\u200c\u0647\u0627\u06cc \u0641\u0646\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0627\u0631\u062a\u0642\u0627 \u062f\u0627\u062f.<\/div>\n                                <ul class=\"collab-modal__facts\">\n                                    <li><i class=\"fa fa-calendar-alt\" aria-hidden=\"true\"><\/i><span>1404 \u2014 \u0647\u0645\u200c\u0627\u06a9\u0646\u0648\u0646<\/span><\/li>                                    <li><i class=\"fa fa-user-tie\" aria-hidden=\"true\"><\/i><span>\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633<\/span><\/li>                                    <li><i class=\"fa fa-map-marker-alt\" aria-hidden=\"true\"><\/i><span>\u062a\u0645\u0627\u0645 \u0648\u0642\u062a<\/span><\/li>                                    <li><i class=\"fa fa-clock\" aria-hidden=\"true\"><\/i><span>8 \u0635\u0628\u062d \u0627\u0644\u06cc 22 \u0634\u0628<\/span><\/li>                                <\/ul>\n                                                                    <div class=\"collab-modal__actions\">\n                                        <a class=\"collaboration-cta\" href=\"https:\/\/websavant.ir\/skill\/\" target=\"_blank\" rel=\"noopener\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a<\/a>\n                                    <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                \n                                <article class=\"collaboration-item js-open-collab-modal\" aria-label=\"\u0634\u0631\u06a9\u062a \u0647\u0648\u0627\u067e\u06cc\u0645\u0627\u06cc\u06cc\" data-modal-id=\"collab-modal-98c9b19-2\">\n                                                                <div class=\"collaboration-ended-status\">\n                            <span class=\"ended-badge\">\u0627\u062a\u0645\u0627\u0645 \u0647\u0645\u06a9\u0627\u0631\u06cc<\/span>\n                        <\/div>\n                                        <div class=\"collaboration-content\">\n                        <div class=\"collaboration-logo-wrap\">\n                                                            <img loading=\"lazy\" class=\"collaboration-logo\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/plane-logo-design-Top-removebg-preview.png\" alt=\"\u0634\u0631\u06a9\u062a \u0647\u0648\u0627\u067e\u06cc\u0645\u0627\u06cc\u06cc\" loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" \/>\n                                                    <\/div>\n                        <div class=\"collaboration-info\">\n                            <h3 class=\"collaboration-name\" title=\"\u0634\u0631\u06a9\u062a \u0647\u0648\u0627\u067e\u06cc\u0645\u0627\u06cc\u06cc\">\u0634\u0631\u06a9\u062a \u0647\u0648\u0627\u067e\u06cc\u0645\u0627\u06cc\u06cc<\/h3>\n                            <div class=\"collaboration-role\"><i class=\"fa fa-user\" aria-hidden=\"true\"><\/i>\u0637\u0631\u0627\u062d \u0633\u0627\u06cc\u062a<\/div>                            <div class=\"collaboration-period\"><i class=\"fa fa-calendar-alt\" aria-hidden=\"true\"><\/i>1398 \u2014 1399<\/div>                        <\/div>\n                    <\/div>\n                    <div class=\"collaboration-desc\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0637\u0631\u0627\u062d \u0648 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0648\u0628\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a \u0647\u0648\u0627\u067e\u06cc\u0645\u0627\u06cc\u06cc [\u0646\u0627\u0645 \u0634\u0631\u06a9\u062a]\u060c \u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0637\u0631\u0627\u062d\u06cc UX\/UI \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u0641\u0631\u0622\u06cc\u0646\u062f \u0631\u0632\u0631\u0648 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0628\u0644\u06cc\u0637 \u0631\u0627 \u0628\u0631 \u0639\u0647\u062f\u0647 \u062f\u0627\u0634\u062a\u0645. \u0627\u06cc\u0646 \u062a\u062c\u0631\u0628\u0647\u060c \u062a\u0633\u0644\u0637 \u0645\u0646 \u0628\u0631 \u0627\u062f\u063a\u0627\u0645 API\u0647\u0627\u06cc \u067e\u0631\u062f\u0627\u062e\u062a \u0648 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0631\u0648\u0627\u0632 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0627\u0631\u062a\u0642\u0627 \u062f\u0627\u062f.<\/div>                                                        <\/article>\n\n                                    <div id=\"collab-modal-98c9b19-2\" class=\"collab-modal\" aria-hidden=\"true\">\n                        <div class=\"collab-modal__overlay\" data-close=\"1\"><\/div>\n                        <div class=\"collab-modal__dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"collab-modal-98c9b19-2-title\">\n                                                            <!-- Background Vectors -->\n                                <svg class=\"collab-modal__vector collab-modal__vector-1\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <circle cx=\"20\" cy=\"20\" r=\"8\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-2\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <path d=\"M80 15 L90 25 L80 35 L70 25 Z\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-3\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <rect x=\"15\" y=\"70\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-4\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <polygon points=\"85,75 90,85 80,85\" fill=\"currentColor\"\/>\n                                <\/svg>\n\n                                                                    <!-- Animated Background Vectors -->\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-2\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 77%; left: 52%; width: 28px; height: 28px; animation-delay: 0.5s;\">\n                                                                                            <path d=\"M25 25 L75 25 L75 75 L25 75 Z\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-3\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 49%; left: 46%; width: 36px; height: 36px; animation-delay: 1s;\">\n                                                                                            <polygon points=\"50,20 80,80 20,80\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-4\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 49%; left: 10%; width: 20px; height: 20px; animation-delay: 1.5s;\">\n                                                                                            <ellipse cx=\"50\" cy=\"50\" rx=\"30\" ry=\"20\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-1\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 34%; left: 61%; width: 28px; height: 28px; animation-delay: 2s;\">\n                                                                                            <circle cx=\"50\" cy=\"50\" r=\"25\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-2\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 40%; left: 41%; width: 36px; height: 36px; animation-delay: 2.5s;\">\n                                                                                            <path d=\"M25 25 L75 25 L75 75 L25 75 Z\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-3\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 31%; left: 66%; width: 20px; height: 20px; animation-delay: 3s;\">\n                                                                                            <polygon points=\"50,20 80,80 20,80\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-4\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 79%; left: 27%; width: 28px; height: 28px; animation-delay: 3.5s;\">\n                                                                                            <ellipse cx=\"50\" cy=\"50\" rx=\"30\" ry=\"20\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-1\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 15%; left: 41%; width: 36px; height: 36px; animation-delay: 4s;\">\n                                                                                            <circle cx=\"50\" cy=\"50\" r=\"25\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                                                                            <button class=\"collab-modal__close\" aria-label=\"\u0628\u0633\u062a\u0646\" data-close=\"1\">&times;<\/button>\n                            <div class=\"collab-modal__header\">\n                                <div class=\"collab-modal__logo-wrap\">\n                                                                            <img decoding=\"async\" class=\"collab-modal__logo\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/plane-logo-design-Top-removebg-preview.png\" alt=\"\u0634\u0631\u06a9\u062a \u0647\u0648\u0627\u067e\u06cc\u0645\u0627\u06cc\u06cc\" width=\"112\" height=\"112\" \/>\n                                                                    <\/div>\n                                <div class=\"collab-modal__titles\">\n                                    <h2 id=\"collab-modal-98c9b19-2-title\" class=\"collab-modal__company\">\u0634\u0631\u06a9\u062a \u0647\u0648\u0627\u067e\u06cc\u0645\u0627\u06cc\u06cc<\/h2>\n                                    <div class=\"collab-modal__role\">\u0637\u0631\u0627\u062d \u0633\u0627\u06cc\u062a<\/div>                                <\/div>\n                            <\/div>\n                            <div class=\"collab-modal__body\">\n                                <div class=\"collab-modal__desc\">\u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0637\u0631\u0627\u062d \u0648 \u062a\u0648\u0633\u0639\u0647\u200c\u062f\u0647\u0646\u062f\u0647 \u0648\u0628\u0633\u0627\u06cc\u062a \u0634\u0631\u06a9\u062a \u0647\u0648\u0627\u067e\u06cc\u0645\u0627\u06cc\u06cc [\u0646\u0627\u0645 \u0634\u0631\u06a9\u062a]\u060c \u0645\u0633\u0626\u0648\u0644\u06cc\u062a \u0637\u0631\u0627\u062d\u06cc UX\/UI \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644 \u0641\u0631\u0622\u06cc\u0646\u062f \u0631\u0632\u0631\u0648 \u0622\u0646\u0644\u0627\u06cc\u0646 \u0628\u0644\u06cc\u0637 \u0631\u0627 \u0628\u0631 \u0639\u0647\u062f\u0647 \u062f\u0627\u0634\u062a\u0645. \u0627\u06cc\u0646 \u062a\u062c\u0631\u0628\u0647\u060c \u062a\u0633\u0644\u0637 \u0645\u0646 \u0628\u0631 \u0627\u062f\u063a\u0627\u0645 API\u0647\u0627\u06cc \u067e\u0631\u062f\u0627\u062e\u062a \u0648 \u0633\u06cc\u0633\u062a\u0645\u200c\u0647\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u067e\u0631\u0648\u0627\u0632 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u0686\u0634\u0645\u06af\u06cc\u0631\u06cc \u0627\u0631\u062a\u0642\u0627 \u062f\u0627\u062f.<\/div>\n                                <ul class=\"collab-modal__facts\">\n                                    <li><i class=\"fa fa-calendar-alt\" aria-hidden=\"true\"><\/i><span>1398 \u2014 1399<\/span><\/li>                                    <li><i class=\"fa fa-user-tie\" aria-hidden=\"true\"><\/i><span>\u0637\u0631\u0627\u062d \u0633\u0627\u06cc\u062a<\/span><\/li>                                    <li><i class=\"fa fa-map-marker-alt\" aria-hidden=\"true\"><\/i><span>\u062d\u0636\u0648\u0631\u06cc \u062a\u0645\u0627\u0645 \u0648\u0642\u062a<\/span><\/li>                                    <li><i class=\"fa fa-clock\" aria-hidden=\"true\"><\/i><span>8 \u0635\u0628\u062d \u0627\u0644\u06cc 17 \u0639\u0635\u0631<\/span><\/li>                                <\/ul>\n                                                                    <div class=\"collab-modal__actions\">\n                                        <a class=\"collaboration-cta\" href=\"#\" target=\"_blank\" rel=\"noopener\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a<\/a>\n                                    <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                \n                                <article class=\"collaboration-item js-open-collab-modal\" aria-label=\"\u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc\" data-modal-id=\"collab-modal-98c9b19-3\">\n                                                                <div class=\"collaboration-ended-status\">\n                            <span class=\"ended-badge\">\u0627\u062a\u0645\u0627\u0645 \u0647\u0645\u06a9\u0627\u0631\u06cc<\/span>\n                        <\/div>\n                                        <div class=\"collaboration-content\">\n                        <div class=\"collaboration-logo-wrap\">\n                                                            <img loading=\"lazy\" class=\"collaboration-logo\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/\u0644\u0648\u06af\u0648-\u0645\u0647\u0627\u0645-2.png\" alt=\"\u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc\" loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" \/>\n                                                    <\/div>\n                        <div class=\"collaboration-info\">\n                            <h3 class=\"collaboration-name\" title=\"\u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc\">\u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc<\/h3>\n                            <div class=\"collaboration-role\"><i class=\"fa fa-user\" aria-hidden=\"true\"><\/i>\u0637\u0631\u0627\u062d \u0633\u0627\u06cc\u062a<\/div>                            <div class=\"collaboration-period\"><i class=\"fa fa-calendar-alt\" aria-hidden=\"true\"><\/i>1397 \u2014 1398<\/div>                        <\/div>\n                    <\/div>\n                    <div class=\"collaboration-desc\">\u062f\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc [\u0646\u0627\u0645 \u0622\u0698\u0627\u0646\u0633]\uff0c\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u06cc \u0631\u0627 \u0631\u0647\u0628\u0631\u06cc \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0646\u0647 \u062a\u0646\u0647\u0627 \u0647\u0648\u06cc\u062a \u0628\u0635\u0631\u06cc \u0628\u0631\u0646\u062f\u0647\u0627 \u0631\u0627 \u0645\u062a\u062d\u0648\u0644 \u06a9\u0631\u062f\u060c \u0628\u0644\u06a9\u0647 \u0646\u0631\u062e \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u062a\u0627 \u06f4\u06f0\u066a \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0627\u062f. \u0627\u06cc\u0646 \u0645\u0648\u0641\u0642\u06cc\u062a\u060c \u0646\u0642\u0634 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0627\u0631\u0628\u0631\u0645\u062d\u0648\u0631 \u0648 \u0633\u0626\u0648 \u062f\u0631 \u062c\u0630\u0628 \u0645\u062e\u0627\u0637\u0628 \u0631\u0627 \u0628\u0647 \u0645\u0646 \u0627\u062b\u0628\u0627\u062a \u06a9\u0631\u062f.<\/div>                                                        <\/article>\n\n                                    <div id=\"collab-modal-98c9b19-3\" class=\"collab-modal\" aria-hidden=\"true\">\n                        <div class=\"collab-modal__overlay\" data-close=\"1\"><\/div>\n                        <div class=\"collab-modal__dialog\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"collab-modal-98c9b19-3-title\">\n                                                            <!-- Background Vectors -->\n                                <svg class=\"collab-modal__vector collab-modal__vector-1\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <circle cx=\"20\" cy=\"20\" r=\"8\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-2\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <path d=\"M80 15 L90 25 L80 35 L70 25 Z\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-3\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <rect x=\"15\" y=\"70\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\"\/>\n                                <\/svg>\n                                <svg class=\"collab-modal__vector collab-modal__vector-4\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n                                    <polygon points=\"85,75 90,85 80,85\" fill=\"currentColor\"\/>\n                                <\/svg>\n\n                                                                    <!-- Animated Background Vectors -->\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-2\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 70%; left: 56%; width: 28px; height: 28px; animation-delay: 0.5s;\">\n                                                                                            <path d=\"M25 25 L75 25 L75 75 L25 75 Z\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-3\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 22%; left: 40%; width: 36px; height: 36px; animation-delay: 1s;\">\n                                                                                            <polygon points=\"50,20 80,80 20,80\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-4\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 78%; left: 10%; width: 20px; height: 20px; animation-delay: 1.5s;\">\n                                                                                            <ellipse cx=\"50\" cy=\"50\" rx=\"30\" ry=\"20\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-1\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 73%; left: 80%; width: 28px; height: 28px; animation-delay: 2s;\">\n                                                                                            <circle cx=\"50\" cy=\"50\" r=\"25\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-2\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 67%; left: 42%; width: 36px; height: 36px; animation-delay: 2.5s;\">\n                                                                                            <path d=\"M25 25 L75 25 L75 75 L25 75 Z\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-3\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 69%; left: 35%; width: 20px; height: 20px; animation-delay: 3s;\">\n                                                                                            <polygon points=\"50,20 80,80 20,80\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-4\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 48%; left: 19%; width: 28px; height: 28px; animation-delay: 3.5s;\">\n                                                                                            <ellipse cx=\"50\" cy=\"50\" rx=\"30\" ry=\"20\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                            <svg class=\"collab-modal__animated-vector collab-modal__animated-vector-1\" \n                                             viewBox=\"0 0 100 100\" \n                                             aria-hidden=\"true\"\n                                             style=\"top: 40%; left: 36%; width: 36px; height: 36px; animation-delay: 4s;\">\n                                                                                            <circle cx=\"50\" cy=\"50\" r=\"25\" fill=\"currentColor\"\/>\n                                                                                    <\/svg>\n                                                                                                                            <button class=\"collab-modal__close\" aria-label=\"\u0628\u0633\u062a\u0646\" data-close=\"1\">&times;<\/button>\n                            <div class=\"collab-modal__header\">\n                                <div class=\"collab-modal__logo-wrap\">\n                                                                            <img loading=\"lazy\" decoding=\"async\" class=\"collab-modal__logo\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/\u0644\u0648\u06af\u0648-\u0645\u0647\u0627\u0645-2.png\" alt=\"\u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc\" width=\"112\" height=\"112\" \/>\n                                                                    <\/div>\n                                <div class=\"collab-modal__titles\">\n                                    <h2 id=\"collab-modal-98c9b19-3-title\" class=\"collab-modal__company\">\u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc<\/h2>\n                                    <div class=\"collab-modal__role\">\u0637\u0631\u0627\u062d \u0633\u0627\u06cc\u062a<\/div>                                <\/div>\n                            <\/div>\n                            <div class=\"collab-modal__body\">\n                                <div class=\"collab-modal__desc\">\u062f\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc [\u0646\u0627\u0645 \u0622\u0698\u0627\u0646\u0633]\uff0c\u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u06cc \u0631\u0627 \u0631\u0647\u0628\u0631\u06cc \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0646\u0647 \u062a\u0646\u0647\u0627 \u0647\u0648\u06cc\u062a \u0628\u0635\u0631\u06cc \u0628\u0631\u0646\u062f\u0647\u0627 \u0631\u0627 \u0645\u062a\u062d\u0648\u0644 \u06a9\u0631\u062f\u060c \u0628\u0644\u06a9\u0647 \u0646\u0631\u062e \u062a\u0639\u0627\u0645\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0631\u0627 \u062a\u0627 \u06f4\u06f0\u066a \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0627\u062f. \u0627\u06cc\u0646 \u0645\u0648\u0641\u0642\u06cc\u062a\u060c \u0646\u0642\u0634 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0627\u0631\u0628\u0631\u0645\u062d\u0648\u0631 \u0648 \u0633\u0626\u0648 \u062f\u0631 \u062c\u0630\u0628 \u0645\u062e\u0627\u0637\u0628 \u0631\u0627 \u0628\u0647 \u0645\u0646 \u0627\u062b\u0628\u0627\u062a \u06a9\u0631\u062f.<\/div>\n                                <ul class=\"collab-modal__facts\">\n                                    <li><i class=\"fa fa-calendar-alt\" aria-hidden=\"true\"><\/i><span>1397 \u2014 1398<\/span><\/li>                                    <li><i class=\"fa fa-user-tie\" aria-hidden=\"true\"><\/i><span>\u0637\u0631\u0627\u062d \u0633\u0627\u06cc\u062a<\/span><\/li>                                    <li><i class=\"fa fa-map-marker-alt\" aria-hidden=\"true\"><\/i><span>\u062d\u0636\u0648\u0631\u06cc \u062a\u0645\u0627\u0645 \u0648\u0642\u062a<\/span><\/li>                                    <li><i class=\"fa fa-clock\" aria-hidden=\"true\"><\/i><span>8 \u0635\u0628\u062d \u0627\u0644\u06cc 16 \u0628\u0639\u062f\u0627\u0632 \u0638\u0647\u0631<\/span><\/li>                                <\/ul>\n                                                                    <div class=\"collab-modal__actions\">\n                                        <a class=\"collaboration-cta\" href=\"#\" target=\"_blank\" rel=\"noopener\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a<\/a>\n                                    <\/div>\n                                                            <\/div>\n                        <\/div>\n                    <\/div>\n                \n                            <\/div>\n        <\/div>\n        <style>\n        .skill-collaboration-widget {\n            padding: 20px 0;\n        }\n        .collaboration-widget-title {\n            text-align: center;\n            font-size: 2em;\n            font-weight: 800;\n            margin-bottom: 32px;\n            letter-spacing: 0.01em;\n        }\n        .collaboration-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n            gap: 32px 24px;\n            align-items: start;\n            margin-top: 20px;\n        }\n        .collaboration-item {\n            transition: transform 0.3s cubic-bezier(.4,2,.6,1), box-shadow 0.3s;\n            background: #fff;\n            border-radius: 18px;\n            box-shadow: 0 2px 16px 0 rgba(0,0,0,0.07);\n            padding: 20px 16px 16px 16px;\n            position: relative;\n            cursor: pointer;\n        }\n        \n        \/* Ended Status Badge *\/\n        .collaboration-ended-status {\n            position: absolute;\n            top: 12px;\n            left: 12px;\n            z-index: 2;\n        }\n        .ended-badge {\n            display: inline-block;\n            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);\n            color: #fff;\n            font-size: 11px;\n            font-weight: 700;\n            padding: 6px 12px;\n            border-radius: 12px;\n            box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            border: 1px solid rgba(255, 255, 255, 0.2);\n        }\n        .collaboration-item:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 8px 32px 0 rgba(0,0,0,0.13); }\n        .collaboration-item-link { position:absolute; inset:0; z-index:1; }\n        \n        \/* Horizontal layout container *\/\n        .collaboration-content {\n            display: flex;\n            align-items: center;\n            gap: 16px;\n            margin-bottom: 12px;\n        }\n        \n        .collaboration-logo-wrap { \n            width: 72px; \n            height: 72px; \n            border-radius: 12px; \n            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); \n            display:flex; \n            align-items:center; \n            justify-content:center; \n            box-shadow: 0 2px 8px 0 rgba(0,0,0,0.08); \n            overflow:hidden; \n            transition: box-shadow 0.3s; \n            flex-shrink: 0;\n        }\n        .collaboration-item:hover .collaboration-logo-wrap { box-shadow: 0 4px 16px 0 rgba(0,0,0,0.16); }\n        .collaboration-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; filter: grayscale(0.2) contrast(1.1); transition: filter 0.3s; }\n        .collaboration-item:hover .collaboration-logo { filter: grayscale(0) contrast(1.2); }\n        \n        \/* Text content container *\/\n        .collaboration-info {\n            flex: 1;\n            text-align: right;\n        }\n        \n        .collaboration-name { \n            margin: 0 0 8px 0; \n            font-size: 1.1em; \n            font-weight: 700; \n            letter-spacing: 0.01em; \n            color: #222;\n            line-height: 1.3;\n        }\n        .collaboration-role { \n            margin: 0 0 6px 0; \n            font-size: .9em; \n            opacity: .8; \n            color: #666;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n        .collaboration-role i { \n            font-size: 12px; \n            color: #4f8cff; \n        }\n        .collaboration-period { \n            margin: 0; \n            font-size: .85em; \n            opacity: .7; \n            color: #888;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n        }\n        .collaboration-period i { \n            font-size: 12px; \n            color: #4f8cff; \n        }\n        .collaboration-desc { margin-top: 8px; font-size: .95em; opacity: .9; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis; min-height: 2.8em; }\n        .collaboration-cta { margin-top: 12px; display:inline-block; padding: 8px 14px; border-radius: 10px; font-weight: 700; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.08); position: relative; z-index:2; }\n        @media (max-width: 600px) {\n            .collaboration-grid { gap: 18px 12px; }\n            .collaboration-content { gap: 12px; }\n            .collaboration-logo-wrap { width: 60px; height: 60px; border-radius: 10px; }\n            .collaboration-logo { width: 46px; height: 46px; border-radius: 6px; }\n            .collaboration-name { font-size: 1em; }\n            .collaboration-role { font-size: .85em; }\n            .collaboration-period { font-size: .8em; }\n            .ended-badge { font-size: 10px; padding: 4px 8px; }\n        }\n\n        \/* Modal *\/\n        .collab-modal { \n            position: fixed; \n            inset: 0; \n            z-index: 9999; \n            align-items:center; \n            justify-content:center; \n            opacity: 0;\n            visibility: hidden;\n            transition: opacity 0.3s ease, visibility 0.3s ease;\n        }\n        .collab-modal.is-open { \n            opacity: 1;\n            visibility: visible;\n        }\n        .collab-modal__overlay { \n            position:absolute; \n            inset:0; \n            background: rgba(0,0,0,.6); \n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n        .collab-modal.is-open .collab-modal__overlay { \n            opacity: 1;\n        }\n        .collab-modal__dialog { \n            position:relative; \n            margin: 0; \n            background: #121212; \n            color:#fff; \n            width:min(920px, 92vw); \n            border-radius: 20px; \n            box-shadow: 0 20px 80px rgba(0,0,0,.5); \n            overflow:hidden; \n            z-index:1; \n            transform: translateY(100vh);\n            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n        }\n        .collab-modal.is-open .collab-modal__dialog { \n            transform: translateY(0); \n        }\n        \n        \/* Background Vectors *\/\n        .collab-modal__vector { position: absolute; pointer-events: none; z-index: 0; opacity: 0.15; }\n        .collab-modal__vector-1 { top: 10%; left: 10%; width: 60px; height: 60px; }\n        .collab-modal__vector-2 { top: 15%; right: 15%; width: 50px; height: 50px; }\n        .collab-modal__vector-3 { bottom: 20%; left: 8%; width: 45px; height: 45px; }\n        .collab-modal__vector-4 { bottom: 15%; right: 10%; width: 55px; height: 55px; }\n\n        \/* Animated Background Vectors *\/\n        .collab-modal__animated-vector { \n            position: absolute; \n            pointer-events: none; \n            z-index: 0; \n            opacity: 0.08; \n            animation: float-around 25s infinite linear;\n        }\n        \n        @keyframes float-around {\n            0% { \n                transform: translate(0, 0) rotate(0deg) scale(1); \n                opacity: 0.08;\n            }\n            25% { \n                transform: translate(20px, -15px) rotate(90deg) scale(1.1); \n                opacity: 0.12;\n            }\n            50% { \n                transform: translate(-10px, 25px) rotate(180deg) scale(0.9); \n                opacity: 0.06;\n            }\n            75% { \n                transform: translate(15px, 10px) rotate(270deg) scale(1.05); \n                opacity: 0.1;\n            }\n            100% { \n                transform: translate(0, 0) rotate(360deg) scale(1); \n                opacity: 0.08;\n            }\n        }\n\n        \/* Different animation patterns for different vector types *\/\n        .collab-modal__animated-vector-1 { animation-timing-function: ease-in-out; }\n        .collab-modal__animated-vector-2 { animation-timing-function: ease-in; }\n        .collab-modal__animated-vector-3 { animation-timing-function: ease-out; }\n        .collab-modal__animated-vector-4 { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }\n        \n        .collab-modal__close { position:absolute; top:10px; inset-inline-end:10px; background:#1e1e1e; border:0; color:#fff; width:36px; height:36px; border-radius:10px; cursor:pointer; z-index:2; }\n        .collab-modal__header { display:flex; align-items:center; gap:16px; padding:28px 24px 0 24px; position: relative; z-index: 1; }\n        .collab-modal__logo-wrap { \n            width:96px; \n            height:96px; \n            border-radius:16px; \n            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%); \n            display:flex; \n            align-items:center; \n            justify-content:center; \n            overflow:hidden; \n            box-shadow: \n                0 8px 32px rgba(0,0,0,0.4),\n                inset 0 2px 8px rgba(255,255,255,0.1),\n                inset 0 -2px 8px rgba(0,0,0,0.3);\n            position: relative;\n        }\n        .collab-modal__logo-wrap::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-radius: 16px;\n            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(0,0,0,0.2) 100%);\n            pointer-events: none;\n        }\n        .collab-modal__logo { \n            width:86px; \n            height:86px; \n            object-fit:contain; \n            border-radius:12px; \n            filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));\n            transform: perspective(200px) rotateY(-5deg) rotateX(5deg);\n            transition: transform 0.3s ease, filter 0.3s ease;\n        }\n        .collab-modal__logo:hover {\n            transform: perspective(200px) rotateY(0deg) rotateX(0deg) scale(1.05);\n            filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));\n        }\n        .collab-modal__company { font-size: 40px; font-weight:800; margin:0; }\n        .collab-modal__role { margin-top:6px; opacity:.9; }\n        .collab-modal__body { \n            display:grid; \n            grid-template-columns: 1.2fr .8fr; \n            gap:24px; \n            padding:24px 32px 32px 32px; \n            position: relative; \n            z-index: 1; \n        }\n        \n        \/* Description Box - Glassmorphism Style *\/\n        .collab-modal__desc { \n            line-height:1.7; \n            color:#f8f9fa; \n            font-size: 15px;\n            background: rgba(255, 255, 255, 0.03);\n            backdrop-filter: blur(20px);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            border-radius: 20px;\n            padding: 20px;\n            position: relative;\n            overflow: hidden;\n            box-shadow: \n                0 8px 32px rgba(0, 0, 0, 0.3),\n                inset 0 1px 0 rgba(255, 255, 255, 0.1);\n            height: 340px;\n            overflow: hidden;\n        }\n        .collab-modal__desc::before {\n            content: '';\n            position: absolute;\n            top: -50%;\n            left: -50%;\n            width: 200%;\n            height: 200%;\n            background: conic-gradient(\n                from 0deg,\n                transparent,\n                rgba(79, 140, 255, 0.1),\n                transparent,\n                rgba(110, 231, 183, 0.1),\n                transparent,\n                rgba(255, 180, 58, 0.1),\n                transparent\n            );\n            animation: rotate-gradient 8s linear infinite;\n            opacity: 0.5;\n        }\n        @keyframes rotate-gradient {\n            from { transform: rotate(0deg); }\n            to { transform: rotate(360deg); }\n        }\n        \n        \/* Facts Container - Modern Grid *\/\n        .collab-modal__facts { \n            list-style:none; \n            margin:0; \n            padding:0; \n            display:grid; \n            gap:20px; \n        }\n        \n        \/* Individual Fact Items - Neumorphism Style *\/\n        .collab-modal__facts li { \n            display:flex; \n            align-items:center; \n            gap:14px; \n            background: linear-gradient(145deg, #1e1e1e, #2a2a2a);\n            padding:16px 20px; \n            border-radius:18px; \n            border: none;\n            box-shadow: \n                6px 6px 12px rgba(0, 0, 0, 0.4),\n                -6px -6px 12px rgba(255, 255, 255, 0.05),\n                inset 2px 2px 4px rgba(255, 255, 255, 0.05),\n                inset -2px -2px 4px rgba(0, 0, 0, 0.3);\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            position: relative;\n            overflow: hidden;\n        }\n        .collab-modal__facts li::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, \n                transparent 0%, \n                rgba(79, 140, 255, 0.1) 25%, \n                rgba(110, 231, 183, 0.1) 50%, \n                rgba(255, 180, 58, 0.1) 75%, \n                transparent 100%);\n            transform: translateX(-100%);\n            transition: transform 0.6s ease;\n        }\n        .collab-modal__facts li:hover::before {\n            transform: translateX(100%);\n        }\n        .collab-modal__facts li:hover {\n            transform: translateY(-4px) scale(1.02);\n            box-shadow: \n                12px 12px 24px rgba(0, 0, 0, 0.5),\n                -12px -12px 24px rgba(255, 255, 255, 0.08),\n                inset 2px 2px 4px rgba(255, 255, 255, 0.08),\n                inset -2px -2px 4px rgba(0, 0, 0, 0.2);\n        }\n        \n        \/* Icon Styling - Floating Orbs *\/\n        .collab-modal__facts i { \n            color:#4f8cff; \n            font-size:16px; \n            background: radial-gradient(circle, rgba(79, 140, 255, 0.2) 0%, rgba(79, 140, 255, 0.1) 70%);\n            padding: 10px;\n            border-radius: 50%;\n            min-width: 38px;\n            height: 38px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            box-shadow: \n                0 3px 12px rgba(79, 140, 255, 0.3),\n                inset 0 1px 3px rgba(255, 255, 255, 0.2);\n            border: 1px solid rgba(79, 140, 255, 0.3);\n            transition: all 0.3s ease;\n        }\n        .collab-modal__facts li:hover i {\n            transform: scale(1.1) rotate(5deg);\n            box-shadow: \n                0 8px 24px rgba(79, 140, 255, 0.4),\n                inset 0 2px 4px rgba(255, 255, 255, 0.3);\n        }\n        \n        \/* Text Styling *\/\n        .collab-modal__facts span {\n            font-weight: 500;\n            color: #f0f0f0;\n            font-size: 15px;\n            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\n        }\n        \n        \/* Actions Container - Modern Layout *\/\n        .collab-modal__actions { \n            margin-top:24px; \n            display: flex;\n            gap: 16px;\n            flex-wrap: wrap;\n        }\n        html.skill-modal-open { overflow: hidden; }\n        .collab-modal__dialog { max-height: 92vh; overflow: auto; }\n        @media (max-width: 900px) {\n            .collab-modal__company { font-size:32px; }\n        }\n        @media (max-width: 700px) {\n            .collab-modal__dialog { width: 96vw; max-height: 92vh; border-radius: 16px; margin: 0; }\n            .collab-modal__header { flex-direction: column; align-items: center; text-align: center; padding: 20px 16px 0 16px; }\n            .collab-modal__logo-wrap { \n                width: 84px; \n                height: 84px; \n                border-radius: 14px;\n                box-shadow: \n                    0 6px 24px rgba(0,0,0,0.4),\n                    inset 0 2px 6px rgba(255,255,255,0.1),\n                    inset 0 -2px 6px rgba(0,0,0,0.3);\n            }\n            .collab-modal__logo { \n                width: 76px; \n                height: 76px; \n                border-radius: 10px;\n                transform: perspective(150px) rotateY(-3deg) rotateX(3deg);\n            }\n            .collab-modal__logo:hover {\n                transform: perspective(150px) rotateY(0deg) rotateX(0deg) scale(1.03);\n            }\n            .collab-modal__body { \n                grid-template-columns: 1fr; \n                padding: 20px 16px 24px 16px; \n                gap: 20px;\n            }\n            .collab-modal__desc {\n                padding: 20px;\n                font-size: 15px;\n            }\n            .collab-modal__facts { \n                grid-template-columns: 1fr; \n                gap: 16px;\n            }\n            .collab-modal__facts li {\n                padding: 16px 20px;\n                gap: 14px;\n            }\n            .collab-modal__facts i {\n                padding: 10px;\n                min-width: 38px;\n                height: 38px;\n                font-size: 16px;\n            }\n            .collab-modal__actions { \n                margin-top: 20px; \n                flex-direction: column;\n            }\n            .collab-modal__actions .collaboration-cta { \n                width: 100%; \n                text-align: center; \n            }\n            .collab-modal__company { font-size:28px; }\n        }\n        @media (max-width: 400px) {\n            .collab-modal__company { font-size:24px; }\n            .collab-modal__close { width: 40px; height: 40px; }\n        }\n        <\/style>\n        <script>\n        (function(){\n            var root = document.getElementById('skill-collab-98c9b19');\n            if(!root) return;\n            \n            \/\/ Initialize modals with display: flex\n            root.querySelectorAll('.collab-modal').forEach(function(modal){\n                modal.style.display = 'flex';\n            });\n            \n            root.addEventListener('click', function(e){\n                var item = e.target.closest('.js-open-collab-modal');\n                if(!item || !root.contains(item)) return;\n                var id = item.getAttribute('data-modal-id');\n                if(!id) return;\n                var modal = document.getElementById(id);\n                if(!modal) return;\n                modal.classList.add('is-open');\n                document.documentElement.classList.add('skill-modal-open');\n            });\n            root.querySelectorAll('.collab-modal').forEach(function(modal){\n                modal.addEventListener('click', function(ev){\n                    if(ev.target.closest('[data-close]')){ \n                        modal.classList.remove('is-open'); \n                        document.documentElement.classList.remove('skill-modal-open'); \n                    }\n                });\n            });\n            document.addEventListener('keydown', function(ev){\n                if(ev.key === 'Escape'){\n                    root.querySelectorAll('.collab-modal.is-open').forEach(function(m){ \n                        m.classList.remove('is-open'); \n                    });\n                    document.documentElement.classList.remove('skill-modal-open');\n                }\n            });\n        })();\n        <\/script>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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-cc57904 e-grid e-con-boxed e-con e-parent\" data-id=\"cc57904\" 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-6678298 elementor-widget elementor-widget-skill-career-history\" data-id=\"6678298\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill-career-history.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-career-history-widget\" id=\"career-history-6678298\">\r\n                            <div class=\"career-history-title-row\" style=\"display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;flex-direction:row-reverse;\">\r\n                    <h2 class=\"career-history-widget-title\" style=\"font-size:24px;font-weight:bold;\">\u0633\u0648\u0627\u0628\u0642 \u0634\u063a\u0644\u06cc \u0645\u0646<\/h2>\r\n                    <span class=\"career-history-title-dot\" aria-hidden=\"true\"><\/span>\r\n                <\/div>\r\n                        <div class=\"career-history-scroll-wrapper\" style=\"overflow-y: auto; overflow-x: hidden;\">\r\n                <div class=\"career-history-list\" style=\"position:relative;\">\r\n                    <!-- Vertical line for all items -->\r\n                    <div class=\"career-history-vertical-line\"><\/div>\r\n                                            <div class=\"career-history-row\" data-index=\"0\" style=\"position:relative; transition: opacity 0.4s, transform 0.4s;\">\r\n                            <!-- Dot on the vertical line -->\r\n                            <div class=\"career-history-dot-on-line\" style=\"position:absolute;\"><\/div>\r\n                            <div class=\"career-history-col career-history-col--right\">\r\n                                <div class=\"career-history-date-company\">\r\n                                    <span class=\"career-history-date\">\r\n                                        1404 - \u062a\u0627\u06a9\u0646\u0648\u0646                                    <\/span>\r\n                                    <span class=\"career-history-company\">\r\n                                        \u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a                                    <\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"career-history-col career-history-col--left\">\r\n                                <div class=\"career-history-title\">\r\n                                    \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633                                <\/div>\r\n                                <div class=\"career-history-desc\">\r\n                                    \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u06cc \u062f\u0631 \u0645\u062d\u06cc\u0637\u06cc \u067e\u0648\u06cc\u0627 \u0648 \u0634\u0631\u06a9\u062a \u062a\u0648\u0627\u0646\u0627                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"career-history-row\" data-index=\"1\" style=\"position:relative; transition: opacity 0.4s, transform 0.4s;\">\r\n                            <!-- Dot on the vertical line -->\r\n                            <div class=\"career-history-dot-on-line\" style=\"position:absolute;\"><\/div>\r\n                            <div class=\"career-history-col career-history-col--right\">\r\n                                <div class=\"career-history-date-company\">\r\n                                    <span class=\"career-history-date\">\r\n                                        1399 - 1404                                    <\/span>\r\n                                    <span class=\"career-history-company\">\r\n                                        \u0634\u0631\u06a9\u062a \u0698\u0627\u06a9\u062a                                    <\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"career-history-col career-history-col--left\">\r\n                                <div class=\"career-history-title\">\r\n                                    \u0645\u062a\u062e\u0635\u0635 \u0648\u0631\u062f\u067e\u0631\u0633                                <\/div>\r\n                                <div class=\"career-history-desc\">\r\n                                    \u0633\u0627\u0628\u0642\u0647 \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0631 \u062a\u06cc\u0645 \u0641\u0646\u06cc \u06cc\u06a9 \u0634\u0631\u06a9\u062a \u0645\u0639\u062a\u0628\u0631                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"career-history-row\" data-index=\"2\" style=\"position:relative; transition: opacity 0.4s, transform 0.4s;\">\r\n                            <!-- Dot on the vertical line -->\r\n                            <div class=\"career-history-dot-on-line\" style=\"position:absolute;\"><\/div>\r\n                            <div class=\"career-history-col career-history-col--right\">\r\n                                <div class=\"career-history-date-company\">\r\n                                    <span class=\"career-history-date\">\r\n                                        1398 - 1399                                    <\/span>\r\n                                    <span class=\"career-history-company\">\r\n                                        \u0634\u0631\u06a9\u062a \u0647\u0648\u0627\u067e\u06cc\u0645\u0627\u06cc\u06cc                                    <\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"career-history-col career-history-col--left\">\r\n                                <div class=\"career-history-title\">\r\n                                    \u0637\u0631\u0627\u062d \u0633\u0627\u06cc\u062a                                <\/div>\r\n                                <div class=\"career-history-desc\">\r\n                                    \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0637\u0631\u0627\u062d \u0648 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                            <div class=\"career-history-row\" data-index=\"3\" style=\"position:relative; transition: opacity 0.4s, transform 0.4s;\">\r\n                            <!-- Dot on the vertical line -->\r\n                            <div class=\"career-history-dot-on-line\" style=\"position:absolute;\"><\/div>\r\n                            <div class=\"career-history-col career-history-col--right\">\r\n                                <div class=\"career-history-date-company\">\r\n                                    <span class=\"career-history-date\">\r\n                                        1397 - 1398                                    <\/span>\r\n                                    <span class=\"career-history-company\">\r\n                                        \u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc                                    <\/span>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div class=\"career-history-col career-history-col--left\">\r\n                                <div class=\"career-history-title\">\r\n                                    \u0637\u0631\u0627\u062d \u0633\u0627\u06cc\u062a                                <\/div>\r\n                                <div class=\"career-history-desc\">\r\n                                    \u062f\u0631 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u0622\u0698\u0627\u0646\u0633 \u062a\u0628\u0644\u06cc\u063a\u0627\u062a\u06cc \u0648 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a\u06cc                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                                    <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <style>\r\n        \/* Career History Widget Styles *\/\r\n        #career-history-6678298 {\r\n            direction: rtl;\r\n            border-radius: 12px;\r\n            padding: 32px 24px;\r\n            position: relative;\r\n            max-width: 600px;\r\n            margin: 0 auto;\r\n        }\r\n        #career-history-6678298 .career-history-title-dot {width:10px;height:10px;background:#1e73be;border-radius:2px;display:inline-block}\r\n        #career-history-6678298 .career-history-scroll-wrapper {\r\n            overflow-y: auto;\r\n            overflow-x: hidden;\r\n            position: relative;\r\n        }\r\n        #career-history-6678298 .career-history-list {\r\n            transition: transform 0.3s;\r\n            position: relative;\r\n        }\r\n        \/* Vertical line spanning all items *\/\r\n        #career-history-6678298 .career-history-vertical-line {\r\n            position: absolute;\r\n            right: 170px;\r\n            top: 0;\r\n            width: 2px;\r\n            height: 100%;\r\n            background: var(--career-line-color, #2a2e42);\r\n            z-index: 1;\r\n        }\r\n        \/* Each row *\/\r\n        #career-history-6678298 .career-history-row {\r\n            display: flex;\r\n            flex-direction: row;\r\n            align-items: flex-start;\r\n            margin-bottom: 32px;\r\n            position: relative;\r\n            min-height: 48px;\r\n        }\r\n        \/* Dot on the vertical line *\/\r\n        #career-history-6678298 .career-history-dot-on-line {\r\n            right: 166px;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            width: 10px;\r\n            height: 10px;\r\n            background: var(--career-dot-color, #0E59F2);\r\n            border-radius: 50%;\r\n            position: absolute;\r\n            z-index: 2;\r\n        }\r\n        #career-history-6678298 .career-history-col--right {\r\n            width: 180px;\r\n            min-width: 180px;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n            position: relative;\r\n            z-index: 3;\r\n        }\r\n        #career-history-6678298 .career-history-date-company {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: flex-end;\r\n        }\r\n        #career-history-6678298 .career-history-date {\r\n            font-weight: bold;\r\n            font-size: 16px;\r\n            margin-bottom: 2px;\r\n        }\r\n        #career-history-6678298 .career-history-company {\r\n            font-size: 14px;\r\n        }\r\n        #career-history-6678298 .career-history-col--left {\r\n            flex: 1;\r\n            padding-right: 32px;\r\n            border-right: none;\r\n            z-index: 3;\r\n        }\r\n        #career-history-6678298 .career-history-title {\r\n            font-weight: bold;\r\n            font-size: 18px;\r\n            margin-bottom: 6px;\r\n        }\r\n        #career-history-6678298 .career-history-desc {\r\n            font-size: 15px;\r\n        }\r\n        #career-history-6678298 .career-history-scroll-btns {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            position: absolute;\r\n            left: 16px;\r\n            bottom: 16px;\r\n            z-index: 2;\r\n        }\r\n        #career-history-6678298 .career-history-btn {\r\n            border: none;\r\n            border-radius: 6px;\r\n            width: 36px;\r\n            height: 36px;\r\n            margin: 2px 0;\r\n            font-size: 20px;\r\n            cursor: pointer;\r\n            transition: background 0.2s;\r\n        }\r\n        #career-history-6678298 .career-history-btn:active {\r\n            filter: brightness(0.9);\r\n        }\r\n        @media (max-width: 600px) {\r\n            #career-history-6678298 {\r\n                padding: 16px 4px;\r\n            }\r\n            #career-history-6678298 .career-history-col--right {\r\n                width: 110px;\r\n                min-width: 110px;\r\n            }\r\n            #career-history-6678298 .career-history-col--left {\r\n                padding-right: 12px;\r\n            }\r\n            #career-history-6678298 .career-history-vertical-line {\r\n                right: 100px;\r\n            }\r\n            #career-history-6678298 .career-history-dot-on-line {\r\n                right: 96px;\r\n            }\r\n        }\r\n        <\/style>\r\n        <script>\r\n        \/\/ Set CSS variables for dynamic colors\r\n        (function(){\r\n            var widget = document.getElementById('career-history-6678298');\r\n            if (!widget) return;\r\n            var dotColor = getComputedStyle(widget.querySelector('.career-history-dot-on-line')).backgroundColor;\r\n            var lineColor = getComputedStyle(widget.querySelector('.career-history-vertical-line')).backgroundColor;\r\n            widget.style.setProperty('--career-dot-color', dotColor);\r\n            widget.style.setProperty('--career-line-color', lineColor);\r\n        })();\r\n        <\/script>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0c14086 elementor-widget elementor-widget-skill_certificate\" data-id=\"0c14086\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_certificate.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-certificate-list\">\r\n            <div class=\"skill-certificate-title-row\" style=\"display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;flex-direction:row-reverse;justify-content: flex-end;\">\r\n        <h2 class=\"skill-certificate-main-title\" style=\"font-size:24px;font-weight:bold;\">\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0646<\/h2>\r\n        <span class=\"skill-certificate-title-dot\" aria-hidden=\"true\"><\/span>\r\n    <\/div>\r\n<div class=\"skill-certificate-list\">\r\n                        <div class=\"skill-certificate-item\">\r\n                <!-- Logo on the right -->\r\n                                    <div class=\"skill-certificate-logo\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/seo-icon-png-2251.png\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0633\u0626\u0648\u062a\u06a9\u0646\u06cc\u06a9\u0627\u0644\">\r\n                    <\/div>\r\n                                <!-- Text on the left -->\r\n                <div class=\"skill-certificate-content\">\r\n                    <div class=\"skill-certificate-title\">\r\n                        \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0633\u0626\u0648\u062a\u06a9\u0646\u06cc\u06a9\u0627\u0644                    <\/div>\r\n                    <div class=\"skill-certificate-subtitle\">\r\n                        \u0627\u0635\u0648\u0644 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0633\u0626\u0648 \u0633\u0627\u0644 1399                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <div class=\"skill-certificate-item\">\r\n                <!-- Logo on the right -->\r\n                                    <div class=\"skill-certificate-logo\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/aquicon-icon-18710.png\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0645\u062a\u062e\u0635\u0635 UI\/UX\">\r\n                    <\/div>\r\n                                <!-- Text on the left -->\r\n                <div class=\"skill-certificate-content\">\r\n                    <div class=\"skill-certificate-title\">\r\n                        \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0645\u062a\u062e\u0635\u0635 UI\/UX                    <\/div>\r\n                    <div class=\"skill-certificate-subtitle\">\r\n                        \u0627\u0635\u0648\u0644 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u062a\u0645\u0627\u0645\u06cc \u0645\u0628\u0627\u062d\u062b 1402                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <div class=\"skill-certificate-item\">\r\n                <!-- Logo on the right -->\r\n                                    <div class=\"skill-certificate-logo\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/phpmyadmin-icon-5610.png\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0645\u062a\u062e\u0635\u0635 php\">\r\n                    <\/div>\r\n                                <!-- Text on the left -->\r\n                <div class=\"skill-certificate-content\">\r\n                    <div class=\"skill-certificate-title\">\r\n                        \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0645\u062a\u062e\u0635\u0635 php                    <\/div>\r\n                    <div class=\"skill-certificate-subtitle\">\r\n                        \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0635\u0641\u0631 \u062a\u0627\u0635\u062f php                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <div class=\"skill-certificate-item\">\r\n                <!-- Logo on the right -->\r\n                                    <div class=\"skill-certificate-logo\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/painting-icon-3848.jpg\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0637\u0631\u0627\u062d\u06cc \u06af\u0631\u0627\u0641\u06cc\u06a9\">\r\n                    <\/div>\r\n                                <!-- Text on the left -->\r\n                <div class=\"skill-certificate-content\">\r\n                    <div class=\"skill-certificate-title\">\r\n                        \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0637\u0631\u0627\u062d\u06cc \u06af\u0631\u0627\u0641\u06cc\u06a9                    <\/div>\r\n                    <div class=\"skill-certificate-subtitle\">\r\n                        \u0627\u0635\u0648\u0644 \u0637\u0631\u0627\u062d\u06cc \u06af\u0631\u0627\u0641\u06cc\u06a9 \u0635\u0641\u0631 \u062a\u0627 \u0635\u062f                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                    <div class=\"skill-certificate-item\">\r\n                <!-- Logo on the right -->\r\n                                    <div class=\"skill-certificate-logo\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/marketing-png-1310.png\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0627\u0635\u0648\u0644 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af\">\r\n                    <\/div>\r\n                                <!-- Text on the left -->\r\n                <div class=\"skill-certificate-content\">\r\n                    <div class=\"skill-certificate-title\">\r\n                        \u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0627\u0635\u0648\u0644 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af                    <\/div>\r\n                    <div class=\"skill-certificate-subtitle\">\r\n                        \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0633\u0641\u0631 \u062a\u0627 \u0635\u062f \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0645\u0627\u0631\u06a9\u062a\u06cc\u0646\u06af                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <\/div>\r\n        <style>\r\n        \/* Certificate Widget Styles *\/\r\n        .skill-certificate-list {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 16px;\r\n            border-radius: 12px;\r\n            padding: 12px;\r\n            max-height: 350px;\r\n            overflow-y: auto;\r\n            direction: rtl;\r\n            text-align: right;\r\n        }\r\n        .skill-certificate-title-dot {width:10px;height:10px;background:#1e73be;border-radius:2px;display:inline-block}\r\n.skill-certificate-item {\r\n    display: flex;\r\n    flex-direction: row-reverse;\r\n    align-items: center;\r\n    border-radius: 12px;\r\n    padding: 18px 24px;\r\n    transition: box-shadow 0.3s;\r\n    margin-bottom: 0;\r\n}\r\n.skill-certificate-logo {\r\n    border-radius: 16px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    min-width: 56px;\r\n    min-height: 56px;\r\n    background: #181a28;\r\n    transition: background 0.3s;\r\n    margin-right: 20px;\r\n}\r\n.skill-certificate-logo img {\r\n    border-radius: 12px;\r\n    filter: grayscale(100%);\r\n    transition: filter 0.3s;\r\n    background: transparent;\r\n    padding: 0;\r\n}\r\n.skill-certificate-item:hover {\r\n    cursor: pointer;\r\n}\r\n.skill-certificate-item:hover .skill-certificate-logo img {\r\n    filter: grayscale(0%);\r\n}\r\n.skill-certificate-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 8px;\r\n    flex: 1;\r\n    text-align: right;\r\n}\r\n\r\n.skill-certificate-title {\r\n\tfont-size: 18px;\r\n    font-weight: bold;\r\n}\r\n\r\n.skill-certificate-subtitle {\r\n\tfont-size: 15px;\r\n    font-weight: 300;\r\n}\r\n        <\/style>\r\n        \t\t\t\t<\/div>\n\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-8072cf1 e-flex e-con-boxed e-con e-parent\" data-id=\"8072cf1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-a2a1210 e-con-full e-flex e-con e-child\" data-id=\"a2a1210\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bd6d46b elementor-widget elementor-widget-skill_title_desc\" data-id=\"bd6d46b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_title_desc.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tdw-wrap\" dir=\"rtl\">\r\n\t\t\t<div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n\t\t\t\t\t\t\t\t\t<h2 class=\"tdw-title\">\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u0645\u0646<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8d560d0 elementor-widget elementor-widget-skill_certificate_slider\" data-id=\"8d560d0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_certificate_slider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"skill-certificate-slider\" id=\"skill_cert_slider_6a614cf2b2c5b\" dir=\"rtl\"\r\n\t\t\tdata-effect=\"coverflow\"\r\n\t\t\tdata-autoplay=\"true\"\r\n\t\t\tdata-delay=\"4000\"\r\n\t\t\tdata-loop=\"false\"\r\n\t\t\tdata-speed=\"500\"\r\n\t\t\tdata-pagination-type=\"bullets\"\r\n\t\t\tdata-navigation=\"false\"\r\n\t\t\tdata-centered=\"false\"\r\n\t\t\tdata-space-between=\"24\"\r\n\t\t\tdata-slides-desktop=\"3\"\r\n\t\t\tdata-slides-tablet=\"2\"\r\n\t\t\tdata-slides-mobile=\"1\"\r\n\t\t\tdata-show-thumbs=\"true\"\r\n\t\t\tdata-thumbs-height=\"64\"\r\n\t\t\tdata-thumbs-space=\"8\"\r\n\t\t>\r\n\t\t\t<!-- Main Slider Container (Left Side) -->\r\n\t\t\t<div class=\"main-slider-container\">\r\n\t\t\t<style>\r\n\t\t\t\t\/* Certificate Slider - Figma Design Layout *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b { \r\n\t\t\t\t\tdirection: rtl; \r\n\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\tmax-width: 100%;\r\n\t\t\t\t\toverflow: hidden;\r\n\t\t\t\t\tpadding: 40px 20px;\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\tgap: 30px;\r\n\t\t\t\t\talign-items: flex-start;\r\n\t\t\t\t\tflex-direction: row-reverse;\r\n\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/* Main Slider Container (Left Side) *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .main-slider-container {\r\n\t\t\t\t\tflex: 1;\r\n\t\t\t\t\tmax-width: 60%;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper { \r\n\t\t\t\t\tposition: relative; \r\n\t\t\t\t\twidth: 639px !important; \r\n\t\t\t\t\theight: 346px !important;\r\n\t\t\t\t\tpadding: 0 !important; \r\n\t\t\t\t\tmargin: 0 !important; \r\n\t\t\t\t\tbackground: transparent !important;\r\n\t\t\t\t\tborder-radius: 15px;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper .swiper-wrapper { \r\n\t\t\t\t\talign-items: center !important; \r\n\t\t\t\t\theight: 100%;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper .swiper-slide {\r\n\t\t\t\t\twidth: 100% !important;\r\n\t\t\t\t\theight: 100%;\r\n\t\t\t\t\tbackground: transparent;\r\n\t\t\t\t\tborder-radius: 0;\r\n\t\t\t\t\toverflow: visible;\r\n\t\t\t\t\ttransition: all 0.3s ease;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper .swiper-slide-active { \r\n\t\t\t\t\tz-index: 2; \r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-slide {\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\theight: 100%;\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\tborder-radius: 8px;\r\n\t\t\t\t\tbox-shadow: 0 8px 32px rgba(0,0,0,0.15);\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/* Certificate Frame *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .certificate-frame {\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\theight: 100%;\r\n\t\t\t\t\tborder: 3px solid #333;\r\n\t\t\t\t\tborder-radius: 0;\r\n\t\t\t\t\toverflow: hidden;\r\n\t\t\t\t\tbox-shadow: 0 0 30px rgba(0, 0, 0, 0.3);\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/* Decorative Bottom Border *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .certificate-frame::after {\r\n\t\t\t\t\tcontent: '';\r\n\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\tbottom: 0;\r\n\t\t\t\t\tleft: 0;\r\n\t\t\t\t\tright: 0;\r\n\t\t\t\t\theight: 60px;\r\n\t\t\t\t\tbackground: linear-gradient(45deg, #333 0%, #666 50%, #333 100%);\r\n\t\t\t\t\tz-index: 1;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/* Certificate Content Area *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .certificate-content {\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\theight: 100%;\r\n\t\t\t\t\tbackground: #fff;\r\n\t\t\t\t\tdisplay: flex;\r\n\t\t\t\t\talign-items: center;\r\n\t\t\t\t\tjustify-content: center;\r\n\t\t\t\t\tz-index: 2;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-image { \r\n\t\t\t\t\tposition: relative; \r\n\t\t\t\t\tdisplay: block; \r\n\t\t\t\t\tmax-width: 100%; \r\n\t\t\t\t\tmax-height: 100%; \r\n\t\t\t\t\twidth: auto;\r\n\t\t\t\t\theight: auto;\r\n\t\t\t\t\tobject-fit: contain; \r\n\t\t\t\t\tbackground: transparent;\r\n\t\t\t\t\tborder-radius: 0;\r\n\t\t\t\t\tbox-shadow: none;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-overlay {\r\n\t\t\t\t\tdisplay: none;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-caption {\r\n\t\t\t\t\tposition: absolute; \r\n\t\t\t\t\tleft: 20px; \r\n\t\t\t\t\tright: 20px; \r\n\t\t\t\t\tbottom: 20px;\r\n\t\t\t\t\tpadding: 12px 16px; \r\n\t\t\t\t\tborder-radius: 0;\r\n\t\t\t\t\tbackground: rgba(0,0,0,0.8);\r\n\t\t\t\t\tbackdrop-filter: blur(8px);\r\n\t\t\t\t\tfont-size: 14px; \r\n\t\t\t\t\tfont-weight: 600; \r\n\t\t\t\t\tline-height: 1.5;\r\n\t\t\t\t\tcolor: #fff;\r\n\t\t\t\t\ttext-align: center;\r\n\t\t\t\t\tborder: 1px solid #333;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/* Hide Navigation buttons *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper .swiper-button-next,\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper .swiper-button-prev {\r\n\t\t\t\t\tdisplay: none !important;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/* Pagination *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper .swiper-pagination { \r\n\t\t\t\t\tbottom: 20px; \r\n\t\t\t\t\tz-index: 10;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper .swiper-pagination-bullet {\r\n\t\t\t\t\tbackground: #333; \r\n\t\t\t\t\topacity: 0.4; \r\n\t\t\t\t\twidth: 12px; \r\n\t\t\t\t\theight: 12px;\r\n\t\t\t\t\tmargin: 0 6px;\r\n\t\t\t\t\ttransition: all 0.3s ease;\r\n\t\t\t\t\tborder: 1px solid #333;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper .swiper-pagination-bullet-active { \r\n\t\t\t\t\topacity: 1; \r\n\t\t\t\t\ttransform: scale(1.2);\r\n\t\t\t\t\tbackground: #666;\r\n\t\t\t\t}\r\n\r\n\t\t\t\t\/* Thumbnails Container (Right Side) *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .thumbnails-container {\r\n\t\t\t\t\tflex: 0 0 215px;\r\n\t\t\t\t\theight: 346px;\r\n\t\t\t\t\toverflow-y: auto;\r\n\t\t\t\t\tpadding-right: 10px;\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/* Hide scrollbar *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .thumbnails-container::-webkit-scrollbar {\r\n\t\t\t\t\tdisplay: none;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .thumbnails-container {\r\n\t\t\t\t\tscrollbar-width: none;\r\n\t\t\t\t\t-ms-overflow-style: none;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumbs { \r\n\t\t\t\t\tmargin: 0; \r\n\t\t\t\t\tpadding: 0;\r\n\t\t\t\t\theight: 100%;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumbs .swiper-wrapper {\r\n\t\t\t\t\tflex-direction: column !important;\r\n\t\t\t\t\theight: auto !important;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumbs .swiper-slide { \r\n\t\t\t\t\twidth: 100% !important; \r\n\t\t\t\t\theight: auto !important;\r\n\t\t\t\t\tmargin-bottom: 15px;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumb {\r\n\t\t\t\t\twidth: 100%; \r\n\t\t\t\t\theight: 120px; \r\n\t\t\t\t\taspect-ratio: 3\/4; \r\n\t\t\t\t\tborder-radius: 15px; \r\n\t\t\t\t\toverflow: hidden;\r\n\t\t\t\t\tbackground: #fff; \r\n\t\t\t\t\tbox-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n\t\t\t\t\ttransition: all 0.3s ease;\r\n\t\t\t\t\tcursor: pointer;\r\n\t\t\t\t\tborder: 2px solid transparent;\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumb img { \r\n\t\t\t\t\twidth: 100%; \r\n\t\t\t\t\theight: 100%; \r\n\t\t\t\t\tobject-fit: cover; \r\n\t\t\t\t\tdisplay: block; \r\n\t\t\t\t\tbackground: #fff; \r\n\t\t\t\t\tfilter: grayscale(20%); \r\n\t\t\t\t\topacity: 0.8; \r\n\t\t\t\t\ttransition: all 0.3s ease; \r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumbs .swiper-slide-thumb-active .skill-cert-thumb { \r\n\t\t\t\t\tbox-shadow: 0 0 0 3px #333, 0 8px 24px rgba(0, 0, 0, 0.3); \r\n\t\t\t\t\ttransform: scale(1.02);\r\n\t\t\t\t\tborder-color: #333;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumbs .swiper-slide-thumb-active .skill-cert-thumb img { \r\n\t\t\t\t\tfilter: none; \r\n\t\t\t\t\topacity: 1; \r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/* Active indicator *\/\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumb::after {\r\n\t\t\t\t\tcontent: '';\r\n\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\ttop: 8px;\r\n\t\t\t\t\tright: 8px;\r\n\t\t\t\t\twidth: 12px;\r\n\t\t\t\t\theight: 12px;\r\n\t\t\t\t\tbackground: #333;\r\n\t\t\t\t\tborder-radius: 50%;\r\n\t\t\t\t\topacity: 0;\r\n\t\t\t\t\ttransition: opacity 0.3s ease;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumbs .swiper-slide-thumb-active .skill-cert-thumb::after {\r\n\t\t\t\t\topacity: 1;\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t\/* Responsive design *\/\r\n\t\t\t\t@media (max-width: 1024px) {\r\n\t\t\t\t\t#skill_cert_slider_6a614cf2b2c5b {\r\n\t\t\t\t\t\tflex-direction: column;\r\n\t\t\t\t\t\tgap: 20px;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .main-slider-container {\r\n\t\t\t\t\t\tmax-width: 100%;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .thumbnails-container {\r\n\t\t\t\t\t\tflex: none;\r\n\t\t\t\t\t\theight: auto;\r\n\t\t\t\t\t\twidth: 100%;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumbs .swiper-wrapper {\r\n\t\t\t\t\t\tflex-direction: row !important;\r\n\t\t\t\t\t\theight: auto !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumbs .swiper-slide {\r\n\t\t\t\t\t\twidth: auto !important;\r\n\t\t\t\t\t\theight: auto !important;\r\n\t\t\t\t\t\tmargin-right: 15px;\r\n\t\t\t\t\t\tmargin-bottom: 0;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-thumb {\r\n\t\t\t\t\t\twidth: 80px;\r\n\t\t\t\t\t\theight: 100px;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\t\r\n\t\t\t\t@media (max-width: 768px) {\r\n\t\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .skill-cert-swiper { \r\n\t\t\t\t\t\twidth: 100% !important;\r\n\t\t\t\t\t\theight: 300px !important;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t\r\n\t\t\t\t\t#skill_cert_slider_6a614cf2b2c5b .thumbnails-container {\r\n\t\t\t\t\t\theight: 300px;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t<\/style>\r\n\t\t\t\t<div class=\"swiper skill-cert-swiper\">\r\n\t\t\t\t\t<div class=\"swiper-wrapper\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t<figure class=\"skill-cert-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"certificate-frame\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"certificate-content\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"skill-cert-image\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/tp204-certificate-05-min-scaled.jpg\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 1\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t<figure class=\"skill-cert-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"certificate-frame\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"certificate-content\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"skill-cert-image\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/Certificate_3-min-scaled.jpg\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 2\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t<figure class=\"skill-cert-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"certificate-frame\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"certificate-content\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"skill-cert-image\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/6097660-min-scaled.jpg\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 3\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t<figure class=\"skill-cert-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"certificate-frame\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"certificate-content\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"skill-cert-image\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/5815489-min-scaled.jpg\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 4\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t<figure class=\"skill-cert-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"certificate-frame\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"certificate-content\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"skill-cert-image\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/5465587-min-scaled.jpg\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 5\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t<figure class=\"skill-cert-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"certificate-frame\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"certificate-content\">\r\n\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" class=\"skill-cert-image\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/5291121-min-scaled.jpg\" alt=\"\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 6\"\/>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/figure>\r\n\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\r\n\t\t\t<!-- Thumbnails Container (Right Side) -->\r\n\t\t\t\t\t\t<div class=\"thumbnails-container\">\r\n\t\t\t\t<div class=\"swiper skill-cert-thumbs\">\r\n\t\t\t\t\t<div class=\"swiper-wrapper\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"skill-cert-thumb\">\r\n\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/tp204-certificate-05-min-scaled.jpg\" alt=\"thumb\">\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"skill-cert-thumb\">\r\n\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/Certificate_3-min-scaled.jpg\" alt=\"thumb\">\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"skill-cert-thumb\">\r\n\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/6097660-min-scaled.jpg\" alt=\"thumb\">\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"skill-cert-thumb\">\r\n\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/5815489-min-scaled.jpg\" alt=\"thumb\">\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"skill-cert-thumb\">\r\n\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/5465587-min-scaled.jpg\" alt=\"thumb\">\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"swiper-slide\">\r\n\t\t\t\t\t\t\t\t<div class=\"skill-cert-thumb\">\r\n\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/08\/5291121-min-scaled.jpg\" alt=\"thumb\">\r\n\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<script>\r\n\t\t\t\t\/\/ Initialize Swiper safely (works in Elementor editor and frontend)\r\n\t\t\t\t(function(){\r\n\t\t\t\t\tvar rootId = 'skill_cert_slider_6a614cf2b2c5b';\r\n\t\t\t\t\tfunction initSlider(){\r\n\t\t\t\t\t\tvar root = document.getElementById(rootId);\r\n\t\t\t\t\t\tif(!root) return;\r\n\t\t\t\t\t\tvar el = root.querySelector('.skill-cert-swiper');\r\n\t\t\t\t\t\tif(!el) return;\r\n\r\n\t\t\t\t\t\tvar effect = root.getAttribute('data-effect') || 'coverflow';\r\n\t\t\t\t\t\tvar autoplay = root.getAttribute('data-autoplay') === 'true';\r\n\t\t\t\t\t\tvar delay = parseInt(root.getAttribute('data-delay') || '5000', 10);\r\n\t\t\t\t\t\tvar loop = root.getAttribute('data-loop') === 'true';\r\n\t\t\t\t\t\tvar speed = parseInt(root.getAttribute('data-speed') || '500', 10);\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\/\/ Debug: Log values to console\r\n\t\t\t\t\t\tconsole.log('Slider Settings:', {\r\n\t\t\t\t\t\t\tautoplay: autoplay,\r\n\t\t\t\t\t\t\tdelay: delay,\r\n\t\t\t\t\t\t\tspeed: speed,\r\n\t\t\t\t\t\t\tloop: loop\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t\tvar nav = root.getAttribute('data-navigation') === 'true';\r\n\t\t\t\t\t\tvar centered = root.getAttribute('data-centered') === 'true';\r\n\t\t\t\t\t\tvar spaceBetween = parseInt(root.getAttribute('data-space-between') || '24', 10);\r\n\t\t\t\t\t\tvar slidesDesktop = parseInt(root.getAttribute('data-slides-desktop') || '3', 10);\r\n\t\t\t\t\t\tvar slidesTablet = parseInt(root.getAttribute('data-slides-tablet') || '2', 10);\r\n\t\t\t\t\t\tvar slidesMobile = parseInt(root.getAttribute('data-slides-mobile') || '1', 10);\r\n\t\t\t\t\t\tvar paginationType = root.getAttribute('data-pagination-type') || 'bullets';\r\n\r\n\t\t\t\t\t\tvar config = {\r\n\t\t\t\t\t\t\tloop: loop,\r\n\t\t\t\t\t\t\tspeed: speed,\r\n\t\t\t\t\t\t\tspaceBetween: spaceBetween,\r\n\t\t\t\t\t\t\tcenteredSlides: false,\r\n\t\t\t\t\t\t\teffect: 'slide',\r\n\t\t\t\t\t\t\tgrabCursor: true,\r\n\t\t\t\t\t\t\tdirection: 'horizontal',\r\n\t\t\t\t\t\t\tobserver: true,\r\n\t\t\t\t\t\t\tobserveParents: true,\r\n\t\t\t\t\t\t\tresizeObserver: true,\r\n\t\t\t\t\t\t\tslidesPerView: 1,\r\n\t\t\t\t\t\t\t\/\/ RTL is handled via container dir=\"rtl\" and CSS\r\n\t\t\t\t\t\t};\r\n\r\n\t\t\t\t\t\tif (autoplay) {\r\n\t\t\t\t\t\t\tconfig.autoplay = { delay: delay, disableOnInteraction: false };\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\/\/ Simple slide effect - no additional effects needed\r\n\r\n\t\t\t\t\t\tif (false) {\r\n\t\t\t\t\t\t\tconfig.pagination = { el: root.querySelector('.swiper-pagination'), clickable: true, type: paginationType };\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\tif (nav) {\r\n\t\t\t\t\t\t\tconfig.navigation = { nextEl: root.querySelector('.swiper-button-next'), prevEl: root.querySelector('.swiper-button-prev') };\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t\/\/ Destroy existing instance in Elementor editor before re-init\r\n\t\t\t\t\t\tif (el && el.swiper && typeof el.swiper.destroy === 'function') {\r\n\t\t\t\t\t\t\ttry { el.swiper.destroy(true, true); } catch(e) {}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tvar mainSwiper = new Swiper(el, config);\r\n\r\n\t\t\t\t\t\t\/\/ Thumbnails\r\n\t\t\t\t\t\tvar showThumbs = root.getAttribute('data-show-thumbs') === 'true';\r\n\t\t\t\t\t\tif (showThumbs) {\r\n\t\t\t\t\t\t\tvar thumbsEl = root.querySelector('.skill-cert-thumbs');\r\n\t\t\t\t\t\t\tif (thumbsEl) {\r\n\t\t\t\t\t\t\t\tvar thumbs = new Swiper(thumbsEl, {\r\n\t\t\t\t\t\t\t\t\tdirection: 'vertical',\r\n\t\t\t\t\t\t\t\t\tspaceBetween: 15,\r\n\t\t\t\t\t\t\t\t\tslidesPerView: 'auto',\r\n\t\t\t\t\t\t\t\t\tfreeMode: true,\r\n\t\t\t\t\t\t\t\t\twatchSlidesProgress: true,\r\n\t\t\t\t\t\t\t\t\tcenteredSlides: true,\r\n\t\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tfunction updateThumbActive(index){\r\n\t\t\t\t\t\t\t\t\tif(!thumbs || !thumbs.slides){ return; }\r\n\t\t\t\t\t\t\t\t\tfor(var t=0; t<thumbs.slides.length; t++){\r\n\t\t\t\t\t\t\t\t\t\tthumbs.slides[t].classList.remove('swiper-slide-thumb-active');\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\tif(thumbs.slides[index]){\r\n\t\t\t\t\t\t\t\t\t\tthumbs.slides[index].classList.add('swiper-slide-thumb-active');\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tupdateThumbActive(mainSwiper.realIndex || 0);\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\tmainSwiper.on('slideChange', function(){\r\n\t\t\t\t\t\t\t\t\tvar i = mainSwiper.realIndex;\r\n\t\t\t\t\t\t\t\t\tupdateThumbActive(i);\r\n\t\t\t\t\t\t\t\t\t\/\/ Auto scroll to active thumbnail\r\n\t\t\t\t\t\t\t\t\tif (thumbs && thumbs.slides && thumbs.slides[i]) {\r\n\t\t\t\t\t\t\t\t\t\tthumbs.slideTo(i, 300);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\/\/ Click on thumbnail to change main slide\r\n\t\t\t\t\t\t\t\tif (thumbs && typeof thumbs.on === 'function') {\r\n\t\t\t\t\t\t\t\t\tthumbs.on('click', function(swiper){\r\n\t\t\t\t\t\t\t\t\t\tif (typeof swiper.clickedIndex === 'number') {\r\n\t\t\t\t\t\t\t\t\t\t\tmainSwiper.slideTo(swiper.clickedIndex);\r\n\t\t\t\t\t\t\t\t\t\t\tupdateThumbActive(swiper.clickedIndex);\r\n\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\/\/ Click on thumbnails directly\r\n\t\t\t\t\t\t\t\tvar thumbElements = thumbsEl.querySelectorAll('.skill-cert-thumb');\r\n\t\t\t\t\t\t\t\tthumbElements.forEach(function(thumb, index) {\r\n\t\t\t\t\t\t\t\t\tthumb.addEventListener('click', function() {\r\n\t\t\t\t\t\t\t\t\t\tmainSwiper.slideTo(index);\r\n\t\t\t\t\t\t\t\t\t\tupdateThumbActive(index);\r\n\t\t\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\t\t});\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tfunction whenSwiperReady(attempt){\r\n\t\t\t\t\t\tattempt = attempt || 0;\r\n\t\t\t\t\t\tif (typeof window.Swiper === 'function') { initSlider(); return; }\r\n\t\t\t\t\t\tif (attempt > 60) { return; }\r\n\t\t\t\t\t\tsetTimeout(function(){ whenSwiperReady(attempt + 1); }, 100);\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (document.readyState === 'loading') {\r\n\t\t\t\t\t\tdocument.addEventListener('DOMContentLoaded', function(){ whenSwiperReady(0); });\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\twhenSwiperReady(0);\r\n\t\t\t\t\t}\r\n\t\t\t\t})();\r\n\t\t\t<\/script>\r\n\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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-a50a3cd e-flex e-con-boxed e-con e-parent\" data-id=\"a50a3cd\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-eca692d e-con-full e-flex e-con e-child\" data-id=\"eca692d\" data-element_type=\"container\" data-e-type=\"container\" id=\"portfolio\">\n\t\t\t\t<div class=\"elementor-element elementor-element-87e1776 elementor-widget elementor-widget-skill_title_desc\" data-id=\"87e1776\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_title_desc.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tdw-wrap\" dir=\"rtl\">\r\n\t\t\t<div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n\t\t\t\t\t\t\t\t\t<h2 class=\"tdw-title\">\u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u0646<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6fb29e elementor-widget elementor-widget-skill_tabs_project_Widget\" data-id=\"e6fb29e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_tabs_project_Widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"page text-center\">\r\n            <div class=\"buttons mb-5\">\r\n                <ul>\r\n                                            <li class=\"d-inline ms-2\">\r\n                            <a href=\"#\" class=\"text-decoration-none active\">\r\n                                \u0647\u0645\u0647                            <\/a>\r\n                        <\/li>\r\n                                            <li class=\"d-inline ms-2\">\r\n                            <a href=\"#\" class=\"text-decoration-none \">\r\n                                \u0641\u0631\u0627\u0646\u062a                            <\/a>\r\n                        <\/li>\r\n                                            <li class=\"d-inline ms-2\">\r\n                            <a href=\"#\" class=\"text-decoration-none \">\r\n                                \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648\u0631\u062f\u067e\u0631\u0633\u06cc                            <\/a>\r\n                        <\/li>\r\n                                    <\/ul>\r\n            <\/div>\r\n            <div class=\"gallery d-flex flex-wrap overflow-hidden\">\r\n                                    <div class=\"image position-relative overflow-hidden\"\r\n                         data-tags=\"\u0641\u0631\u0627\u0646\u062a\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/195-scaled.jpg\"\r\n                             class=\"object-fit-cover w-100 overflow-hidden position-relative\">\r\n                        <div class=\"content_project position-absolute w-100 h-100 d-flex justify-content-center align-items-center flex-column\">\r\n                            <span>\u067e\u0631\u0648\u0698\u0647 \u0641\u0631\u0627\u0646\u062a<\/span>\r\n                            <div class=\"skill_btn_see_project d-flex align-items-center justify-content-center\">\r\n                                <a class=\"btn-select text-decoration-none text-light d-block\"\r\n                                   href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\"\r\n                                    target=\"_blank\"                                    >\r\n                                    \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"image position-relative overflow-hidden\"\r\n                         data-tags=\"\u0641\u0631\u0627\u0646\u062a\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/7447490-scaled.jpg\"\r\n                             class=\"object-fit-cover w-100 overflow-hidden position-relative\">\r\n                        <div class=\"content_project position-absolute w-100 h-100 d-flex justify-content-center align-items-center flex-column\">\r\n                            <span>\u067e\u0631\u0648\u0698\u0647 \u0641\u0631\u0627\u0646\u062a<\/span>\r\n                            <div class=\"skill_btn_see_project d-flex align-items-center justify-content-center\">\r\n                                <a class=\"btn-select text-decoration-none text-light d-block\"\r\n                                   href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\"\r\n                                    target=\"_blank\"                                    >\r\n                                    \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"image position-relative overflow-hidden\"\r\n                         data-tags=\"\u0641\u0631\u0627\u0646\u062a\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/7587686-scaled.jpg\"\r\n                             class=\"object-fit-cover w-100 overflow-hidden position-relative\">\r\n                        <div class=\"content_project position-absolute w-100 h-100 d-flex justify-content-center align-items-center flex-column\">\r\n                            <span>\u067e\u0631\u0648\u0698\u0647 \u0641\u0631\u0627\u0646\u062a<\/span>\r\n                            <div class=\"skill_btn_see_project d-flex align-items-center justify-content-center\">\r\n                                <a class=\"btn-select text-decoration-none text-light d-block\"\r\n                                   href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\"\r\n                                    target=\"_blank\"                                    >\r\n                                    \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"image position-relative overflow-hidden\"\r\n                         data-tags=\"\u0641\u0631\u0627\u0646\u062a\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/homepage-seen-computer-screen-1-scaled.jpg\"\r\n                             class=\"object-fit-cover w-100 overflow-hidden position-relative\">\r\n                        <div class=\"content_project position-absolute w-100 h-100 d-flex justify-content-center align-items-center flex-column\">\r\n                            <span>\u067e\u0631\u0648\u0698\u0647 \u0641\u0631\u0627\u0646\u062a<\/span>\r\n                            <div class=\"skill_btn_see_project d-flex align-items-center justify-content-center\">\r\n                                <a class=\"btn-select text-decoration-none text-light d-block\"\r\n                                   href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\"\r\n                                    target=\"_blank\"                                    >\r\n                                    \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"image position-relative overflow-hidden\"\r\n                         data-tags=\"\u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648\u0631\u062f\u067e\u0631\u0633\u06cc\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/3401426-scaled.jpg\"\r\n                             class=\"object-fit-cover w-100 overflow-hidden position-relative\">\r\n                        <div class=\"content_project position-absolute w-100 h-100 d-flex justify-content-center align-items-center flex-column\">\r\n                            <span>\u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633\u06cc<\/span>\r\n                            <div class=\"skill_btn_see_project d-flex align-items-center justify-content-center\">\r\n                                <a class=\"btn-select text-decoration-none text-light d-block\"\r\n                                   href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\"\r\n                                    target=\"_blank\"                                    >\r\n                                    \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"image position-relative overflow-hidden\"\r\n                         data-tags=\"\u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648\u0631\u062f\u067e\u0631\u0633\u06cc\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/5764971-scaled.jpg\"\r\n                             class=\"object-fit-cover w-100 overflow-hidden position-relative\">\r\n                        <div class=\"content_project position-absolute w-100 h-100 d-flex justify-content-center align-items-center flex-column\">\r\n                            <span>\u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633\u06cc<\/span>\r\n                            <div class=\"skill_btn_see_project d-flex align-items-center justify-content-center\">\r\n                                <a class=\"btn-select text-decoration-none text-light d-block\"\r\n                                   href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\"\r\n                                    target=\"_blank\"                                    >\r\n                                    \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"image position-relative overflow-hidden\"\r\n                         data-tags=\"\u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648\u0631\u062f\u067e\u0631\u0633\u06cc\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/6303096-scaled.jpg\"\r\n                             class=\"object-fit-cover w-100 overflow-hidden position-relative\">\r\n                        <div class=\"content_project position-absolute w-100 h-100 d-flex justify-content-center align-items-center flex-column\">\r\n                            <span>\u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633\u06cc<\/span>\r\n                            <div class=\"skill_btn_see_project d-flex align-items-center justify-content-center\">\r\n                                <a class=\"btn-select text-decoration-none text-light d-block\"\r\n                                   href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\"\r\n                                    target=\"_blank\"                                    >\r\n                                    \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                                    <div class=\"image position-relative overflow-hidden\"\r\n                         data-tags=\"\u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0648\u0631\u062f\u067e\u0631\u0633\u06cc\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/7694497-scaled.jpg\"\r\n                             class=\"object-fit-cover w-100 overflow-hidden position-relative\">\r\n                        <div class=\"content_project position-absolute w-100 h-100 d-flex justify-content-center align-items-center flex-column\">\r\n                            <span>\u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633\u06cc<\/span>\r\n                            <div class=\"skill_btn_see_project d-flex align-items-center justify-content-center\">\r\n                                <a class=\"btn-select text-decoration-none text-light d-block\"\r\n                                   href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\"\r\n                                    target=\"_blank\"                                    >\r\n                                    \u0645\u0634\u0627\u0647\u062f\u0647 \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n        <\/div>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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-3269139 e-flex e-con-boxed e-con e-parent\" data-id=\"3269139\" data-element_type=\"container\" data-e-type=\"container\" id=\"shop\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4d11f0a e-con-full e-flex e-con e-child\" data-id=\"4d11f0a\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-b569359 e-con-full e-flex e-con e-child\" data-id=\"b569359\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-63c88b3 elementor-widget elementor-widget-skill_title_desc\" data-id=\"63c88b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_title_desc.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"tdw-wrap\" dir=\"rtl\">\r\n\t\t\t<div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n\t\t\t\t\t\t\t\t\t<h2 class=\"tdw-title\">\u0641\u0631\u0648\u0634\u06af\u0627\u0647<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n\t\t\t\t\t\t\t<\/div>\r\n\t\t\t\t\t<\/div>\r\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-74e1254 elementor-widget elementor-widget-button\" data-id=\"74e1254\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/websavant.ir\/skill\/theme-skill\/shop-demo-developer\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0628\u06cc\u0634\u062a\u0631...<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a1bebd6 elementor-widget elementor-widget-skill-product-archive\" data-id=\"a1bebd6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill-product-archive.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t            <div class=\"skill-product-archive\" data-columns=\"4\">\r\n                \r\n                <!-- Cart & Sorting Header -->\r\n                <div class=\"skill-archive-header mb-4\">\r\n                    <style>\r\n                        .product-price .price {\r\n                            display: flex;\r\n                            flex-direction: column;\r\n                            gap: 0;\r\n                            color: #ffffff !important;\r\n                        }\r\n\r\n                        .skill-archive-header {\r\n                            display: flex;\r\n                            justify-content: space-between;\r\n                            align-items: center;\r\n                            gap: 15px;\r\n                            margin-bottom: 25px;\r\n                            padding: 0;\r\n                        }\r\n                        \r\n                        .product-overlay {\r\n                            border-radius: 15px;\r\n                        }\r\n                        \r\n                        .skill-cart-widget {\r\n                            border: 2px solid;\r\n                            padding: 12px 20px;\r\n                            border-radius: 12px;\r\n                            transition: all 0.3s ease;\r\n                            display: inline-flex;\r\n                            align-items: center;\r\n                            gap: 12px;\r\n                            text-decoration: none;\r\n                        }\r\n                        \r\n                        .skill-cart-widget:hover {\r\n                            text-decoration: none;\r\n                            box-shadow: 0 6px 20px rgba(139, 92, 246, 0.15);\r\n                            transform: translateY(-1px);\r\n                        }\r\n                        \r\n                        .skill-cart-icon-wrapper {\r\n                            position: relative;\r\n                            display: flex;\r\n                            align-items: center;\r\n                        }\r\n                        \r\n                        .skill-cart-icon-wrapper svg {\r\n                            width: 24px;\r\n                            height: 24px;\r\n                            stroke-width: 2;\r\n                        }\r\n                        \r\n                        .skill-cart-widget:hover .skill-cart-icon-wrapper svg {\r\n                            stroke: #a78bfa;\r\n                        }\r\n                        \r\n                        .skill-cart-badge {\r\n                            position: absolute;\r\n                            top: -6px;\r\n                            right: -6px;\r\n                            color: #ffffff;\r\n                            font-size: 10px;\r\n                            font-weight: 600;\r\n                            min-width: 18px;\r\n                            height: 18px;\r\n                            padding: 0 4px;\r\n                            border-radius: 9px;\r\n                            display: flex;\r\n                            align-items: center;\r\n                            justify-content: center;\r\n                            transition: all 0.3s ease;\r\n                            box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);\r\n                        }\r\n                        \r\n                        @keyframes cartBounce {\r\n                            0%, 100% { transform: scale(1); }\r\n                            50% { transform: scale(1.15); }\r\n                        }\r\n                        \r\n                        .skill-cart-text {\r\n                            display: flex;\r\n                            flex-direction: column;\r\n                            gap: 2px;\r\n                        }\r\n                        \r\n                        .skill-cart-label {\r\n                            font-size: 11px;\r\n                            color: #9ca3af;\r\n                            font-weight: 500;\r\n                            letter-spacing: 0.3px;\r\n                        }\r\n                        \r\n                        .skill-cart-total {\r\n                            font-size: 15px;\r\n                            font-weight: 600;\r\n                        }\r\n                        \r\n                        @media (max-width: 768px) {\r\n                            .skill-archive-header {\r\n                                flex-direction: column;\r\n                                gap: 12px;\r\n                            }\r\n                            \r\n                            .skill-cart-widget {\r\n                                width: 100%;\r\n                                justify-content: center;\r\n                                padding: 10px 18px;\r\n                            }\r\n                        }\r\n                    <\/style>\r\n                    \r\n                    <!-- Cart Widget -->\r\n                                            <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/cart\/\" class=\"skill-cart-widget\">\r\n                            <div class=\"skill-cart-icon-wrapper\">\r\n                                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\r\n                                    <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z\" \/>\r\n                                <\/svg>\r\n                                <span class=\"skill-cart-badge\">0<\/span>\r\n                            <\/div>\r\n                            <div class=\"skill-cart-text\">\r\n                                <span class=\"skill-cart-label\">\u0633\u0628\u062f \u062e\u0631\u06cc\u062f<\/span>\r\n                                <span class=\"skill-cart-total\"><span class=\"woocommerce-Price-amount amount\">0&nbsp;<span class=\"woocommerce-Price-currencySymbol\">&#x62A;&#x648;&#x645;&#x627;&#x646;<\/span><\/span><\/span>\r\n                            <\/div>\r\n                        <\/a>\r\n                                        \r\n                    <!-- Sorting Widget -->\r\n                                    <\/div>\r\n                <!-- End Cart & Sorting Header -->\r\n                \r\n                \r\n                <div class=\"wc-products-grid row g-4\">\r\n                                            <div class=\"col-12 col-sm-6 col-md-6 col-lg-3 mb-4\">\r\n                                    <div class=\"modern-product-card\">\r\n            <!-- Product Image Container -->\r\n            <div class=\"product-image-container\">\r\n                <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/product\/%d9%87%d8%af%d9%81%d9%88%d9%86-%d8%a8%d9%84%d9%88%d8%aa%d9%88%d8%ab%db%8c-%d8%b3%d8%a7%d9%85%d8%b3%d9%88%d9%86%da%af-%d9%85%d8%af%d9%84-galaxy-buds-fe-%d8%af%d9%85%d9%88%db%8c-%d8%aa%d9%88%d8%b3\/\" class=\"product-link\">\r\n                    <div class=\"product-image\">\r\n                        <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/product3.png\" class=\"attachment-medium size-medium\" alt=\"\u0647\u062f\u0641\u0648\u0646 \u0628\u0644\u0648\u062a\u0648\u062b\u06cc \u0633\u0627\u0645\u0633\u0648\u0646\u06af \u0645\u062f\u0644 Galaxy Buds FE - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\" \/>                    <\/div>\r\n                <\/a>\r\n\r\n                                    <div class=\"product-category\">\r\n                        <span>\u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/span>                    <\/div>\r\n                                \r\n                <!-- Product Badges -->\r\n                <div class=\"product-badges\">\r\n                                                        <\/div>\r\n\r\n                <!-- Hover Overlay -->\r\n                                    <div class=\"product-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                                                            <div class=\"product-excerpt\">\r\n                                    \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0644 \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645\u00a0 \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0628\u0627 \u062a\u0648\u0644\u06cc\u062f&hellip;                                <\/div>\r\n                                                                                        <div class=\"overlay-actions\">\r\n                                    <a href=\"\/skill\/theme-skill\/wp-json\/wp\/v2\/pages\/1155?add-to-cart=5400\" aria-describedby=\"woocommerce_loop_add_to_cart_link_describedby_5400\" data-quantity=\"1\" class=\"button product_type_simple add_to_cart_button ajax_add_to_cart\" data-product_id=\"5400\" data-product_sku=\"\" aria-label=\"\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f: &ldquo;\u0647\u062f\u0641\u0648\u0646 \u0628\u0644\u0648\u062a\u0648\u062b\u06cc \u0633\u0627\u0645\u0633\u0648\u0646\u06af \u0645\u062f\u0644 Galaxy Buds FE - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647&rdquo;\" rel=\"nofollow\" data-success_message=\"&ldquo;\u0647\u062f\u0641\u0648\u0646 \u0628\u0644\u0648\u062a\u0648\u062b\u06cc \u0633\u0627\u0645\u0633\u0648\u0646\u06af \u0645\u062f\u0644 Galaxy Buds FE - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647&rdquo; \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\">\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f<\/a>\t<span id=\"woocommerce_loop_add_to_cart_link_describedby_5400\" class=\"screen-reader-text\">\n\t\t\t<\/span>\n                                <\/div>\r\n                                                    <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n\r\n            <!-- Product Info -->\r\n            <div class=\"product-info\">\r\n                                    <h3 class=\"product-title\">\r\n                        <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/product\/%d9%87%d8%af%d9%81%d9%88%d9%86-%d8%a8%d9%84%d9%88%d8%aa%d9%88%d8%ab%db%8c-%d8%b3%d8%a7%d9%85%d8%b3%d9%88%d9%86%da%af-%d9%85%d8%af%d9%84-galaxy-buds-fe-%d8%af%d9%85%d9%88%db%8c-%d8%aa%d9%88%d8%b3\/\">\u0647\u062f\u0641\u0648\u0646 \u0628\u0644\u0648\u062a\u0648\u062b\u06cc \u0633\u0627\u0645\u0633\u0648\u0646\u06af \u0645\u062f\u0644 Galaxy Buds FE &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/a>\r\n                    <\/h3>\r\n                                \r\n                \r\n                                    <div class=\"product-price\">\r\n                        \n\t<span class=\"price\"><span class=\"woocommerce-Price-amount amount\"><bdi>1.200.000&nbsp;<span class=\"woocommerce-Price-currencySymbol\">&#x062A;&#x0648;&#x0645;&#x0627;&#x0646;<\/span><\/bdi><\/span><\/span>\n                    <\/div>\r\n                            <\/div>\r\n        <\/div>\r\n                                <\/div>\r\n                                            <div class=\"col-12 col-sm-6 col-md-6 col-lg-3 mb-4\">\r\n                                    <div class=\"modern-product-card\">\r\n            <!-- Product Image Container -->\r\n            <div class=\"product-image-container\">\r\n                <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/product\/%da%af%d9%88%d8%b4%db%8c-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84-%d8%a7%d9%be%d9%84-%d9%85%d8%af%d9%84-iphone-13-ch-%d8%af%d9%88-%d8%b3%db%8c%d9%85-%da%a9%d8%a7%d8%b1%d8%aa-%d8%b8%d8%b1%d9%81\/\" class=\"product-link\">\r\n                    <div class=\"product-image\">\r\n                        <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/iphone4.jpg\" class=\"attachment-medium size-medium\" alt=\"\u06af\u0648\u0634\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0627\u067e\u0644 \u0645\u062f\u0644 iPhone 13 CH \u062f\u0648 \u0633\u06cc\u0645\u200c \u06a9\u0627\u0631\u062a \u0638\u0631\u0641\u06cc\u062a 128 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a \u0648 \u0631\u0645 4 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a - \u0646\u0627\u062a \u0627\u06a9\u062a\u06cc\u0648 - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\" \/>                    <\/div>\r\n                <\/a>\r\n\r\n                                    <div class=\"product-category\">\r\n                        <span>\u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/span>                    <\/div>\r\n                                \r\n                <!-- Product Badges -->\r\n                <div class=\"product-badges\">\r\n                                                        <\/div>\r\n\r\n                <!-- Hover Overlay -->\r\n                                    <div class=\"product-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                                                            <div class=\"product-excerpt\">\r\n                                    \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0644 \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645\u00a0 \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0628\u0627 \u062a\u0648\u0644\u06cc\u062f&hellip;                                <\/div>\r\n                                                                                        <div class=\"overlay-actions\">\r\n                                    <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/product\/%da%af%d9%88%d8%b4%db%8c-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84-%d8%a7%d9%be%d9%84-%d9%85%d8%af%d9%84-iphone-13-ch-%d8%af%d9%88-%d8%b3%db%8c%d9%85-%da%a9%d8%a7%d8%b1%d8%aa-%d8%b8%d8%b1%d9%81\/\" aria-describedby=\"woocommerce_loop_add_to_cart_link_describedby_5412\" data-quantity=\"1\" class=\"button product_type_variable add_to_cart_button\" data-product_id=\"5412\" data-product_sku=\"\" aria-label=\"\u0627\u0646\u062a\u062e\u0627\u0628 \u06af\u0632\u06cc\u0646\u0647\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc &ldquo;\u06af\u0648\u0634\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0627\u067e\u0644 \u0645\u062f\u0644 iPhone 13 CH \u062f\u0648 \u0633\u06cc\u0645\u200c \u06a9\u0627\u0631\u062a \u0638\u0631\u0641\u06cc\u062a 128 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a \u0648 \u0631\u0645 4 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a - \u0646\u0627\u062a \u0627\u06a9\u062a\u06cc\u0648 - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647&rdquo;\" rel=\"nofollow\">\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f<\/a>\t<span id=\"woocommerce_loop_add_to_cart_link_describedby_5412\" class=\"screen-reader-text\">\n\t\t\u0627\u06cc\u0646 \u0645\u062d\u0635\u0648\u0644 \u062f\u0627\u0631\u0627\u06cc \u0627\u0646\u0648\u0627\u0639 \u0645\u062e\u062a\u0644\u0641\u06cc \u0645\u06cc \u0628\u0627\u0634\u062f. \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627 \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062f\u0631 \u0635\u0641\u062d\u0647 \u0645\u062d\u0635\u0648\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u0648\u0646\u062f\t<\/span>\n                                <\/div>\r\n                                                    <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n\r\n            <!-- Product Info -->\r\n            <div class=\"product-info\">\r\n                                    <h3 class=\"product-title\">\r\n                        <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/product\/%da%af%d9%88%d8%b4%db%8c-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84-%d8%a7%d9%be%d9%84-%d9%85%d8%af%d9%84-iphone-13-ch-%d8%af%d9%88-%d8%b3%db%8c%d9%85-%da%a9%d8%a7%d8%b1%d8%aa-%d8%b8%d8%b1%d9%81\/\">\u06af\u0648\u0634\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0627\u067e\u0644 \u0645\u062f\u0644 iPhone 13 CH \u062f\u0648 \u0633\u06cc\u0645\u200c \u06a9\u0627\u0631\u062a \u0638\u0631\u0641\u06cc\u062a 128 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a \u0648 \u0631\u0645 4 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a &#8211; \u0646\u0627\u062a \u0627\u06a9\u062a\u06cc\u0648 &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/a>\r\n                    <\/h3>\r\n                                \r\n                \r\n                                    <div class=\"product-price\">\r\n                        \n\t<span class=\"price\"><span class=\"woocommerce-Price-amount amount\" aria-hidden=\"true\"><bdi>75.000.000&nbsp;<span class=\"woocommerce-Price-currencySymbol\">&#x062A;&#x0648;&#x0645;&#x0627;&#x0646;<\/span><\/bdi><\/span> <span aria-hidden=\"true\">&ndash;<\/span> <span class=\"woocommerce-Price-amount amount\" aria-hidden=\"true\"><bdi>90.000.000&nbsp;<span class=\"woocommerce-Price-currencySymbol\">&#x062A;&#x0648;&#x0645;&#x0627;&#x0646;<\/span><\/bdi><\/span><span class=\"screen-reader-text\">\u0645\u062d\u062f\u0648\u062f\u0647 \u0642\u06cc\u0645\u062a: 75.000.000&nbsp;&#x062A;&#x0648;&#x0645;&#x0627;&#x0646; \u062a\u0627 90.000.000&nbsp;&#x062A;&#x0648;&#x0645;&#x0627;&#x0646;<\/span><\/span>\n                    <\/div>\r\n                            <\/div>\r\n        <\/div>\r\n                                <\/div>\r\n                                            <div class=\"col-12 col-sm-6 col-md-6 col-lg-3 mb-4\">\r\n                                    <div class=\"modern-product-card\">\r\n            <!-- Product Image Container -->\r\n            <div class=\"product-image-container\">\r\n                <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/product\/%d9%be%d8%a7%d9%88%d8%b1%d8%a8%d8%a7%d9%86%da%a9-%d8%a7%db%8c-%d8%af%db%8c%d8%aa%d8%a7-%d9%85%d8%af%d9%84-p20000qcd-%d8%b8%d8%b1%d9%81%db%8c%d8%aa-20000-%d9%85%db%8c%d9%84%db%8c-%d8%a2%d9%85%d9%be\/\" class=\"product-link\">\r\n                    <div class=\"product-image\">\r\n                        <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/product5.png\" class=\"attachment-medium size-medium\" alt=\"\u067e\u0627\u0648\u0631\u0628\u0627\u0646\u06a9 \u0627\u06cc \u062f\u06cc\u062a\u0627 \u0645\u062f\u0644 P20000QCD \u0638\u0631\u0641\u06cc\u062a 20000 \u0645\u06cc\u0644\u06cc \u0622\u0645\u067e\u0631 \u0633\u0627\u0639\u062a - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\" \/>                    <\/div>\r\n                <\/a>\r\n\r\n                                    <div class=\"product-category\">\r\n                        <span>\u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/span>                    <\/div>\r\n                                \r\n                <!-- Product Badges -->\r\n                <div class=\"product-badges\">\r\n                                                        <\/div>\r\n\r\n                <!-- Hover Overlay -->\r\n                                    <div class=\"product-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                                                            <div class=\"product-excerpt\">\r\n                                    \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0644 \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645\u00a0 \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0628\u0627 \u062a\u0648\u0644\u06cc\u062f&hellip;                                <\/div>\r\n                                                                                        <div class=\"overlay-actions\">\r\n                                    <a href=\"\/skill\/theme-skill\/wp-json\/wp\/v2\/pages\/1155?add-to-cart=5425\" aria-describedby=\"woocommerce_loop_add_to_cart_link_describedby_5425\" data-quantity=\"1\" class=\"button product_type_simple add_to_cart_button ajax_add_to_cart\" data-product_id=\"5425\" data-product_sku=\"\" aria-label=\"\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f: &ldquo;\u067e\u0627\u0648\u0631\u0628\u0627\u0646\u06a9 \u0627\u06cc \u062f\u06cc\u062a\u0627 \u0645\u062f\u0644 P20000QCD \u0638\u0631\u0641\u06cc\u062a 20000 \u0645\u06cc\u0644\u06cc \u0622\u0645\u067e\u0631 \u0633\u0627\u0639\u062a - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647&rdquo;\" rel=\"nofollow\" data-success_message=\"&ldquo;\u067e\u0627\u0648\u0631\u0628\u0627\u0646\u06a9 \u0627\u06cc \u062f\u06cc\u062a\u0627 \u0645\u062f\u0644 P20000QCD \u0638\u0631\u0641\u06cc\u062a 20000 \u0645\u06cc\u0644\u06cc \u0622\u0645\u067e\u0631 \u0633\u0627\u0639\u062a - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647&rdquo; \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\">\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f<\/a>\t<span id=\"woocommerce_loop_add_to_cart_link_describedby_5425\" class=\"screen-reader-text\">\n\t\t\t<\/span>\n                                <\/div>\r\n                                                    <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n\r\n            <!-- Product Info -->\r\n            <div class=\"product-info\">\r\n                                    <h3 class=\"product-title\">\r\n                        <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/product\/%d9%be%d8%a7%d9%88%d8%b1%d8%a8%d8%a7%d9%86%da%a9-%d8%a7%db%8c-%d8%af%db%8c%d8%aa%d8%a7-%d9%85%d8%af%d9%84-p20000qcd-%d8%b8%d8%b1%d9%81%db%8c%d8%aa-20000-%d9%85%db%8c%d9%84%db%8c-%d8%a2%d9%85%d9%be\/\">\u067e\u0627\u0648\u0631\u0628\u0627\u0646\u06a9 \u0627\u06cc \u062f\u06cc\u062a\u0627 \u0645\u062f\u0644 P20000QCD \u0638\u0631\u0641\u06cc\u062a 20000 \u0645\u06cc\u0644\u06cc \u0622\u0645\u067e\u0631 \u0633\u0627\u0639\u062a &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/a>\r\n                    <\/h3>\r\n                                \r\n                \r\n                                    <div class=\"product-price\">\r\n                        \n\t<span class=\"price\"><span class=\"woocommerce-Price-amount amount\"><bdi>1.200.000&nbsp;<span class=\"woocommerce-Price-currencySymbol\">&#x062A;&#x0648;&#x0645;&#x0627;&#x0646;<\/span><\/bdi><\/span><\/span>\n                    <\/div>\r\n                            <\/div>\r\n        <\/div>\r\n                                <\/div>\r\n                                            <div class=\"col-12 col-sm-6 col-md-6 col-lg-3 mb-4\">\r\n                                    <div class=\"modern-product-card\">\r\n            <!-- Product Image Container -->\r\n            <div class=\"product-image-container\">\r\n                <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/product\/%d9%81%d9%84%d8%b4-%d9%85%d9%85%d9%88%d8%b1%db%8c-%d8%b3%d9%86-%d8%af%db%8c%d8%b3%da%a9-%d9%85%d8%af%d9%84-ultra-dual-drive-luxe-%d8%b8%d8%b1%d9%81%db%8c%d8%aa-256-%da%af%db%8c%da%af%d8%a7%d8%a8%d8%a7\/\" class=\"product-link\">\r\n                    <div class=\"product-image\">\r\n                        <img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/product6.png\" class=\"attachment-medium size-medium\" alt=\"\u0641\u0644\u0634 \u0645\u0645\u0648\u0631\u06cc \u0633\u0646 \u062f\u06cc\u0633\u06a9 \u0645\u062f\u0644 Ultra Dual Drive Luxe \u0638\u0631\u0641\u06cc\u062a 256 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\" \/>                    <\/div>\r\n                <\/a>\r\n\r\n                                    <div class=\"product-category\">\r\n                        <span>\u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/span>                    <\/div>\r\n                                \r\n                <!-- Product Badges -->\r\n                <div class=\"product-badges\">\r\n                                                        <\/div>\r\n\r\n                <!-- Hover Overlay -->\r\n                                    <div class=\"product-overlay\">\r\n                        <div class=\"overlay-content\">\r\n                                                            <div class=\"product-excerpt\">\r\n                                    \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0645\u062d\u0635\u0648\u0644 \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645\u00a0 \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0644\u0648\u0631\u0645 \u0627\u06cc\u067e\u0633\u0648\u0645 \u0645\u062a\u0646 \u0633\u0627\u062e\u062a\u06af\u06cc \u0628\u0627 \u062a\u0648\u0644\u06cc\u062f&hellip;                                <\/div>\r\n                                                                                        <div class=\"overlay-actions\">\r\n                                    <a href=\"\/skill\/theme-skill\/wp-json\/wp\/v2\/pages\/1155?add-to-cart=5437\" aria-describedby=\"woocommerce_loop_add_to_cart_link_describedby_5437\" data-quantity=\"1\" class=\"button product_type_simple add_to_cart_button ajax_add_to_cart\" data-product_id=\"5437\" data-product_sku=\"\" aria-label=\"\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f: &ldquo;\u0641\u0644\u0634 \u0645\u0645\u0648\u0631\u06cc \u0633\u0646 \u062f\u06cc\u0633\u06a9 \u0645\u062f\u0644 Ultra Dual Drive Luxe \u0638\u0631\u0641\u06cc\u062a 256 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647&rdquo;\" rel=\"nofollow\" data-success_message=\"&ldquo;\u0641\u0644\u0634 \u0645\u0645\u0648\u0631\u06cc \u0633\u0646 \u062f\u06cc\u0633\u06a9 \u0645\u062f\u0644 Ultra Dual Drive Luxe \u0638\u0631\u0641\u06cc\u062a 256 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a - \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647&rdquo; \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\">\u0627\u0641\u0632\u0648\u062f\u0646 \u0628\u0647 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f<\/a>\t<span id=\"woocommerce_loop_add_to_cart_link_describedby_5437\" class=\"screen-reader-text\">\n\t\t\t<\/span>\n                                <\/div>\r\n                                                    <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n\r\n            <!-- Product Info -->\r\n            <div class=\"product-info\">\r\n                                    <h3 class=\"product-title\">\r\n                        <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/product\/%d9%81%d9%84%d8%b4-%d9%85%d9%85%d9%88%d8%b1%db%8c-%d8%b3%d9%86-%d8%af%db%8c%d8%b3%da%a9-%d9%85%d8%af%d9%84-ultra-dual-drive-luxe-%d8%b8%d8%b1%d9%81%db%8c%d8%aa-256-%da%af%db%8c%da%af%d8%a7%d8%a8%d8%a7\/\">\u0641\u0644\u0634 \u0645\u0645\u0648\u0631\u06cc \u0633\u0646 \u062f\u06cc\u0633\u06a9 \u0645\u062f\u0644 Ultra Dual Drive Luxe \u0638\u0631\u0641\u06cc\u062a 256 \u06af\u06cc\u06af\u0627\u0628\u0627\u06cc\u062a &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/a>\r\n                    <\/h3>\r\n                                \r\n                \r\n                                    <div class=\"product-price\">\r\n                        \n\t<span class=\"price\"><span class=\"woocommerce-Price-amount amount\"><bdi>1.200.000&nbsp;<span class=\"woocommerce-Price-currencySymbol\">&#x062A;&#x0648;&#x0645;&#x0627;&#x0646;<\/span><\/bdi><\/span><\/span>\n                    <\/div>\r\n                            <\/div>\r\n        <\/div>\r\n                                <\/div>\r\n                                    <\/div>\r\n\r\n                            <\/div>\r\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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-b4b0d24 e-flex e-con-boxed e-con e-parent\" data-id=\"b4b0d24\" 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-8fe4f75 elementor-widget elementor-widget-skill_customer_reviews_new_widget\" data-id=\"8fe4f75\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_customer_reviews_new_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <style>\r\n        \/* Override any global Swiper backgrounds for this widget only *\/\r\n        #skill-customer-reviews-slider-8fe4f75.skill-customer-reviews-slider .swiper,\r\n        #skill-customer-reviews-slider-8fe4f75.skill-customer-reviews-slider .swiper-wrapper {\r\n            background: transparent !important;\r\n        }\r\n        <\/style>\r\n        <div class=\"skill-customer-reviews-slider\" id=\"skill-customer-reviews-slider-8fe4f75\" dir=\"rtl\" style=\"padding: 40px 0; border-radius: 16px; position: relative;\">\r\n            <h2 class=\"skill-customer-reviews-title\" style=\"text-align:center; font-size:2rem; font-weight:700; margin-bottom:32px;color:#8D8D8D;\">\r\n                \u0622\u0646\u0686\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631\u0645\u0648\u0631\u062f \u0645\u0646 \u0645\u06cc\u06af\u0646            <\/h2>\r\n            <div style=\"position:absolute; top:30px; right:220px; font-size:80px; color:#656689; opacity:0.5;\">&#8220;<\/div>\r\n            <div style=\"position:absolute; bottom:30px; left:220px; font-size:80px; color:#656689; opacity:0.5;\">&#8221;<\/div>\r\n            <div class=\"swiper\" id=\"skill-customer-reviews-slider-8fe4f75-swiper\">\r\n                <div class=\"swiper-wrapper\">\r\n                                            <div class=\"swiper-slide\" style=\"display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:350px;\">\r\n                                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/04\/user3.jpg\" alt=\"\u0628\u0627\u0631\u0628\u062f\" style=\"width:90px; height:90px; border-radius:50%; object-fit:cover; margin-bottom:12px; border:4px solid #232135;\">\r\n                                                        <div style=\"font-weight:700; color:#2F5BEA; font-size:1.1rem; margin-bottom:2px;\"> \u0628\u0627\u0631\u0628\u062f <\/div>\r\n                            <div style=\"font-size:0.95rem; color:#bdbdbd; margin-bottom:8px;\"> \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633 \u0648 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633 <\/div>\r\n                            <div style=\"color:#FFD600; font-size:1.3rem; margin-bottom:8px;\">\r\n                                                                                                            <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                                                                <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                                                                <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                                                                <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                                                                <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                <\/div>\r\n                            <div style=\"max-width:700px; text-align:center; font-size:1.05rem; line-height:2; margin:0 auto; color:#bdbdbd;\"> \u00ab\u0645\u0646 \u0633\u0627\u0644\u200c\u0647\u0627\u0633\u062a \u06a9\u0647 \u0627\u0632 \u062e\u062f\u0645\u0627\u062a \u0627\u06cc\u0646 \u0634\u0631\u06a9\u062a \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u06a9\u0646\u0645 \u0648 \u0647\u06cc\u0686\u200c\u06af\u0627\u0647 \u062a\u062c\u0631\u0628\u0647\u200c\u0627\u06cc \u0628\u0647\u062a\u0631 \u0627\u0632 \u0627\u06cc\u0646 \u0646\u062f\u0627\u0634\u062a\u0645. \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647 \u0648 \u06a9\u06cc\u0641\u06cc\u062a \u06a9\u0627\u0631 \u0628\u06cc\u200c\u0646\u0638\u06cc\u0631 \u0627\u0633\u062a\u060c \u067e\u0631\u0648\u0698\u0647 \u0645\u0627 \u0628\u0627 \u06a9\u0648\u0686\u06a9\u200c\u062a\u0631\u06cc\u0646 detal \u0648 \u062f\u0631 \u06a9\u0648\u062a\u0627\u0647\u200c\u062a\u0631\u06cc\u0646 \u0632\u0645\u0627\u0646 \u0645\u0645\u06a9\u0646 \u0628\u0647 \u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06a9\u0644 \u062a\u062d\u0648\u06cc\u0644 \u062f\u0627\u062f\u0647 \u0634\u062f. \u062a\u06cc\u0645 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0648 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f\u06cc \u0647\u0633\u062a\u0646\u062f\u00bb <\/div>\r\n                        <\/div>\r\n                                            <div class=\"swiper-slide\" style=\"display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:350px;\">\r\n                                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/04\/user2.png\" alt=\"\u0633\u0627\u0631\u0627\" style=\"width:90px; height:90px; border-radius:50%; object-fit:cover; margin-bottom:12px; border:4px solid #232135;\">\r\n                                                        <div style=\"font-weight:700; color:#2F5BEA; font-size:1.1rem; margin-bottom:2px;\"> \u0633\u0627\u0631\u0627 <\/div>\r\n                            <div style=\"font-size:0.95rem; color:#bdbdbd; margin-bottom:8px;\"> \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633 \u0648 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633 <\/div>\r\n                            <div style=\"color:#FFD600; font-size:1.3rem; margin-bottom:8px;\">\r\n                                                                                                            <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                                                                <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                                                                <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                                                                <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                                                                <span style=\"font-size:1.3rem;\">&#9733;<\/span>\r\n                                                                                                <\/div>\r\n                            <div style=\"max-width:700px; text-align:center; font-size:1.05rem; line-height:2; margin:0 auto; color:#bdbdbd;\"> \u00ab\u0646\u062a\u06cc\u062c\u0647 \u06a9\u0627\u0631 \u062d\u062a\u06cc \u0627\u0632 \u0622\u0646\u0686\u0647 \u0627\u0646\u062a\u0638\u0627\u0631 \u062f\u0627\u0634\u062a\u06cc\u0645 \u0628\u0633\u06cc\u0627\u0631 \u0628\u0647\u062a\u0631 \u0628\u0648\u062f! \u0642\u06cc\u0645\u062a\u200c\u0647\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0646\u0635\u0641\u0627\u0646\u0647 \u0648 transparent \u0627\u0633\u062a. \u0642\u0637\u0639\u0627 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0645\u062c\u062f\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u062f\u0627\u0634\u062a\u060c \u062f\u0642\u06cc\u0642\u0627\u064b \u0647\u0645\u0627\u0646 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u062a\u062d\u0648\u06cc\u0644 \u062f\u0627\u062f\u0646\u062f \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0634\u062a\u06cc\u0645\u060c \u062d\u062a\u06cc \u0628\u06cc\u0634\u062a\u0631! \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0633\u06cc\u0627\u0631 \u0631\u0648\u0627\u0646 \u0648 \u067e\u0631\u0648\u0698\u0647 \u062f\u0642\u06cc\u0642\u0627\u064b \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 timeline \u067e\u06cc\u0634 \u0631\u0641\u062a\u00bb <\/div>\r\n                        <\/div>\r\n                                    <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <script>\r\n        jQuery(document).ready(function($){\r\n            var $slider = $('#skill-customer-reviews-slider-8fe4f75-swiper');\r\n            if ($slider.length && !$slider.hasClass('swiper-initialized')) {\r\n                new Swiper($slider[0], {\r\n                    loop: true,\r\n                    navigation: {\r\n                        nextEl: $slider.find('.swiper-button-next')[0],\r\n                        prevEl: $slider.find('.swiper-button-prev')[0],\r\n                    },\r\n                    rtl: true,\r\n                    slidesPerView: 1,\r\n                    spaceBetween: 0,\r\n                    autoHeight: true,\r\n                });\r\n                $slider.addClass('swiper-initialized');\r\n            }\r\n        });\r\n        <\/script>\r\n        \t\t\t\t<\/div>\n\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-5187a93 e-flex e-con-boxed e-con e-parent\" data-id=\"5187a93\" data-element_type=\"container\" data-e-type=\"container\" id=\"blog\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-172d70f e-con-full e-flex e-con e-child\" data-id=\"172d70f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-21e547b elementor-widget elementor-widget-skill_list_weblog_widget\" data-id=\"21e547b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_list_weblog_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <style>\r\n        .skill-blog-list-widget {\r\n            direction: rtl;\r\n        }\r\n        \/* Shared grid wrapper to align header and cards *\/\r\n        .skill-blog-list-inner { display:grid; grid-template-columns: repeat(auto-fit, minmax(301px, 301px)); gap: 2rem; justify-content: center; }\r\n        .skill-blog-list-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; grid-column: 1 \/ -1; }\r\n        .skill-blog-header-right { display:flex; flex-direction: column; gap:8px; }\r\n        .skill-blog-header-row { display:inline-flex; align-items:center; gap:8px; }\r\n        .skill-blog-header-title { font-size: 2rem; margin:0; color:#fff; }\r\n        .skill-blog-header-dot { width:10px; height:10px; background:#1e73be; border-radius:3px; }\r\n        .skill-blog-header-desc { color: rgba(255,255,255,0.8); font-size:1.1rem; }\r\n        \/* Let cards be direct items of the grid wrapper *\/\r\n        .skill-blog-list-cards { display: contents; }\r\n        .skill-blog-card {\r\n            background: #232432;\r\n            border-radius: 18px;\r\n            box-shadow: none;\r\n            overflow: hidden;\r\n            width: 301px;\r\n            height: 411px;\r\n            position: relative;\r\n            transition: box-shadow 0.2s;\r\n        }\r\n        .skill-blog-card:hover {\r\n            box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18);\r\n        }\r\n        .skill-blog-card-img-wrap {\r\n            position: relative;\r\n            width: 100%;\r\n            height: 100%;\r\n            overflow: hidden;\r\n        }\r\n        .skill-blog-card-img {\r\n            width: 100% !important;\r\n            height: 100% !important;\r\n            object-fit: cover;\r\n            filter: grayscale(0.2) saturate(95%);\r\n            transform: scale(1);\r\n            transition: transform 0.35s ease, filter 0.35s ease;\r\n        }\r\n        .skill-blog-card:hover .skill-blog-card-img { transform: scale(1.06); filter: grayscale(0) saturate(110%); }\r\n        .skill-blog-card-info {\r\n            position: absolute;\r\n            left: 12px;\r\n            right: 12px;\r\n            bottom: 12px;\r\n            background: rgba(0,20,62,0.80);\r\n            -webkit-backdrop-filter: blur(10px);\r\n            backdrop-filter: blur(10px);\r\n            border: 0;\r\n            border-radius: 14px;\r\n            box-shadow: 0 4px 13.6px rgba(0,0,0,0.55);\r\n            padding: 0.85rem 0.95rem;\r\n            color: #fff;\r\n        }\r\n        .skill-blog-card-meta {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            align-items: center;\r\n            gap: 0.7rem;\r\n            color: #fff;\r\n            font-size: 0.95rem;\r\n            margin: 1.2rem 1rem 0.5rem 1rem;\r\n            opacity: 0.85;\r\n        }\r\n        .skill-blog-card-meta span {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.3rem;\r\n        }\r\n        .skill-blog-card-excerpt {\r\n            color: #fff;\r\n            opacity: 0.9;\r\n            font-size: 0.95rem;\r\n            margin: 0;\r\n        }\r\n        .skill-blog-card-footer { display:flex; align-items:center; justify-content: space-between; }\r\n        .skill-blog-card-date {\r\n            font-size: 0.92rem;\r\n            color: #fff;\r\n            opacity: 0.85;\r\n            display: flex;\r\n            align-items: center;\r\n            transition: opacity 0.3s;\r\n        }\r\n        .skill-blog-card-footer-spacer { flex: 1 1 auto; }\r\n        .skill-blog-card-link { display:block; width:100%; height:100%; text-decoration:none; }\r\n        .skill-blog-card-readmore-btn, .skill-blog-card-more-btn {\r\n            background: #0E59F2;\r\n            color: #FFFFFF;\r\n            border: none;\r\n            border-radius: 8px;\r\n            padding: 0.5rem 1.3rem;\r\n            font-weight: 600;\r\n            font-size: 1rem;\r\n            transition: background 0.2s, color 0.2s, opacity 0.3s, transform 0.35s cubic-bezier(.4,1.7,.7,1.01);\r\n            text-decoration: none;\r\n            display: inline-block;\r\n            box-shadow: 0 2px 8px rgba(0,0,0,0.10);\r\n        }\r\n        .skill-blog-card-readmore-btn { display:none; }\r\n        .skill-blog-card-readmore-btn:hover, .skill-blog-card-more-btn:hover {\r\n            background: #FFFFFF;\r\n            color: #171C31;\r\n        }\r\n        \/* Clamp title and excerpt to two lines *\/\r\n        .skill-blog-card-title {\r\n            display: -webkit-box;\r\n            -webkit-line-clamp: 2;\r\n            -webkit-box-orient: vertical;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n        }\r\n        .skill-blog-card-excerpt {\r\n            display: -webkit-box;\r\n            -webkit-line-clamp: 3;\r\n            -webkit-box-orient: vertical;\r\n            overflow: hidden;\r\n            text-overflow: ellipsis;\r\n        }\r\n        <\/style>\r\n        <div class=\"skill-blog-list-widget\">\r\n            <div class=\"skill-blog-list-inner\">\r\n            <div class=\"skill-blog-list-title\">\r\n                <div class=\"skill-blog-header-right\" dir=\"rtl\">\r\n                    <div class=\"skill-blog-header-row\" style=\"flex-direction: row-reverse;\">\r\n                                                    <h2 class=\"skill-blog-header-title\">\u0645\u0642\u0627\u0644\u0627\u062a \u0645\u0646<\/h2>\r\n                                                                            <span class=\"skill-blog-header-dot\" aria-hidden=\"true\"><\/span>\r\n                                            <\/div>\r\n                                    <\/div>\r\n                                                        <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/weblog-demo-developer\/\" class=\"skill-blog-card-more-btn\"> \u0646\u0645\u0648\u0646\u0647 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631... <\/a>\r\n                            <\/div>\r\n            <div class=\"skill-blog-list-cards\">\r\n                                    <div class=\"skill-blog-card\">\r\n                        <a class=\"skill-blog-card-link\" href=\"https:\/\/websavant.ir\/skill\/theme-skill\/wordpress-demo-developer\/\">\r\n                            <div class=\"skill-blog-card-img-wrap\">\r\n                                                                    <img decoding=\"async\" class=\"skill-blog-card-img\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/4854333-1024x1024.jpg\" alt=\"\u0645\u0642\u0627\u0644\u0647 \u0648\u0631\u062f\u067e\u0631\u0633 &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\" \/>\r\n                                                                <div class=\"skill-blog-card-info\">\r\n                                    <div class=\"skill-blog-card-footer\">\r\n                                        <div class=\"skill-blog-card-meta\">\r\n                                            <span><i class=\\\"fa fa-user\\\"><\/i> admiin<\/span>                                            <span class=\\\"skill-blog-card-date\\\"><i class=\\\"fa fa-calendar-alt me-1\\\"><\/i> \u06f1\u06f9 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f4<\/span>                                        <\/div>\r\n                                    <\/div>\r\n                                                                            <div class=\"skill-blog-card-excerpt\">\u062e\u0627\u0646\u0647 \u0645\u0642\u0627\u0644\u0647 \u0648\u0631\u062f\u067e\u0631\u0633 &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0645\u0639\u0631\u0641\u06cc \u0648\u0631\u062f\u067e\u0631\u0633 \u0648\u0631\u062f\u067e\u0631\u0633 (WordPress) \u06cc\u06a9 \u0633\u06cc\u0633\u062a\u0645 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062d\u062a\u0648\u0627\u06cc (CMS) \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0645\u062a\u0646\u200c\u0628\u0627\u0632 \u0627\u0633\u062a \u06a9\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u06f4\u06f0\u066a \u0627\u0632 \u0648\u0628\u0633\u0627\u06cc\u062a\u200c\u0647\u0627\u06cc&hellip;<\/div>\r\n                                                                    <\/div>\r\n                            <\/div>\r\n                        <\/a>\r\n                        <div class=\"skill-blog-card-meta\">\r\n                            <span><i class=\"fa fa-folder-open\"><\/i> \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/span><span><i class=\"fa fa-user\"><\/i> admiin<\/span>                        <\/div>\r\n                                             <\/div>\r\n                                    <div class=\"skill-blog-card\">\r\n                        <a class=\"skill-blog-card-link\" href=\"https:\/\/websavant.ir\/skill\/theme-skill\/woo-demo-developer\/\">\r\n                            <div class=\"skill-blog-card-img-wrap\">\r\n                                                                    <img decoding=\"async\" class=\"skill-blog-card-img\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/OGZQE70-1024x1024.jpg\" alt=\"\u0645\u0642\u0627\u0644\u0647 \u0627\u0641\u0632\u0648\u0646\u0647 \u0648\u0648\u06a9\u0627\u0645\u0631\u0633 &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\" \/>\r\n                                                                <div class=\"skill-blog-card-info\">\r\n                                    <div class=\"skill-blog-card-footer\">\r\n                                        <div class=\"skill-blog-card-meta\">\r\n                                            <span><i class=\\\"fa fa-user\\\"><\/i> admiin<\/span>                                            <span class=\\\"skill-blog-card-date\\\"><i class=\\\"fa fa-calendar-alt me-1\\\"><\/i> \u06f1\u06f9 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f4<\/span>                                        <\/div>\r\n                                    <\/div>\r\n                                                                            <div class=\"skill-blog-card-excerpt\">\u062e\u0627\u0646\u0647 \u0645\u0642\u0627\u0644\u0647 \u0627\u0641\u0632\u0648\u0646\u0647 \u0648\u0648\u06a9\u0627\u0645\u0631\u0633 &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u0645\u0639\u0631\u0641\u06cc \u0648\u0648\u06a9\u0627\u0645\u0631\u0633 \u0648\u0648\u06a9\u0627\u0645\u0631\u0633 (WooCommerce) \u06cc\u06a9 \u0627\u0641\u0632\u0648\u0646\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646 \u0648 \u0645\u062a\u0646\u200c\u0628\u0627\u0632 \u0628\u0631\u0627\u06cc \u0633\u06cc\u0633\u062a\u0645 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0631\u062f\u067e\u0631\u0633 \u0627\u0633\u062a \u06a9\u0647 \u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646&hellip;<\/div>\r\n                                                                    <\/div>\r\n                            <\/div>\r\n                        <\/a>\r\n                        <div class=\"skill-blog-card-meta\">\r\n                            <span><i class=\"fa fa-folder-open\"><\/i> \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/span><span><i class=\"fa fa-user\"><\/i> admiin<\/span>                        <\/div>\r\n                                             <\/div>\r\n                                    <div class=\"skill-blog-card\">\r\n                        <a class=\"skill-blog-card-link\" href=\"https:\/\/websavant.ir\/skill\/theme-skill\/php-toturia-demo-developer\/\">\r\n                            <div class=\"skill-blog-card-img-wrap\">\r\n                                                                    <img decoding=\"async\" class=\"skill-blog-card-img\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/03\/3000078-1024x683.jpg\" alt=\"\u0645\u0642\u0627\u0644\u0647 \u06a9\u0627\u0645\u0644 \u0648 \u062c\u0627\u0645\u0639 \u062f\u0631\u0628\u0627\u0631\u0647 php &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\" \/>\r\n                                                                <div class=\"skill-blog-card-info\">\r\n                                    <div class=\"skill-blog-card-footer\">\r\n                                        <div class=\"skill-blog-card-meta\">\r\n                                            <span><i class=\\\"fa fa-user\\\"><\/i> admiin<\/span>                                            <span class=\\\"skill-blog-card-date\\\"><i class=\\\"fa fa-calendar-alt me-1\\\"><\/i> \u06f1\u06f9 \u062a\u06cc\u0631 \u06f1\u06f4\u06f0\u06f4<\/span>                                        <\/div>\r\n                                    <\/div>\r\n                                                                            <div class=\"skill-blog-card-excerpt\">\u062e\u0627\u0646\u0647 \u0645\u0642\u0627\u0644\u0647 php &#8211; \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc PHP (Hypertext\u00a0Preprocessor) \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u062d\u0628\u0648\u0628\u200c\u062a\u0631\u06cc\u0646\u00a0\u0632\u0628\u0627\u0646\u200c\u0647\u0627\u06cc\u00a0\u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u0633\u062a \u06a9\u0647 \u062f\u0631\u00a0\u0633\u0627\u0644 1994 \u062a\u0648\u0633\u0637\u00a0Rasmus Lerdorf \u0627\u06cc\u062c\u0627\u062f\u00a0\u0634\u062f. \u0627\u06cc\u0646 \u0632\u0628\u0627\u0646 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0627\u0635\u00a0\u0628\u0631\u0627\u06cc&hellip;<\/div>\r\n                                                                    <\/div>\r\n                            <\/div>\r\n                        <\/a>\r\n                        <div class=\"skill-blog-card-meta\">\r\n                            <span><i class=\"fa fa-folder-open\"><\/i> \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/span><span><i class=\"fa fa-user\"><\/i> admiin<\/span>                        <\/div>\r\n                                             <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n        <\/div>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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-101ea96 e-flex e-con-boxed e-con e-parent\" data-id=\"101ea96\" data-element_type=\"container\" data-e-type=\"container\" id=\"contact\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48e12fb elementor-widget elementor-widget-skill_contact_us_widget\" data-id=\"48e12fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_contact_us_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        \n        <div class=\"skill-contact-widget with-animations\">\n        <div class=\"contact-header\">\n                        <div class=\"tdw-wrap\" dir=\"rtl\">\n                            <div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\n                                                                    <h2 class=\"tdw-title\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0646<\/h2>\n                                                                                                    <span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\n                                                            <\/div>\n                                                            <div class=\"tdw-desc\" style=\"margin-top:10px;\">\n                                    \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062a\u0645\u0627\u0633 \u0632\u06cc\u0631 \u0628\u0627 \u0645\u0646 \u062f\u0631 \u062a\u0645\u0627\u0633 \u0628\u0627\u0634\u06cc\u062f                                <\/div>\n                                                    <\/div>\n                    <\/div>\n            <!-- Animated Background -->\n            <div class=\"animated-background\">\n                <div class=\"floating-shapes\">\n                    <div class=\"shape shape-1\"><\/div>\n                    <div class=\"shape shape-2\"><\/div>\n                    <div class=\"shape shape-3\"><\/div>\n                    <div class=\"shape shape-4\"><\/div>\n                    <div class=\"shape shape-5\"><\/div>\n                    <div class=\"shape shape-6\"><\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"contact-content-wrapper\">\n                <!-- Left Section - Contact Form -->\n                <div class=\"contact-form-section\">\n\n                                            <div class=\"contact-form-wrapper\">\n                            \n<div class=\"wpcf7 no-js\" id=\"wpcf7-f2312-o1\" lang=\"fa-IR\" dir=\"rtl\" data-wpcf7-id=\"2312\">\n<div class=\"screen-reader-response\"><p role=\"status\" aria-live=\"polite\" aria-atomic=\"true\"><\/p> <ul><\/ul><\/div>\n<form action=\"\/skill\/theme-skill\/wp-json\/wp\/v2\/pages\/1155#wpcf7-f2312-o1\" method=\"post\" class=\"wpcf7-form init\" aria-label=\"\u0641\u0631\u0645 \u062a\u0645\u0627\u0633\" novalidate=\"novalidate\" data-status=\"init\">\n<fieldset class=\"hidden-fields-container\"><input type=\"hidden\" name=\"_wpcf7\" value=\"2312\" \/><input type=\"hidden\" name=\"_wpcf7_version\" value=\"6.1.6\" \/><input type=\"hidden\" name=\"_wpcf7_locale\" value=\"fa_IR\" \/><input type=\"hidden\" name=\"_wpcf7_unit_tag\" value=\"wpcf7-f2312-o1\" \/><input type=\"hidden\" name=\"_wpcf7_container_post\" value=\"0\" \/><input type=\"hidden\" name=\"_wpcf7_posted_data_hash\" value=\"\" \/>\n<\/fieldset>\n<p><span class=\"wpcf7-form-control-wrap\" data-name=\"your-name\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u0646\u0627\u0645 \u0634\u0645\u0627\" value=\"\" type=\"text\" name=\"your-name\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-email\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"hello@example.com\" value=\"\" type=\"email\" name=\"your-email\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-subject\"><input size=\"40\" maxlength=\"400\" class=\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u0645\u0648\u0636\u0648\u0639\" value=\"\" type=\"text\" name=\"your-subject\" \/><\/span><br \/>\n<span class=\"wpcf7-form-control-wrap\" data-name=\"your-message\"><textarea cols=\"40\" rows=\"10\" maxlength=\"2000\" class=\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required\" aria-required=\"true\" aria-invalid=\"false\" placeholder=\"\u067e\u06cc\u0627\u0645 \u062e\u0648\u062f\u062a\u0648\u0646 \u0631\u0648 \u0628\u0631\u0627 \u0645\u0646 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f ...\" name=\"your-message\"><\/textarea><\/span><br \/>\n<button type=\"submit\" class=\"wpcf7-submit\"><br \/>\n\u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 <span class=\"arrow-icon\"><\/span><br \/>\n<\/button>\n<\/p><div class=\"wpcf7-response-output\" aria-hidden=\"true\"><\/div>\n<\/form>\n<\/div>\n                        <\/div>\n                                    <\/div>\n\n                <!-- Right Section - Contact Info -->\n                                    <div class=\"contact-info-section\">\n                        <div class=\"contact-info-container\">\n                                <div class=\"contact-info-item clickable-contact\" data-copy=\"09380000000\" data-type=\"phone\" data-copy-text=\"\u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646\" data-copied-text=\"\u06a9\u067e\u06cc \u0634\u062f!\">\n        <div class=\"contact-info-icon\">\n            <i class=\"fas fa-phone\"><\/i>\n        <\/div>\n        <div class=\"contact-info-content\">\n            <h4>\u062a\u0644\u0641\u0646<\/h4>\n            <p class=\"contact-text\">09380000000<\/p>\n            <div class=\"copy-indicator\">\n                <i class=\"fas fa-copy\"><\/i>\n                <span class=\"copy-text\">\u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n\n                                <div class=\"contact-info-item clickable-contact\" data-copy=\"info@example.com\" data-type=\"email\" data-copy-text=\"\u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646\" data-copied-text=\"\u06a9\u067e\u06cc \u0634\u062f!\">\n        <div class=\"contact-info-icon\">\n            <i class=\"fas fa-envelope\"><\/i>\n        <\/div>\n        <div class=\"contact-info-content\">\n            <h4>\u0627\u06cc\u0645\u06cc\u0644<\/h4>\n            <p class=\"contact-text\">info@example.com<\/p>\n            <div class=\"copy-indicator\">\n                <i class=\"fas fa-copy\"><\/i>\n                <span class=\"copy-text\">\u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646<\/span>\n            <\/div>\n        <\/div>\n    <\/div>\n\n                                                            <div class=\"contact-info-item\">\n                                    <div class=\"contact-info-icon\">\n                                        <i class=\"fas fa-map-marker-alt\"><\/i>\n                                    <\/div>\n                                    <div class=\"contact-info-content\">\n                                        <h4>\u0622\u062f\u0631\u0633<\/h4>\n                                        <p>\u0634\u0647\u0631\u06a9\u0631\u062f \u060c \u0627\u06cc\u0631\u0627\u0646<\/p>\n                                    <\/div>\n                                <\/div>\n                            \n                                                            <div class=\"contact-info-item\">\n                                    <div class=\"contact-info-icon\">\n                                        <i class=\"fas fa-clock\"><\/i>\n                                    <\/div>\n                                    <div class=\"contact-info-content\">\n                                        <h4>\u0633\u0627\u0639\u0627\u062a \u06a9\u0627\u0631\u06cc<\/h4>\n                                        <p>\u0634\u0646\u0628\u0647 \u062a\u0627 \u0686\u0647\u0627\u0631\u0634\u0646\u0628\u0647: 9 \u0635\u0628\u062d \u062a\u0627 6 \u0639\u0635\u0631<\/p>\n                                    <\/div>\n                                <\/div>\n                                                    <\/div>\n                                                <div class=\"mh-footer__social\" aria-label=\"\u0634\u0628\u06a9\u0647\u200c\u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc\">\n                                                                                                                            <a href=\"#\" aria-label=\"\u062a\u0644\u06af\u0631\u0627\u0645\">\n                                  <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M9.04 15.47l-.37 5.28c.53 0 .76-.23 1.03-.51l2.47-2.37 5.12 3.75c.94.52 1.61.25 1.86-.86l3.37-15.8h0c.3-1.4-.5-1.95-1.4-1.6L1.77 10.06c-1.36.53-1.34 1.3-.23 1.64l5.24 1.64 12.17-7.68c.57-.38 1.08-.17.66.21\"\/><\/svg>                                <\/a>\n                                                                                                                                                            <a href=\"#\" aria-label=\"\u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646\">\n                                  <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M4.98 3.5C4.98 4.88 3.86 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM0 8h5v16H0V8zm7.5 0h4.8v2.2h.1c.67-1.27 2.3-2.6 4.73-2.6 5.06 0 6 3.33 6 7.66V24h-5v-7.2c0-1.72-.03-3.93-2.4-3.93-2.4 0-2.77 1.87-2.77 3.8V24h-5V8z\"\/><\/svg>                                <\/a>\n                                                                                                                                                            <a href=\"#\" aria-label=\"\u06af\u06cc\u062a\u200c\u0647\u0627\u0628\">\n                                  <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 .5a12 12 0 00-3.79 23.4c.6.11.82-.26.82-.58 0-.29-.01-1.05-.02-2.07-3.34.73-4.04-1.61-4.04-1.61-.55-1.39-1.35-1.76-1.35-1.76-1.1-.75.08-.73.08-.73 1.22.09 1.86 1.25 1.86 1.25 1.08 1.85 2.82 1.31 3.5 1 .11-.79.42-1.31.76-1.61-2.66-.31-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.12-.31-.54-1.56.12-3.25 0 0 1.01-.32 3.3 1.23a11.5 11.5 0 016 0c2.29-1.55 3.3-1.23 3.3-1.23.66 1.69.24 2.94.12 3.25.77.84 1.24 1.91 1.24 3.22 0 4.61-2.81 5.61-5.49 5.92.43.37.81 1.1.81 2.22 0 1.6-.02 2.89-.02 3.28 0 .32.22.7.83.58A12 12 0 0012 .5z\"\/><\/svg>                                <\/a>\n                                                                                                                                                            <a href=\"#\" aria-label=\"\">\n                                  <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849 3.148-3.221 1.664-4.771 4.919-4.919 1.266-.058 1.644-.07 4.85-.07zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg>                                <\/a>\n                                                                                    <\/div>\n                                            <\/div>\n                            <\/div>\n        <\/div>\n\n        <style>\n        \/* Skill Contact Widget - Beautiful Modern User-Friendly Design *\/\n        \n        \/* ===== MAIN CONTAINER ===== *\/\n        .wpcf7 form.wpcf7-form input, .wpcf7 form.wpcf7-form textarea {\n            height: 64px;\n        }\n\n        .skill-contact-widget {\n            margin: 0 auto;\n            padding: 70px 20px;\n            min-height: 100vh;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: \n                radial-gradient(circle at 25% 75%, rgba(99, 102, 241, 0.1) 0%, transparent 60%),\n                radial-gradient(circle at 75% 25%, rgba(139, 92, 246, 0.06) 0%, transparent 60%),\n                radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 70%),\n                linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 30%, #0d0d0d 50%, #1a1a1a 70%, #0a0a0a 100%);\n            position: relative;\n            overflow: hidden;\n            flex-direction: column;\n        }\n\n        \/* ===== ANIMATED BACKGROUND ===== *\/\n        .animated-background {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            z-index: -1;\n        }\n\n        .floating-shapes {\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            overflow: hidden;\n        }\n\n        .shape {\n            position: absolute;\n            border-radius: 50%;\n            background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(139, 92, 246, 0.2) 50%, rgba(168, 85, 247, 0.12) 100%);\n            animation: particleFloat 16s ease-in-out infinite;\n            filter: blur(1px);\n            box-shadow: \n                0 0 20px rgba(99, 102, 241, 0.25),\n                inset 0 0 12px rgba(255, 255, 255, 0.06);\n        }\n\n        .shape-1 { width: 10px; height: 10px; top: 20%; left: 10%; animation-delay: 0s; animation-duration: 20s; }\n        .shape-2 { width: 16px; height: 16px; top: 70%; right: 15%; animation-delay: 3s; animation-duration: 23s; }\n        .shape-3 { width: 7px; height: 7px; bottom: 30%; left: 20%; animation-delay: 6s; animation-duration: 18s; }\n        .shape-4 { width: 12px; height: 12px; top: 40%; right: 10%; animation-delay: 9s; animation-duration: 25s; }\n        .shape-5 { width: 18px; height: 18px; bottom: 20%; right: 25%; animation-delay: 12s; animation-duration: 22s; }\n        .shape-6 { width: 5px; height: 5px; top: 80%; left: 60%; animation-delay: 15s; animation-duration: 19s; }\n\n        @keyframes particleFloat {\n            0%, 100% { transform: translateY(0px) translateX(0px) scale(1) rotate(0deg); opacity: 0.35; }\n            25% { transform: translateY(-25px) translateX(12px) scale(1.25) rotate(90deg); opacity: 0.7; }\n            50% { transform: translateY(-35px) translateX(-6px) scale(0.75) rotate(180deg); opacity: 0.5; }\n            75% { transform: translateY(-15px) translateX(20px) scale(1.15) rotate(270deg); opacity: 0.8; }\n        }\n\n        \/* ===== CONTENT LAYOUT ===== *\/\n        .contact-content-wrapper {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 60px;\n            align-items: stretch;\n            position: relative;\n            z-index: 2;\n            max-width: 1000px;\n            width: 100%;\n        }\n\n        \/* ===== HEADER SECTION ===== *\/\n        .contact-header { text-align: center; margin-bottom: 40px; }\n        .tdw-title { font-size: 3.2rem; font-weight: 700; margin-bottom: 18px; position: relative; letter-spacing: -0.5px; }\n        .tdw-desc { font-size: 1.1rem; line-height: 1.6; color: #d1d5db; margin: 0; font-weight: 300; opacity: 0.85; max-width: 450px; margin: 0 auto; }\n        .tdw-dot { width: 10px; height: 10px; display:inline-block; border-radius:3px; background-color:#1e73be; }\n\n        \/* ===== FORM AND INFO SECTIONS ===== *\/\n        .contact-form-section {\n            display: flex;\n            flex-direction: column;\n            justify-content: flex-start;\n            align-items: stretch;\n            height: 100%;\n        }\n\n        .contact-info-section {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .contact-form-section {\n            align-items: center;\n        }\n\n        .contact-title {\n            font-size: 3.2rem;\n            font-weight: 700;\n            margin-bottom: 18px;\n            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 30%, #a855f7 60%, #c084fc 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            position: relative;\n            text-shadow: 0 0 25px rgba(99, 102, 241, 0.25);\n            letter-spacing: -0.5px;\n        }\n\n        .contact-title::after {\n            content: '';\n            position: absolute;\n            bottom: -10px;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 70px;\n            height: 3px;\n            background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);\n            border-radius: 2px;\n            box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);\n        }\n\n        .contact-subtitle {\n            font-size: 1.1rem;\n            line-height: 1.6;\n            color: #d1d5db;\n            margin: 0;\n            font-weight: 300;\n            opacity: 0.85;\n            max-width: 450px;\n            margin: 0 auto;\n        }\n\n        \/* ===== CONTACT FORM 7 STYLES ===== *\/\n        .wpcf7 form.wpcf7-form {\n            background: rgba(255, 255, 255, 0.07);\n            padding: 32px;\n            border-radius: 22px;\n            width: 100%;\n            max-width: 420px;\n            margin: 0 auto;\n            backdrop-filter: blur(22px);\n            border: 1px solid rgba(255, 255, 255, 0.12);\n            box-shadow: \n                0 20px 40px rgba(0, 0, 0, 0.3),\n                0 0 0 1px rgba(255, 255, 255, 0.08),\n                inset 0 1px 0 rgba(255, 255, 255, 0.12);\n            position: relative;\n            overflow: hidden;\n            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n            height: fit-content;\n        }\n\n        .wpcf7 form.wpcf7-form::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: \n                radial-gradient(circle at 25% 75%, rgba(99, 102, 241, 0.1) 0%, transparent 60%),\n                radial-gradient(circle at 75% 25%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 0.35s ease;\n        }\n\n        .wpcf7 form.wpcf7-form:hover::before {\n            opacity: 1;\n        }\n\n        .wpcf7 form.wpcf7-form:hover {\n            border-color: rgba(99, 102, 241, 0.35);\n            box-shadow: \n                0 25px 50px rgba(0, 0, 0, 0.4),\n                0 0 0 1px rgba(99, 102, 241, 0.25),\n                inset 0 1px 0 rgba(255, 255, 255, 0.15),\n                0 0 30px rgba(99, 102, 241, 0.15);\n            transform: translateY(-4px);\n        }\n\n        \/* Form Inputs *\/\n        .wpcf7 form.wpcf7-form input,\n        .wpcf7 form.wpcf7-form textarea,\n        input.wpcf7-form-control.wpcf7-email.wpcf7-validates-as-required.wpcf7-text.wpcf7-validates-as-email {\n            background: rgba(255, 255, 255, 0.08);\n            border: 2px solid rgba(99, 102, 241, 0.25);\n            color: #fff;\n            border-radius: 16px;\n            margin-bottom: 18px;\n            width: 100%;\n            padding: 16px 18px;\n            font-size: 15px;\n            outline: none;\n            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n            backdrop-filter: blur(12px);\n            position: relative;\n            box-shadow: \n                0 6px 16px rgba(0, 0, 0, 0.12),\n                inset 0 1px 0 rgba(255, 255, 255, 0.06);\n        }\n\n        .wpcf7 form.wpcf7-form input:focus,\n        .wpcf7 form.wpcf7-form textarea:focus {\n            border-color: #6366f1;\n            box-shadow: \n                0 0 25px rgba(99, 102, 241, 0.35),\n                0 0 0 2px rgba(99, 102, 241, 0.08),\n                0 8px 20px rgba(0, 0, 0, 0.15);\n            transform: translateY(-2px);\n            background: rgba(255, 255, 255, 0.12);\n        }\n\n        .wpcf7 form.wpcf7-form input::placeholder,\n        .wpcf7 form.wpcf7-form textarea::placeholder {\n            color: rgba(255, 255, 255, 0.65);\n            font-weight: 300;\n        }\n\n        .wpcf7 form.wpcf7-form textarea {\n            min-height: 110px;\n            resize: vertical;\n        }\n\n        \/* Email Input Specific Styling *\/\n        .wpcf7 form.wpcf7-form input[type=\"email\"] {\n            background: rgba(255, 255, 255, 0.08);\n            border: 2px solid rgba(99, 102, 241, 0.25);\n            color: #fff;\n            border-radius: 16px;\n            margin-bottom: 18px;\n            width: 100%;\n            padding: 16px 18px;\n            font-size: 15px;\n            outline: none;\n            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n            backdrop-filter: blur(12px);\n            position: relative;\n            box-shadow: \n                0 6px 16px rgba(0, 0, 0, 0.12),\n                inset 0 1px 0 rgba(255, 255, 255, 0.06);\n        }\n\n        .wpcf7 form.wpcf7-form input[type=\"email\"]:focus {\n            border-color: #6366f1;\n            box-shadow: \n                0 0 25px rgba(99, 102, 241, 0.35),\n                0 0 0 2px rgba(99, 102, 241, 0.08),\n                0 8px 20px rgba(0, 0, 0, 0.15);\n            transform: translateY(-2px);\n            background: rgba(255, 255, 255, 0.12);\n        }\n\n        .wpcf7 form.wpcf7-form input[type=\"email\"]::placeholder {\n            color: rgba(255, 255, 255, 0.65);\n            font-weight: 300;\n        }\n\n        \/* Submit Button *\/\n        .wpcf7 form.wpcf7-form .wpcf7-submit {\n            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 30%, #a855f7 70%, #6366f1 100%);\n            color: #ffffff;\n            border: none;\n            border-radius: 20px;\n            font-size: 15px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n            margin-top: 12px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-direction: row;\n            box-shadow: \n                0 12px 25px rgba(99, 102, 241, 0.35),\n                0 0 0 1px rgba(255, 255, 255, 0.08),\n                inset 0 1px 0 rgba(255, 255, 255, 0.12);\n            position: relative;\n            overflow: hidden;\n            text-transform: uppercase;\n            letter-spacing: 0.8px;\n            padding: 15px 50px 15px 50px;\n        }\n\n        .wpcf7 form.wpcf7-form .wpcf7-submit::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: -100%;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);\n            transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .wpcf7 form.wpcf7-form .wpcf7-submit::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: \n                radial-gradient(circle at 25% 75%, rgba(99, 102, 241, 0.2) 0%, transparent 60%),\n                radial-gradient(circle at 75% 25%, rgba(139, 92, 246, 0.12) 0%, transparent 60%);\n            opacity: 0;\n            transition: opacity 0.35s ease;\n            pointer-events: none;\n        }\n\n        .wpcf7 form.wpcf7-form .wpcf7-submit:hover {\n            background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 30%, #c084fc 70%, #6366f1 100%);\n            transform: translateY(-4px) scale(1.02);\n            box-shadow: \n                0 16px 35px rgba(99, 102, 241, 0.4),\n                0 0 0 1px rgba(255, 255, 255, 0.15),\n                0 0 25px rgba(99, 102, 241, 0.25);\n        }\n\n        .wpcf7 form.wpcf7-form .wpcf7-submit:hover::before {\n            left: 100%;\n        }\n\n        .wpcf7 form.wpcf7-form .wpcf7-submit:hover::after {\n            opacity: 1;\n        }\n\n        \/* Hide BR tags inside submit button *\/\n        .wpcf7 form.wpcf7-form .wpcf7-submit br {\n            display: none;\n        }\n\n        \/* General rule to hide BR tags in all submit buttons *\/\n        .wpcf7-form .wpcf7-submit br {\n            display: none !important;\n        }\n\n        \/* Ensure proper text alignment in submit button *\/\n        .wpcf7-form .wpcf7-submit {\n            white-space: nowrap;\n            text-align: center;\n        }\n\n        \/* Remove any unwanted spacing from button content *\/\n        .wpcf7-form .wpcf7-submit > * {\n            margin: 0;\n            padding: 0;\n        }\n\n        \/* Form States *\/\n        .wpcf7 form.wpcf7-form.sent .wpcf7-submit {\n            background: linear-gradient(135deg, #10b981, #059669, #047857);\n            animation: successPulse 0.7s ease-in-out;\n        }\n\n        .wpcf7 form.wpcf7-form.invalid .wpcf7-submit {\n            background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c);\n            animation: errorShake 0.7s ease-in-out;\n        }\n\n        \/* ===== CONTACT INFO SECTION ===== *\/\n        .contact-info-section {\n            display: flex;\n            flex-direction: column;\n        }\n\n        .contact-info-container {\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n        }\n\n        .contact-info-item {\n            display: flex;\n            align-items: center;\n            gap: 20px;\n            padding: 25px;\n            background: rgba(255, 255, 255, 0.06);\n            border-radius: 20px;\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n            backdrop-filter: blur(20px);\n            position: relative;\n            overflow: hidden;\n            box-shadow: \n                0 12px 25px rgba(0, 0, 0, 0.2),\n                0 0 0 1px rgba(255, 255, 255, 0.06);\n        }\n\n        .contact-info-item::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: \n                radial-gradient(circle at 25% 75%, rgba(99, 102, 241, 0.12) 0%, transparent 60%),\n                radial-gradient(circle at 75% 25%, rgba(139, 92, 246, 0.08) 0%, transparent 60%);\n            opacity: 0;\n            transition: opacity 0.35s ease;\n        }\n\n        .contact-info-item:hover {\n            transform: translateY(-6px) scale(1.01);\n            border-color: rgba(99, 102, 241, 0.3);\n            box-shadow: \n                0 20px 40px rgba(0, 0, 0, 0.3),\n                0 0 0 1px rgba(99, 102, 241, 0.25),\n                0 0 25px rgba(99, 102, 241, 0.2);\n        }\n\n        .contact-info-item:hover::before {\n            opacity: 1;\n        }\n\n        \/* Contact Icons *\/\n        .contact-info-icon {\n            width: 52px;\n            height: 52px;\n            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 30%, #a855f7 70%, #6366f1 100%);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 20px;\n            color: #ffffff;\n            flex-shrink: 0;\n            box-shadow: \n                0 12px 25px rgba(99, 102, 241, 0.35),\n                0 0 0 1px rgba(255, 255, 255, 0.08),\n                inset 0 1px 0 rgba(255, 255, 255, 0.12);\n            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .contact-info-icon::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);\n            opacity: 0;\n            transition: opacity 0.35s ease;\n        }\n\n        .contact-info-icon::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: \n                radial-gradient(circle at 25% 75%, rgba(99, 102, 241, 0.25) 0%, transparent 60%),\n                radial-gradient(circle at 75% 25%, rgba(139, 92, 246, 0.15) 0%, transparent 60%);\n            opacity: 0;\n            transition: opacity 0.35s ease;\n            pointer-events: none;\n        }\n\n        .contact-info-item:hover .contact-info-icon {\n            transform: scale(1.08) rotate(6deg);\n            box-shadow: \n                0 16px 35px rgba(99, 102, 241, 0.4),\n                0 0 0 1px rgba(255, 255, 255, 0.15),\n                0 0 25px rgba(99, 102, 241, 0.25);\n        }\n\n        .contact-info-item:hover .contact-info-icon::before,\n        .contact-info-item:hover .contact-info-icon::after {\n            opacity: 1;\n        }\n\n        \/* Contact Content *\/\n        .contact-info-content h4 {\n            font-size: 16px;\n            font-weight: 600;\n            margin-bottom: 6px;\n            color: #6366f1;\n            text-transform: uppercase;\n            letter-spacing: 0.8px;\n        }\n\n        .contact-info-content p {\n            font-size: 14px;\n            line-height: 1.5;\n            margin: 0;\n            color: #d1d5db;\n            font-weight: 300;\n        }\n\n        .contact-info-content a {\n            color: #6366f1;\n            text-decoration: none;\n            transition: color 0.3s ease;\n            font-weight: 500;\n        }\n\n        .contact-info-content a:hover {\n            color: #8b5cf6;\n            text-shadow: 0 0 8px rgba(99, 102, 241, 0.4);\n        }\n\n        \/* ===== SOCIAL MEDIA SECTION ===== *\/\n        .social-media-section {\n            display: flex;\n            gap: 15px;\n            margin-top: 25px;\n            justify-content: center;\n            flex-wrap: wrap;\n        }\n\n        \/* Footer Social Icons Styling *\/\n        .mh-footer__social {\n            display: flex;\n            gap: 12px;\n            margin-top: 20px;\n            justify-content: center;\n            flex-wrap: wrap;\n        }\n\n        .mh-footer__social a {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 40px;\n            height: 40px;\n            background: rgba(255, 255, 255, 0.1);\n            border-radius: 50%;\n            color: #ffffff;\n            text-decoration: none;\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            backdrop-filter: blur(10px);\n            border: 1px solid rgba(255, 255, 255, 0.2);\n            position: relative;\n            overflow: hidden;\n        }\n\n        .mh-footer__social a::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n\n        .mh-footer__social a:hover {\n            background: rgba(99, 102, 241, 0.2);\n            transform: translateY(-3px) scale(1.05);\n            box-shadow: \n                0 10px 25px rgba(99, 102, 241, 0.3),\n                0 0 0 1px rgba(99, 102, 241, 0.3);\n        }\n\n        .mh-footer__social a:hover::before {\n            opacity: 1;\n        }\n\n        .mh-footer__social svg {\n            width: 20px;\n            height: 20px;\n            transition: all 0.3s ease;\n            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));\n        }\n\n        .mh-footer__social a:hover svg {\n            transform: scale(1.1);\n            filter: drop-shadow(0 4px 8px rgba(99, 102, 241, 0.4));\n        }\n\n        \/* ===== ANIMATIONS ===== *\/\n        .with-animations .contact-form-section {\n            animation: slideInUp 1s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .with-animations .contact-info-item {\n            animation: slideInRight 1s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .with-animations .contact-info-item:nth-child(2) { animation-delay: 0.2s; }\n        .with-animations .contact-info-item:nth-child(3) { animation-delay: 0.4s; }\n        .with-animations .contact-info-item:nth-child(4) { animation-delay: 0.6s; }\n        .with-animations .contact-info-item:nth-child(5) { animation-delay: 0.8s; }\n\n        @keyframes slideInUp {\n            from { opacity: 0; transform: translateY(50px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        @keyframes slideInRight {\n            from { opacity: 0; transform: translateX(50px); }\n            to { opacity: 1; transform: translateX(0); }\n        }\n\n        @keyframes successPulse {\n            0% { transform: scale(1); }\n            50% { transform: scale(1.03); }\n            100% { transform: scale(1); }\n        }\n\n        @keyframes errorShake {\n            0%, 100% { transform: translateX(0); }\n            25% { transform: translateX(-5px); }\n            75% { transform: translateX(5px); }\n        }\n\n        \/* ===== CLICKABLE CONTACT ITEMS ===== *\/\n        .clickable-contact {\n            cursor: pointer;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .clickable-contact::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));\n            opacity: 0;\n            transition: opacity 0.3s ease;\n            pointer-events: none;\n        }\n\n        .clickable-contact:hover::after {\n            opacity: 1;\n        }\n\n        .copy-indicator {\n            position: absolute;\n            top: 50%;\n            right: 20px;\n            transform: translateY(-50%);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            background: rgba(99, 102, 241, 0.9);\n            color: #ffffff;\n            padding: 8px 12px;\n            border-radius: 20px;\n            font-size: 12px;\n            font-weight: 500;\n            opacity: 0;\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            backdrop-filter: blur(10px);\n            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);\n            pointer-events: none;\n        }\n\n        .clickable-contact:hover .copy-indicator {\n            opacity: 1;\n            transform: translateY(-50%) translateX(-5px);\n        }\n\n        .copy-indicator i {\n            font-size: 11px;\n        }\n\n        .copy-indicator.copied {\n            background: rgba(16, 185, 129, 0.9);\n            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);\n        }\n\n        .contact-info-content {\n            position: relative;\n            flex: 1;\n        }\n\n        .contact-text {\n            transition: color 0.3s ease;\n        }\n\n        .clickable-contact:hover .contact-text {\n            color: #6366f1;\n        }\n\n        \/* Copy Animation *\/\n        @keyframes copySuccess {\n            0% { transform: scale(1); }\n            50% { transform: scale(1.1); }\n            100% { transform: scale(1); }\n        }\n\n        .copy-success {\n            animation: copySuccess 0.6s ease-in-out;\n        }\n\n        \/* ===== RESPONSIVE DESIGN ===== *\/\n        @media (max-width: 1024px) {\n            .contact-content-wrapper {\n                grid-template-columns: 1fr;\n                gap: 60px;\n                align-items: center;\n            }\n            \n            .contact-form-section,\n            .contact-info-section {\n                align-items: center;\n            }\n        }\n\n        @media (max-width: 768px) {\n            .skill-contact-widget {\n                padding: 50px 15px;\n            }\n\n            .contact-content-wrapper {\n                gap: 50px;\n            }\n\n            .contact-title {\n                font-size: 2.6rem;\n            }\n\n            .contact-info-item {\n                padding: 20px;\n            }\n\n            .contact-info-icon {\n                width: 45px;\n                height: 45px;\n                font-size: 18px;\n            }\n\n            .copy-indicator {\n                right: 15px;\n                padding: 6px 10px;\n                font-size: 11px;\n            }\n        }\n\n        @media (max-width: 480px) {\n            .contact-title {\n                font-size: 2.2rem;\n            }\n\n            .contact-info-item {\n                padding: 18px;\n                flex-direction: column;\n                text-align: center;\n                gap: 15px;\n            }\n\n            .contact-info-icon {\n                width: 40px;\n                height: 40px;\n                font-size: 16px;\n            }\n\n            .copy-indicator {\n                position: static;\n                transform: none;\n                margin-top: 10px;\n                justify-content: center;\n                opacity: 1;\n            }\n\n            .clickable-contact:hover .copy-indicator {\n                transform: none;\n            }\n\n            \/* Social Icons Responsive *\/\n            .mh-footer__social {\n                gap: 12px;\n                margin-top: 20px;\n            }\n\n            .mh-footer__social a {\n                width: 40px;\n                height: 40px;\n            }\n\n            .mh-footer__social svg {\n                width: 20px;\n                height: 20px;\n            }\n        }\n        <\/style>\n\n        <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Copy functionality for contact items\n            const clickableContacts = document.querySelectorAll('.clickable-contact');\n            \n            clickableContacts.forEach(function(contact) {\n                contact.addEventListener('click', function() {\n                    const textToCopy = this.getAttribute('data-copy');\n                    const copiedText = this.getAttribute('data-copied-text') || '\u06a9\u067e\u06cc \u0634\u062f!';\n                    const originalText = this.getAttribute('data-copy-text') || '\u06a9\u067e\u06cc \u06a9\u0631\u062f\u0646';\n                    const copyIndicator = this.querySelector('.copy-indicator');\n                    const copyText = copyIndicator.querySelector('.copy-text');\n                    const copyIcon = copyIndicator.querySelector('i');\n                    \n                    \/\/ Copy to clipboard\n                    if (navigator.clipboard && window.isSecureContext) {\n                        navigator.clipboard.writeText(textToCopy).then(function() {\n                            showCopySuccess(copyIndicator, copyText, copyIcon, copiedText, originalText);\n                        }).catch(function(err) {\n                            console.error('Failed to copy: ', err);\n                            fallbackCopyTextToClipboard(textToCopy, copyIndicator, copyText, copyIcon, copiedText, originalText);\n                        });\n                    } else {\n                        fallbackCopyTextToClipboard(textToCopy, copyIndicator, copyText, copyIcon, copiedText, originalText);\n                    }\n                });\n            });\n            \n            function showCopySuccess(copyIndicator, copyText, copyIcon, copiedText, originalText) {\n                copyIndicator.classList.add('copied');\n                copyIcon.className = 'fas fa-check';\n                copyText.textContent = copiedText;\n                copyIndicator.parentElement.classList.add('copy-success');\n                \n                setTimeout(function() {\n                    copyIndicator.classList.remove('copied');\n                    copyIcon.className = 'fas fa-copy';\n                    copyText.textContent = originalText;\n                    copyIndicator.parentElement.classList.remove('copy-success');\n                }, 2000);\n            }\n            \n            function fallbackCopyTextToClipboard(text, copyIndicator, copyText, copyIcon, copiedText, originalText) {\n                const textArea = document.createElement('textarea');\n                textArea.value = text;\n                textArea.style.position = 'fixed';\n                textArea.style.left = '-999999px';\n                textArea.style.top = '-999999px';\n                document.body.appendChild(textArea);\n                textArea.focus();\n                textArea.select();\n                \n                try {\n                    const successful = document.execCommand('copy');\n                    if (successful) {\n                        showCopySuccess(copyIndicator, copyText, copyIcon, copiedText, originalText);\n                    }\n                } catch (err) {\n                    console.error('Fallback error', err);\n                }\n                document.body.removeChild(textArea);\n            }\n        });\n        <\/script>\n\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>\u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633\u06cc \u0645\u0647\u0627\u0631\u062a \u0634\u0631\u0648\u0639 \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0628\u0647 \u0648\u0642\u062a \u0622\u0645\u0648\u0632\u0634 \u0647\u0627\u06cc \u062c\u0630\u0627\u0628 \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646 \u0637\u0646\u0632\u0647\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0645\u062d\u06cc\u0637 \u06a9\u0627\u0631\u06cc \u062c\u062f\u06cc\u062f \u0645\u0646 \u0646\u0645\u0648\u0646\u0647 \u06a9\u062f\u0647\u0627\u06cc \u0632\u062f\u0647 \u0634\u062f\u0647 \u0633\u0648\u067e\u0631\u0627\u06cc\u0632 \u062f\u0645\u0648\u06cc \u062c\u062f\u06cc\u062f \u0642\u0627\u0644\u0628 \u0645\u0647\u0627\u0631\u062a \u0628\u0647 \u0632\u0648\u062f\u06cc \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0631\u0648 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f \u0646\u0638\u0631\u0627\u062a \u0647\u0645\u0631\u0627\u0647\u0627\u0646 \u0639\u0632\u06cc\u0632\u0645 \u0647\u0631\u0622\u0646\u0686\u0647 \u062f\u0631 \u0630\u0647\u0646 \u062f\u0627\u0631\u06cc \u0627\u0632 \u0645\u0646 \u0628\u067e\u0631\u0633 &times; \u0627\u06a9\u0646\u0648\u0646 0 \u0627\u0634\u062a\u0631\u0627\u06a9\u200c\u06af\u0630\u0627\u0631\u06cc \u0622\u0646\u0644\u0627\u06cc\u0646 \u0645\u062d\u0645\u062f \u062d\u06cc\u062f\u0631\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0628 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"home-landing.php","meta":{"footnotes":""},"class_list":["post-1155","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/pages\/1155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/comments?post=1155"}],"version-history":[{"count":18,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/pages\/1155\/revisions"}],"predecessor-version":[{"id":5433,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/pages\/1155\/revisions\/5433"}],"wp:attachment":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/media?parent=1155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}