{"id":1732,"date":"2025-07-08T14:05:56","date_gmt":"2025-07-08T14:05:56","guid":{"rendered":"https:\/\/websavant.ir\/skill\/theme-skill\/?post_type=project&#038;p=1732"},"modified":"2026-01-04T06:20:36","modified_gmt":"2026-01-04T06:20:36","slug":"project-demo-developer","status":"publish","type":"project","link":"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/","title":{"rendered":"\u067e\u0631\u0648\u0698\u0647 \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1732\" class=\"elementor elementor-1732\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0138161 e-flex e-con-boxed e-con e-parent\" data-id=\"0138161\" 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-2541a01 elementor-widget elementor-widget-skill_breadcrumb\" data-id=\"2541a01\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_breadcrumb.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav class=\"skill-breadcrumb\" aria-label=\"breadcrumb\"><a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/\">\u062e\u0627\u0646\u0647<\/a><\/nav>\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-cdff495 e-flex e-con-boxed e-con e-parent\" data-id=\"cdff495\" 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-05eb601 e-con-full e-flex e-con e-child\" data-id=\"05eb601\" 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-387513e e-con-full e-flex e-con e-child\" data-id=\"387513e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8acab8b elementor-widget elementor-widget-heading\" data-id=\"8acab8b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u067e\u0631\u0648\u0698\u0647 \u062f\u0645\u0648\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/h2>\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-94386ac elementor-widget elementor-widget-skill_button_share\" data-id=\"94386ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_button_share.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-share-widget\" id=\"skill-share-widget-94386ac\">\r\n            <button class=\"skill-share-toggle\">\r\n                                    <span>\u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc<\/span>\r\n                                <svg aria-hidden=\"true\" class=\"skill-share-btn-icon e-font-icon-svg e-fas-share-alt\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M352 320c-22.608 0-43.387 7.819-59.79 20.895l-102.486-64.054a96.551 96.551 0 0 0 0-41.683l102.486-64.054C308.613 184.181 329.392 192 352 192c53.019 0 96-42.981 96-96S405.019 0 352 0s-96 42.981-96 96c0 7.158.79 14.13 2.276 20.841L155.79 180.895C139.387 167.819 118.608 160 96 160c-53.019 0-96 42.981-96 96s42.981 96 96 96c22.608 0 43.387-7.819 59.79-20.895l102.486 64.054A96.301 96.301 0 0 0 256 416c0 53.019 42.981 96 96 96s96-42.981 96-96-42.981-96-96-96z\"><\/path><\/svg>            <\/button>\r\n            <div class=\"skill-share-socials\">\r\n                <div class=\"skill-share-socials-icons\" style=\"display: flex; flex-direction: row; gap: 20px; width: 100%; justify-content: flex-start;\">\r\n                                        <a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fproject%2Fproject-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"facebook\">\r\n                            <i class=\"fab fa-facebook-f\"><\/i>\r\n                        <\/a>\r\n                                            <a href=\"https:\/\/www.linkedin.com\/shareArticle?mini=true&#038;url=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fproject%2Fproject-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"linkedin\">\r\n                            <i class=\"fab fa-linkedin-in\"><\/i>\r\n                        <\/a>\r\n                                            <a href=\"https:\/\/www.instagram.com\/?url=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fproject%2Fproject-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"instagram\">\r\n                            <i class=\"fab fa-instagram\"><\/i>\r\n                        <\/a>\r\n                                            <a href=\"https:\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fproject%2Fproject-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"twitter\">\r\n                            <i class=\"fab fa-twitter\"><\/i>\r\n                        <\/a>\r\n                                            <a href=\"https:\/\/t.me\/share\/url?url=https%3A%2F%2Fwebsavant.ir%2Fskill%2Ftheme-skill%2Fproject%2Fproject-demo-developer%2F\" target=\"_blank\" rel=\"noopener\" title=\"telegram\">\r\n                            <i class=\"fab fa-telegram-plane\"><\/i>\r\n                        <\/a>\r\n                                    <\/div>\r\n                <div class=\"skill-share-link\" style=\"width: 100%; margin-top: 0;\">\r\n                    <input type=\"text\" value=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\" readonly style=\"width: 100%; background: transparent; border: none; color: #8b8b8b; font-size: 15px; direction: ltr; outline: none; padding: 8px 8px;\">\r\n                    <button class=\"skill-share-copy\" title=\"\u06a9\u067e\u06cc \u0644\u06cc\u0646\u06a9\" style=\"font-size: 18px;\">\r\n                        <i class=\"far fa-copy\"><\/i>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n        <style>\r\n.skill-share-widget {\r\n    position: relative;\r\n    display: inline-block;\r\n    direction: rtl;\r\n}\r\n.skill-share-toggle {\r\n    background: #080708;\r\n    color: #8d8d8d;\r\n    border: 1px solid #8d8d8d;\r\n    border-radius: 10px;\r\n    padding: 10px 18px;\r\n    cursor: pointer;\r\n    font-size: 18px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 8px;\r\n    transition: background 0.2s;\r\n}\r\n.skill-share-toggle:hover {\r\n    background: #22263a;\r\n}\r\n.skill-share-socials {\r\n    position: absolute;\r\n    top: 110%;\r\n    left: 0;\r\n    background: rgba(8,7,8,0.55);\r\n    border: 1px solid #8d8d8d;\r\n    border-radius: 12px;\r\n    padding: 18px 18px 10px 18px;\r\n    min-width: 260px;\r\n    box-shadow: 0 8px 32px rgba(0,0,0,0.18);\r\n    z-index: 99;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    transform: translateY(0);\r\n    transition: opacity 0.8s cubic-bezier(.4,2,.6,1), max-height 0.8s cubic-bezier(.4,2,.6,1);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    max-height: 0;\r\n    overflow: hidden;\r\n    backdrop-filter: blur(12px) saturate(160%);\r\n    -webkit-backdrop-filter: blur(12px) saturate(160%);\r\n}\r\n.skill-share-widget.active .skill-share-socials {\r\n    opacity: 1;\r\n    pointer-events: auto;\r\n    max-height: 200px;\r\n}\r\n.skill-share-socials a {\r\n    color: #8b8b8b;\r\n    font-size: 22px;\r\n    margin-left: 10px;\r\n    transition: color 0.2s, transform 0.2s;\r\n    display: inline-block;\r\n}\r\n.skill-share-socials a:hover {\r\n    color: #fff;\r\n    transform: scale(1.2) rotate(-8deg);\r\n}\r\n.skill-share-link {\r\n    margin-top: 10px;\r\n    background: #23263a;\r\n    border-radius: 8px;\r\n    padding: 0 8px;\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    width: 100%;\r\n}\r\n.skill-share-link input {\r\n    background: transparent;\r\n    border: none;\r\n    color: #8b8b8b;\r\n    width: 100%;\r\n    font-size: 15px;\r\n    direction: ltr;\r\n    outline: none;\r\n    padding: 8px 8px;\r\n    margin-bottom: 6px;\r\n}\r\n.skill-share-copy {\r\n    background: none;\r\n    border: none;\r\n    color: #8b8b8b;\r\n    font-size: 18px;\r\n    cursor: pointer;\r\n    transition: color 0.2s;\r\n}\r\n.skill-share-copy:hover {\r\n    color: #fff;\r\n}\r\n<\/style>\r\n        <script>\r\n        (function($){\r\n            var $widget = $('#skill-share-widget-94386ac');\r\n            var $toggle = $widget.find('.skill-share-toggle');\r\n            var $socials = $widget.find('.skill-share-socials');\r\n            var $copyBtn = $widget.find('.skill-share-copy');\r\n            var $input = $widget.find('.skill-share-link input');\r\n\r\n            $toggle.on('click', function(e){\r\n                e.stopPropagation();\r\n                $('.skill-share-widget').not($widget).removeClass('active');\r\n                $widget.toggleClass('active');\r\n            });\r\n\r\n            $(document).on('click', function(e){\r\n                if (!$widget.is(e.target) && $widget.has(e.target).length === 0) {\r\n                    $widget.removeClass('active');\r\n                }\r\n            });\r\n\r\n            $copyBtn.on('click', function(e){\r\n                e.stopPropagation();\r\n                $input[0].focus();\r\n                $input[0].setSelectionRange(0, $input[0].value.length);\r\n                try {\r\n                    var successful = document.execCommand('copy');\r\n                    $copyBtn.html('<i class=\\\"fas fa-check\\\"><\/i>');\r\n                    setTimeout(function(){\r\n                        $copyBtn.html('<i class=\\\"far fa-copy\\\"><\/i>');\r\n                    }, 1200);\r\n                } catch (err) {\r\n                    alert('\u06a9\u067e\u06cc \u0646\u0634\u062f!');\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-1c8b864 e-flex e-con-boxed e-con e-parent\" data-id=\"1c8b864\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-54654b0 e-con-full e-flex e-con e-child\" data-id=\"54654b0\" 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-f2c53ad elementor-widget elementor-widget-skill_image_gallery_slider\" data-id=\"f2c53ad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_image_gallery_slider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-image-gallery-slider\" id=\"skill_slider_6a9e470ce5ada\" dir=\"rtl\">\r\n            <style>\r\n                .skill-image-gallery-slider {\r\n                    width: 100%;\r\n                    margin: 0 auto;\r\n                    text-align: center;\r\n                    direction: rtl;\r\n                }\r\n                .skill-slider-main-wrap {\r\n                    position: relative;\r\n                    border-radius: 18px;\r\n                    overflow: hidden;\r\n                    box-shadow: 0 6px 32px 0 rgba(0,0,0,0.13);\r\n                }\r\n                .skill-main-image {\r\n                    width: 100%;\r\n                    aspect-ratio: 16\/9;\r\n                    position: relative;\r\n                    display: flex;\r\n                    align-items: center;\r\n                    justify-content: center;\r\n                    border-radius: 18px;\r\n                    overflow: hidden;\r\n                    height: auto;\r\n                    min-height: unset;\r\n                }\r\n                .skill-main-image img {\r\n                    width: 100%;\r\n                    height: 100%;\r\n                    position: absolute;\r\n                    left: 0; top: 0;\r\n                    transition: opacity 0.4s, transform 0.5s cubic-bezier(.77,0,.18,1);\r\n                    opacity: 0;\r\n                    z-index: 1;\r\n                    transform: scale(0.95);\r\n                }\r\n                .skill-main-image img.active {\r\n                    opacity: 1;\r\n                    z-index: 2;\r\n                    transform: scale(1);\r\n                }\r\n                .skill-main-image img.zoom-out {\r\n                    opacity: 0;\r\n                    transform: scale(0.95);\r\n                }\r\n                .skill-main-image img.zoom-in {\r\n                    opacity: 0;\r\n                    transform: scale(1.08);\r\n                }\r\n                .skill-slider-arrow {\r\n                    \/* Completely remove arrows *\/\r\n                    display: none !important;\r\n                }\r\n                .skill-thumbnails {\r\n                    display: flex;\r\n                    justify-content: center;\r\n                    gap: 16px;\r\n                    margin-top: 18px;\r\n                }\r\n                .skill-thumbnails img {\r\n                    width: 200px;\r\n                    height: 160px;\r\n                    object-fit: cover;\r\n                    border-radius: 10px;\r\n                    cursor: pointer;\r\n                    border: 2px solid transparent;\r\n                    box-shadow: 0 2px 8px rgba(0,0,0,0.07);\r\n                    opacity: 0.7;\r\n                    transition: border 0.2s, opacity 0.2s, filter 0.3s;\r\n                    filter: grayscale(100%);\r\n                }\r\n                .skill-thumbnails img.active,\r\n                .skill-thumbnails img:hover {\r\n                    border: 2px solid #0073aa;\r\n                    opacity: 1;\r\n                    filter: none;\r\n                }\r\n                @media (max-width: 600px) {\r\n                    .skill-image-gallery-slider {\r\n                        max-width: 98vw;\r\n                    }\r\n                    .skill-thumbnails img {\r\n                        width: 60px;\r\n                        height: 44px;\r\n                    }\r\n                }\r\n            <\/style>\r\n            <div class=\"skill-slider-main-wrap\">\r\n                <div class=\"skill-main-image\">\r\n                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/skill.png\" alt=\"\" data-index=\"0\" class=\"active\">\r\n                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/4923437-scaled.jpg\" alt=\"\" data-index=\"1\" class=\"\">\r\n                                    <\/div>\r\n            <\/div>\r\n            <div class=\"skill-thumbnails\">\r\n                                    <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/skill.png\" alt=\"\" data-index=\"0\" class=\"active\">\r\n                                    <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/4923437-scaled.jpg\" alt=\"\" data-index=\"1\" class=\"\">\r\n                            <\/div>\r\n            <script>\r\n                (function(){\r\n                    var slider = document.getElementById('skill_slider_6a9e470ce5ada');\r\n                    var mainImgs = slider.querySelectorAll('.skill-main-image img');\r\n                    var thumbs = slider.querySelectorAll('.skill-thumbnails img');\r\n                    var current = 0;\r\n                    var animating = false;\r\n\r\n                    function showImage(idx) {\r\n                        if(idx === current || animating) return;\r\n                        animating = true;\r\n                        mainImgs[current].classList.remove('active');\r\n                        mainImgs[current].classList.add('zoom-out');\r\n                        mainImgs[idx].classList.add('zoom-in');\r\n                        setTimeout(function(){\r\n                            mainImgs[idx].classList.remove('zoom-in');\r\n                            mainImgs[idx].classList.add('active');\r\n                            thumbs.forEach(function(t, i){\r\n                                if(i === idx) t.classList.add('active');\r\n                                else t.classList.remove('active');\r\n                            });\r\n                            setTimeout(function(){\r\n                                mainImgs[current].classList.remove('zoom-out');\r\n                                animating = false;\r\n                                current = idx;\r\n                            }, 500);\r\n                        }, 20);\r\n                    }\r\n\r\n                    thumbs.forEach(function(thumb, idx){\r\n                        thumb.addEventListener('click', function(){\r\n                            showImage(idx);\r\n                        });\r\n                    });\r\n\r\n                })();\r\n            <\/script>\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-5fd548f e-flex e-con-boxed e-con e-parent\" data-id=\"5fd548f\" 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-bbf70c4 e-con-full e-grid e-con e-child\" data-id=\"bbf70c4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2c76c76 elementor-widget elementor-widget-skill_work_educational_experience_widget\" data-id=\"2c76c76\" 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                                <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\/business-icon-png-1934.png\" alt=\"\u06a9\u0627\u0631\u0641\u0631\u0645\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\" 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                        \u06a9\u0627\u0631\u0641\u0631\u0645\u0627\u06cc \u067e\u0631\u0648\u0698\u0647                    <\/div>\n                    <div class=\"skill-experience-date\">\n                        \u0645\u0647\u0627\u0631\u062a                    <\/div>\n                <\/div>\n            <\/div>\n                        <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\/calendar-icon-png-4114.png\" alt=\"\u062a\u0627\u0631\u06cc\u062e \u0627\u0646\u062c\u0627\u0645 \u067e\u0631\u0648\u0698\u0647\" 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\u0627\u0631\u06cc\u062e \u0627\u0646\u062c\u0627\u0645 \u067e\u0631\u0648\u0698\u0647                    <\/div>\n                    <div class=\"skill-experience-date\">\n                        18 \u062a\u06cc\u0631 1404                    <\/div>\n                <\/div>\n            <\/div>\n                        <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\/location-icon-png-4246.png\" alt=\"\u0645\u062d\u0644 \u067e\u0631\u0648\u0698\u0647\" 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                        \u0645\u062d\u0644 \u067e\u0631\u0648\u0698\u0647                    <\/div>\n                    <div class=\"skill-experience-date\">\n                        \u0634\u0647\u0631\u06a9\u0631\u062f                    <\/div>\n                <\/div>\n            <\/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-da3f0e7 e-con-full e-grid e-con e-child\" data-id=\"da3f0e7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d5c427 elementor-widget elementor-widget-text-editor\" data-id=\"8d5c427\" 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<h2>\u067e\u0631\u0648\u0698\u0647 \u0637\u0631\u0627\u062d\u06cc \u0642\u0627\u0644\u0628 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc \u0628\u0627 \u0648\u0631\u062f\u067e\u0631\u0633<\/h2><p>\u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u060c \u06cc\u06a9 \u0642\u0627\u0644\u0628 \u0641\u0631\u0648\u0634\u06af\u0627\u0647\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0628\u0631\u0646\u062f \u067e\u0648\u0634\u0627\u06a9 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0628\u0627 WooCommerce \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u0632 Elementor Pro \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0635\u0641\u062d\u0627\u062a \u062c\u0630\u0627\u0628 \u0648 ACF \u0628\u0631\u0627\u06cc \u0641\u06cc\u0644\u062f\u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0628\u0627 \u0628\u0647\u06cc\u0646\u0647\u0633\u0627\u0632\u06cc \u0633\u0631\u0639\u062a \u0648 \u0633\u0626\u0648\u060c \u0632\u0645\u0627\u0646 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0633\u0627\u06cc\u062a \u0628\u0647 \u0632\u06cc\u0631 \u06f2 \u062b\u0627\u0646\u06cc\u0647 \u0631\u0633\u06cc\u062f \u0648 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0628\u0647\u0628\u0648\u062f \u06cc\u0627\u0641\u062a. \u0627\u06cc\u0646 \u0642\u0627\u0644\u0628 \u06a9\u0627\u0645\u0644\u0627\u064b \u0648\u0627\u06a9\u0646\u0634\u06af\u0631\u0627 \u0627\u0633\u062a \u0648 \u062f\u0631 \u062a\u0645\u0627\u0645 \u062f\u0633\u062a\u06af\u0627\u0647\u0647\u0627 \u0628\u0647\u062e\u0648\u0628\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u0634\u0648\u062f.<\/p><p>\u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0627\u0645\u0646\u06cc\u062a\u060c \u0627\u0632 \u0641\u0627\u06cc\u0631\u0648\u0627\u0644 \u0648 \u0627\u062d\u0631\u0627\u0632 \u0647\u0648\u06cc\u062a \u062f\u0648 \u0645\u0631\u062d\u0644\u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f \u0648 \u0628\u0627 \u0631\u0641\u0639 \u0622\u0633\u06cc\u0628\u067e\u0630\u06cc\u0631\u06cc\u0647\u0627\u06cc \u0627\u062d\u062a\u0645\u0627\u0644\u06cc\u060c \u0633\u0627\u06cc\u062a \u062f\u0631 \u0628\u0631\u0627\u0628\u0631 \u062d\u0645\u0644\u0627\u062a \u0631\u0627\u06cc\u062c \u0645\u062d\u0627\u0641\u0638\u062a \u06af\u0631\u062f\u06cc\u062f. \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u06a9\u0645\u06a9 \u06a9\u0631\u062f \u062a\u0627 \u0641\u0631\u0648\u0634 \u0622\u0646\u0644\u0627\u06cc\u0646 \u062e\u0648\u062f \u0631\u0627 \u062a\u0627 \u06f4\u06f0\u066a \u0627\u0641\u0632\u0627\u06cc\u0634 \u062f\u0647\u062f \u0648 \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0628\u0633\u06cc\u0627\u0631 \u0645\u062b\u0628\u062a\u06cc \u0627\u0632 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0631\u062f.<\/p><h2>\u062a\u0648\u0633\u0639\u0647 \u0633\u0627\u0645\u0627\u0646\u0647 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0645\u062d\u062a\u0648\u0627\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0628\u0627 PHP<\/h2><p>\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0634\u0627\u0645\u0644 \u0637\u0631\u0627\u062d\u06cc \u0648 \u067e\u06cc\u0627\u062f\u0647\u0633\u0627\u0632\u06cc \u06cc\u06a9 CMS \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 PHP \u0648 MySQL \u0628\u0648\u062f \u06a9\u0647 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u062f\u0627\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u0648\u0628\u0633\u0627\u06cc\u062a \u062e\u0648\u062f \u0631\u0627 \u0628\u062f\u0648\u0646 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u06a9\u0646\u062f. \u0628\u0627 \u0628\u0647\u06a9\u0627\u0631\u06af\u06cc\u0631\u06cc \u0627\u0644\u06af\u0648\u06cc MVC \u0648 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647\u0647\u0627\u06cc \u0645\u062f\u0631\u0646\u060c \u0633\u06cc\u0633\u062a\u0645 \u0627\u0646\u0639\u0637\u0627\u0641\u067e\u0630\u06cc\u0631 \u0648 \u0645\u0642\u06cc\u0627\u0633\u067e\u0630\u06cc\u0631\u06cc \u0627\u06cc\u062c\u0627\u062f \u0634\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u0628\u0627 \u067e\u06cc\u0627\u062f\u0647\u0633\u0627\u0632\u06cc API RESTful\u060c \u0627\u0645\u06a9\u0627\u0646 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0627\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u0647\u0627\u06cc \u0645\u0648\u0628\u0627\u06cc\u0644 \u0641\u0631\u0627\u0647\u0645 \u06af\u0631\u062f\u06cc\u062f.<\/p><p>\u0628\u0631\u0627\u06cc \u062a\u0636\u0645\u06cc\u0646 \u0627\u0645\u0646\u06cc\u062a\u060c \u0627\u0632 \u0631\u0645\u0632\u0646\u06af\u0627\u0631\u06cc \u062f\u0627\u062f\u0647\u0647\u0627\u060c \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062d\u0645\u0644\u0627\u062a XSS \u0648 CSRF \u0648 \u0633\u06cc\u0633\u062a\u0645 \u0644\u0627\u06af\u06cc\u0646\u06af \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f. \u0627\u06cc\u0646 \u0633\u0627\u0645\u0627\u0646\u0647 \u0628\u0647 \u0645\u0634\u062a\u0631\u06cc \u06a9\u0645\u06a9 \u06a9\u0631\u062f \u062a\u0627 \u0641\u0631\u0622\u06cc\u0646\u062f \u0627\u0646\u062a\u0634\u0627\u0631 \u0645\u062d\u062a\u0648\u0627 \u0631\u0627 \u06f5\u06f0\u066a \u0633\u0631\u06cc\u0639\u062a\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u062f \u0648 \u0647\u0632\u06cc\u0646\u0647\u0647\u0627\u06cc \u0646\u06af\u0647\u062f\u0627\u0631\u06cc \u0631\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0647\u062f. \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u06cc\u06a9 \u0631\u0627\u0647\u06a9\u0627\u0631 \u067e\u0627\u06cc\u062f\u0627\u0631 \u0648 \u06a9\u0627\u0631\u0628\u0631\u067e\u0633\u0646\u062f \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0642\u0631\u0627\u0631 \u06af\u0631\u0641\u062a.<\/p>\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8554564 e-flex e-con-boxed e-con e-parent\" data-id=\"8554564\" 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-e335cd6 elementor-widget elementor-widget-skill_project_gallery_Widget\" data-id=\"e335cd6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_project_gallery_Widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-project-gallery-widget\">\r\n                            <h3 class=\"project-gallery-title\">\u06af\u0627\u0644\u0631\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u067e\u0631\u0648\u0698\u0647<\/h3>\r\n                        \r\n            <div class=\"gallery-grid gallery-columns-3\">\r\n                                    <div class=\"gallery-item\" data-full-image=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/7694497-scaled.jpg\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/7694497-300x200.jpg\" alt=\"\">\r\n                    <\/div>\r\n                                    <div class=\"gallery-item\" data-full-image=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/5764971-scaled.jpg\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/5764971-300x144.jpg\" alt=\"\">\r\n                    <\/div>\r\n                                    <div class=\"gallery-item\" data-full-image=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/7587686-scaled.jpg\">\r\n                        <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/7587686-300x200.jpg\" alt=\"\">\r\n                    <\/div>\r\n                            <\/div>\r\n        <\/div>\r\n\r\n        <style>\r\n        .skill-project-gallery-widget {\r\n            margin: 2rem 0;\r\n        }\r\n        \r\n        .project-gallery-title {\r\n            margin-bottom: 1.5rem;\r\n            font-size: 1.5rem;\r\n            font-weight: 600;\r\n            color: #333;\r\n        }\r\n        \r\n        .gallery-grid {\r\n            display: grid;\r\n            gap: 1rem;\r\n        }\r\n        \r\n        .gallery-columns-1 { grid-template-columns: 1fr; }\r\n        .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }\r\n        .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }\r\n        .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }\r\n        \r\n        .gallery-item {\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-radius: 10px;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            transition: all 0.3s ease;\r\n            cursor: pointer;\r\n        }\r\n        \r\n        .gallery-item:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n        \r\n        .gallery-item img {\r\n            width: 100%;\r\n            height: 200px;\r\n            object-fit: cover;\r\n            display: block;\r\n            transition: transform 0.3s ease;\r\n        }\r\n        \r\n        .gallery-item:hover img {\r\n            transform: scale(1.05);\r\n        }\r\n        \r\n        \/* Apply same styles to regular project galleries *\/\r\n        .project-gallery .gallery-item {\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-radius: 10px;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n            transition: all 0.3s ease;\r\n            cursor: pointer;\r\n        }\r\n        \r\n        .project-gallery .gallery-item:hover {\r\n            transform: translateY(-5px);\r\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n        \r\n        .project-gallery .gallery-item img {\r\n            width: 100%;\r\n            height: 200px;\r\n            object-fit: cover;\r\n            display: block;\r\n            transition: transform 0.3s ease;\r\n        }\r\n        \r\n        .project-gallery .gallery-item:hover img {\r\n            transform: scale(1.05);\r\n        }\r\n        \r\n        \/* Gallery Modal Styles *\/\r\n        .skill-gallery-modal {\r\n            display: none;\r\n            position: fixed;\r\n            z-index: 9999;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%;\r\n            background-color: rgba(0, 0, 0, 0.95);\r\n            backdrop-filter: blur(10px);\r\n        }\r\n        \r\n        .skill-gallery-modal.active {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n        \r\n        .skill-gallery-content {\r\n            position: relative;\r\n            max-width: 90%;\r\n            max-height: 90%;\r\n            text-align: center;\r\n        }\r\n        \r\n        .skill-gallery-content img {\r\n            max-width: 100%;\r\n            max-height: 80vh;\r\n            object-fit: contain;\r\n            border-radius: 10px;\r\n            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\r\n        }\r\n        \r\n        .skill-gallery-close {\r\n            position: absolute;\r\n            top: -50px;\r\n            right: 0;\r\n            color: #fff;\r\n            font-size: 40px;\r\n            font-weight: bold;\r\n            cursor: pointer;\r\n            z-index: 10000;\r\n            background: rgba(0, 0, 0, 0.5);\r\n            width: 50px;\r\n            height: 50px;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .skill-gallery-close:hover {\r\n            background: rgba(255, 255, 255, 0.2);\r\n            transform: scale(1.1);\r\n        }\r\n        \r\n        .skill-gallery-nav {\r\n            position: absolute;\r\n            top: 50%;\r\n            transform: translateY(-50%);\r\n            background: rgba(255, 255, 255, 0.2);\r\n            color: #fff;\r\n            border: none;\r\n            padding: 15px 20px;\r\n            cursor: pointer;\r\n            border-radius: 50%;\r\n            font-size: 24px;\r\n            transition: all 0.3s ease;\r\n            backdrop-filter: blur(10px);\r\n        }\r\n        \r\n        .skill-gallery-nav:hover {\r\n            background: rgba(255, 255, 255, 0.3);\r\n            transform: scale(1.1);\r\n        }\r\n        \r\n        .skill-gallery-prev {\r\n            left: 20px;\r\n        }\r\n        \r\n        .skill-gallery-next {\r\n            right: 20px;\r\n        }\r\n        \r\n        .skill-gallery-counter {\r\n            position: absolute;\r\n            bottom: -40px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            color: #fff;\r\n            font-size: 16px;\r\n            background: rgba(0, 0, 0, 0.5);\r\n            padding: 10px 20px;\r\n            border-radius: 20px;\r\n            backdrop-filter: blur(10px);\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .gallery-columns-2,\r\n            .gallery-columns-3,\r\n            .gallery-columns-4 {\r\n                grid-template-columns: repeat(2, 1fr);\r\n            }\r\n            \r\n            .skill-gallery-nav {\r\n                padding: 10px 15px;\r\n                font-size: 18px;\r\n            }\r\n            \r\n            .skill-gallery-prev {\r\n                left: 10px;\r\n            }\r\n            \r\n            .skill-gallery-next {\r\n                right: 10px;\r\n            }\r\n        }\r\n        \r\n        @media (max-width: 480px) {\r\n            .gallery-columns-2,\r\n            .gallery-columns-3,\r\n            .gallery-columns-4 {\r\n                grid-template-columns: 1fr;\r\n            }\r\n        }\r\n        <\/style>\r\n        \r\n        <script>\r\n        (function() {\r\n            \/\/ Create modal only once\r\n            if (document.querySelector('.skill-gallery-modal')) {\r\n                return;\r\n            }\r\n            \r\n            \/\/ Create modal elements\r\n            var modal = document.createElement('div');\r\n            modal.className = 'skill-gallery-modal';\r\n            modal.innerHTML = `\r\n                <div class=\"skill-gallery-content\">\r\n                    <span class=\"skill-gallery-close\">&times;<\/span>\r\n                    <img decoding=\"async\" src=\"\" alt=\"\">\r\n                    <button class=\"skill-gallery-nav skill-gallery-next\">\u2039<\/button>\r\n                    <button class=\"skill-gallery-nav skill-gallery-prev\">\u203a<\/button>\r\n                    <div class=\"skill-gallery-counter\"><\/div>\r\n                <\/div>\r\n            `;\r\n            document.body.appendChild(modal);\r\n            \r\n            var currentIndex = 0;\r\n            var galleryImages = [];\r\n            \r\n            \/\/ Initialize gallery\r\n            function initGallery() {\r\n                \/\/ Select all gallery items from both Elementor widget and regular project galleries\r\n                var galleryItems = document.querySelectorAll('.skill-project-gallery-widget .gallery-item, .project-gallery .gallery-item');\r\n                galleryImages = [];\r\n                \r\n                galleryItems.forEach(function(item, index) {\r\n                    var img = item.querySelector('img');\r\n                    if (img) {\r\n                        \/\/ Get full size image URL from data attribute or link href\r\n                        var fullSizeUrl = item.getAttribute('data-full-image');\r\n                        \r\n                        \/\/ If no data attribute, try to get from link href\r\n                        if (!fullSizeUrl) {\r\n                            var link = item.querySelector('a');\r\n                            if (link) {\r\n                                fullSizeUrl = link.getAttribute('href');\r\n                            }\r\n                        }\r\n                        \r\n                        \/\/ Fallback to image src if no full size URL found\r\n                        if (!fullSizeUrl) {\r\n                            fullSizeUrl = img.src;\r\n                        }\r\n                        \r\n                        galleryImages.push({\r\n                            src: fullSizeUrl,\r\n                            alt: img.alt\r\n                        });\r\n                        \r\n                        \/\/ Add click event\r\n                        item.addEventListener('click', function(e) {\r\n                            e.preventDefault();\r\n                            openGallery(index);\r\n                        });\r\n                    }\r\n                });\r\n            }\r\n            \r\n            \/\/ Open gallery\r\n            function openGallery(index) {\r\n                currentIndex = index;\r\n                updateGalleryImage();\r\n                modal.classList.add('active');\r\n                document.body.style.overflow = 'hidden';\r\n            }\r\n            \r\n            \/\/ Update gallery image\r\n            function updateGalleryImage() {\r\n                if (galleryImages[currentIndex]) {\r\n                    var img = modal.querySelector('img');\r\n                    var counter = modal.querySelector('.skill-gallery-counter');\r\n                    \r\n                    img.src = galleryImages[currentIndex].src;\r\n                    img.alt = galleryImages[currentIndex].alt;\r\n                    counter.textContent = (currentIndex + 1) + ' \/ ' + galleryImages.length;\r\n                }\r\n            }\r\n            \r\n            \/\/ Navigation\r\n            function nextImage() {\r\n                currentIndex = (currentIndex + 1) % galleryImages.length;\r\n                updateGalleryImage();\r\n            }\r\n            \r\n            function prevImage() {\r\n                currentIndex = (currentIndex - 1 + galleryImages.length) % galleryImages.length;\r\n                updateGalleryImage();\r\n            }\r\n            \r\n            \/\/ Close gallery\r\n            function closeGallery() {\r\n                modal.classList.remove('active');\r\n                document.body.style.overflow = 'auto';\r\n            }\r\n            \r\n            \/\/ Event listeners\r\n            modal.querySelector('.skill-gallery-close').addEventListener('click', closeGallery);\r\n            modal.querySelector('.skill-gallery-next').addEventListener('click', nextImage);\r\n            modal.querySelector('.skill-gallery-prev').addEventListener('click', prevImage);\r\n            \r\n            \/\/ Close on background click\r\n            modal.addEventListener('click', function(e) {\r\n                if (e.target === modal) {\r\n                    closeGallery();\r\n                }\r\n            });\r\n            \r\n            \/\/ Keyboard navigation\r\n            document.addEventListener('keydown', function(e) {\r\n                if (modal.classList.contains('active')) {\r\n                    if (e.key === 'Escape') {\r\n                        closeGallery();\r\n                    } else if (e.key === 'ArrowRight') {\r\n                        nextImage();\r\n                    } else if (e.key === 'ArrowLeft') {\r\n                        prevImage();\r\n                    }\r\n                }\r\n            });\r\n            \r\n            \/\/ Initialize on DOM ready\r\n            if (document.readyState === 'loading') {\r\n                document.addEventListener('DOMContentLoaded', initGallery);\r\n            } else {\r\n                initGallery();\r\n            }\r\n            \r\n            \/\/ Initialize for Elementor frontend\r\n            if (window.elementorFrontend) {\r\n                window.elementorFrontend.hooks.addAction('frontend\/element_ready\/widget', function($scope) {\r\n                    if ($scope.find('.skill-project-gallery-widget').length) {\r\n                        setTimeout(initGallery, 100);\r\n                    }\r\n                });\r\n            }\r\n        })();\r\n        <\/script>\r\n        \r\n\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-577a535 elementor-widget elementor-widget-skill_project_info_Widget\" data-id=\"577a535\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_project_info_Widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-project-info-widget\">\r\n            <div class=\"project-info-container\">\r\n                                    <h3 class=\"project-info-title\">\u0627\u0637\u0644\u0627\u0639\u0627\u062a \u067e\u0631\u0648\u0698\u0647<\/h3>\r\n                                \r\n                <div class=\"project-info-grid\">\r\n                                            <div class=\"info-item\">\r\n                            <span class=\"info-label\">\u0645\u0634\u062a\u0631\u06cc:<\/span>\r\n                            <span class=\"info-value\">\u0645\u062d\u0635\u0648\u0644 \u0648\u0631\u062f\u067e\u0631\u0633\u06cc<\/span>\r\n                        <\/div>\r\n                                        \r\n                                        \r\n                                            <div class=\"info-item\">\r\n                            <span class=\"info-label\">\u062f\u0648\u0631\u0647 \u0632\u0645\u0627\u0646\u06cc:<\/span>\r\n                            <span class=\"info-value\">\r\n                                1400 - 1400                            <\/span>\r\n                        <\/div>\r\n                                        \r\n                                            <div class=\"info-item\">\r\n                            <span class=\"info-label\">\u0645\u062f\u062a \u0632\u0645\u0627\u0646:<\/span>\r\n                            <span class=\"info-value\">2 \u0645\u0627\u0647<\/span>\r\n                        <\/div>\r\n                                        \r\n                                            <div class=\"info-item\">\r\n                            <span class=\"info-label\">\u0628\u0648\u062f\u062c\u0647:<\/span>\r\n                            <span class=\"info-value\">1.000.000 \u062a\u0648\u0645\u0627\u0646<\/span>\r\n                        <\/div>\r\n                                        \r\n                                            <div class=\"info-item\">\r\n                            <span class=\"info-label\">\u0645\u0642\u06cc\u0627\u0633:<\/span>\r\n                            <span class=\"info-value\">\u0628\u0632\u0631\u06af<\/span>\r\n                        <\/div>\r\n                                        \r\n                                            <div class=\"info-item\">\r\n                            <span class=\"info-label\">\u0622\u062f\u0631\u0633:<\/span>\r\n                            <span class=\"info-value\">https:\/\/www.zhaket.com\/store\/web\/websavant\/products<\/span>\r\n                        <\/div>\r\n                                    <\/div>\r\n                \r\n                                    <div class=\"technologies-section\">\r\n                        <h4>\u062a\u06a9\u0646\u0648\u0644\u0648\u0698\u06cc \u0647\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0634\u062f\u0647<\/h4>\r\n                        <div class=\"technologies-list\">\r\n                                                            <span class=\"tech-tag\">html<\/span>\r\n                                                            <span class=\"tech-tag\">css<\/span>\r\n                                                            <span class=\"tech-tag\">js<\/span>\r\n                                                            <span class=\"tech-tag\">bootstrap<\/span>\r\n                                                            <span class=\"tech-tag\">php<\/span>\r\n                                                            <span class=\"tech-tag\">wordpress<\/span>\r\n                                                    <\/div>\r\n                    <\/div>\r\n                            <\/div>\r\n        <\/div>\r\n\r\n        <style>\r\n        .skill-project-info-widget {\r\n            margin: 2rem 0;\r\n        }\r\n        \r\n        .project-info-container {\r\n            background: #f8f9fa;\r\n            padding: 2rem;\r\n            border-radius: 15px;\r\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n        }\r\n        \r\n        .project-info-title {\r\n            margin-bottom: 1.5rem;\r\n            font-size: 1.5rem;\r\n            font-weight: 600;\r\n            color: #333;\r\n            border-bottom: 2px solid #007cba;\r\n            padding-bottom: 0.5rem;\r\n        }\r\n        \r\n        .project-info-grid {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 1rem;\r\n            margin-bottom: 2rem;\r\n        }\r\n\r\n        .project-info-grid .info-item {\r\n            flex: 1 1 250px;\r\n        }\r\n        \r\n        .info-item {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: flex-start;\r\n            padding: 1rem;\r\n            background: white;\r\n            border-radius: 8px;\r\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        \/* Prevent long text\/URLs from overflowing *\/\r\n        .info-item .info-label,\r\n        .info-item .info-value {\r\n            min-width: 0;\r\n            overflow-wrap: anywhere;\r\n            word-break: break-word;\r\n            white-space: normal;\r\n            max-width: 100%;\r\n        }\r\n\r\n        .info-item .info-label {\r\n            flex: 0 0 auto;\r\n            margin-left: 8px;\r\n        }\r\n\r\n        .info-item .info-value {\r\n            flex: 1 1 auto;\r\n            text-align: left;\r\n        }\r\n\r\n        .info-item:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n        }\r\n        \r\n        .info-label {\r\n            font-weight: 600;\r\n            color: #666;\r\n            font-size: 0.9rem;\r\n        }\r\n        \r\n        .info-value {\r\n            font-weight: 500;\r\n            color: #333;\r\n            text-align: left;\r\n        }\r\n        \r\n        .status-completed {\r\n            color: #28a745;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .status-in_progress {\r\n            color: #ffc107;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .status-on_hold {\r\n            color: #fd7e14;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .status-cancelled {\r\n            color: #dc3545;\r\n            font-weight: 600;\r\n        }\r\n        \r\n        .technologies-section {\r\n            margin-top: 2rem;\r\n            padding-top: 1.5rem;\r\n            border-top: 1px solid #dee2e6;\r\n        }\r\n        \r\n        .technologies-section h4 {\r\n            margin-bottom: 1rem;\r\n            color: #333;\r\n            font-size: 1.1rem;\r\n        }\r\n        \r\n        .technologies-list {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 0.5rem;\r\n        }\r\n        \r\n        .tech-tag {\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n            color: white;\r\n            padding: 0.5rem 1rem;\r\n            border-radius: 20px;\r\n            font-size: 0.85rem;\r\n            font-weight: 500;\r\n            transition: all 0.3s ease;\r\n        }\r\n        \r\n        .tech-tag:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .project-info-grid {\r\n                display: flex;\r\n            }\r\n            .project-info-grid .info-item {\r\n                flex: 1 1 100%;\r\n            }\r\n            \r\n            .info-item {\r\n                flex-direction: column;\r\n                align-items: flex-start;\r\n                gap: 0.5rem;\r\n            }\r\n            \r\n            .project-info-container {\r\n                padding: 1.5rem;\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 class=\"elementor-element elementor-element-0a1616d elementor-widget elementor-widget-skill_project_timeline_Widget\" data-id=\"0a1616d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_project_timeline_Widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-project-timeline-widget\">\r\n            <div class=\"timeline-container timeline-vertical\">\r\n                                    <h3 class=\"timeline-title\">\u0645\u0631\u0627\u062d\u0644 \u067e\u0631\u0648\u0698\u0647<\/h3>\r\n                                \r\n                                    <p class=\"timeline-description\">\u0645\u0631\u0627\u062d\u0644 \u0645\u062e\u062a\u0644\u0641 \u0627\u0646\u062c\u0627\u0645 \u067e\u0631\u0648\u0698\u0647 \u0627\u0632 \u0634\u0631\u0648\u0639 \u062a\u0627 \u067e\u0627\u06cc\u0627\u0646<\/p>\r\n                                \r\n                <div class=\"timeline-events\">\r\n                                            <div class=\"timeline-row\">\r\n                                                            <div class=\"timeline-card side-left\">\r\n                                    <div class=\"card-head\">\r\n                                        <div class=\"window-dots\"><span><\/span><span><\/span><span><\/span><\/div>\r\n                                    <\/div>\r\n                                    <div class=\"card-body\">\r\n                                        <h4 class=\"card-title\">\u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0698\u0647<\/h4>\r\n                                                                                    <div class=\"card-date\">10 \u0645\u0631\u062f\u0627\u062f 1404<\/div>\r\n                                                                                                                            <p class=\"card-text\">\u0627\u0633\u062a\u0627\u0631\u062a \u067e\u0631\u0648\u0698\u0647 \u0632\u062f\u0647 \u0634\u062f<\/p>\r\n                                                                            <\/div>\r\n                                <\/div>\r\n                                <div class=\"timeline-dot\"><\/div>\r\n                                <div class=\"timeline-spacer\"><\/div>\r\n                                                    <\/div>\r\n                                            <div class=\"timeline-row\">\r\n                                                            <div class=\"timeline-spacer\"><\/div>\r\n                                <div class=\"timeline-dot\"><\/div>\r\n                                <div class=\"timeline-card side-right\">\r\n                                    <div class=\"card-head\">\r\n                                        <div class=\"window-dots\"><span><\/span><span><\/span><span><\/span><\/div>\r\n                                    <\/div>\r\n                                    <div class=\"card-body\">\r\n                                        <h4 class=\"card-title\">\u0637\u0631\u0627\u062d\u06cc \u0627\u0648\u0644\u06cc\u0647 \u067e\u0631\u0648\u0698\u0647<\/h4>\r\n                                                                                    <div class=\"card-date\">11 \u0645\u0631\u062f\u0627\u062f 1404<\/div>\r\n                                                                                                                            <p class=\"card-text\">\u0637\u0631\u0627\u062d\u06cc \u0627\u0648\u0644\u06cc\u0647 \u067e\u0631\u0648\u0698\u0647 \u0632\u062f\u0647 \u0634\u062f<\/p>\r\n                                                                            <\/div>\r\n                                <\/div>\r\n                                                    <\/div>\r\n                                            <div class=\"timeline-row\">\r\n                                                            <div class=\"timeline-card side-left\">\r\n                                    <div class=\"card-head\">\r\n                                        <div class=\"window-dots\"><span><\/span><span><\/span><span><\/span><\/div>\r\n                                    <\/div>\r\n                                    <div class=\"card-body\">\r\n                                        <h4 class=\"card-title\">\u0634\u0631\u0648\u0639 \u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647<\/h4>\r\n                                                                                    <div class=\"card-date\">12 \u0645\u0631\u062f\u0627\u062f 1404<\/div>\r\n                                                                                                                            <p class=\"card-text\">\u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647 \u0634\u0631\u0648\u0639 \u0634\u062f\u0647 \u0648 \u062f\u0631\u062d\u0627\u0644 \u062a\u0648\u0633\u0639\u0647 \u0647\u0633\u062a\u06cc\u0645<\/p>\r\n                                                                            <\/div>\r\n                                <\/div>\r\n                                <div class=\"timeline-dot\"><\/div>\r\n                                <div class=\"timeline-spacer\"><\/div>\r\n                                                    <\/div>\r\n                                            <div class=\"timeline-row\">\r\n                                                            <div class=\"timeline-spacer\"><\/div>\r\n                                <div class=\"timeline-dot\"><\/div>\r\n                                <div class=\"timeline-card side-right\">\r\n                                    <div class=\"card-head\">\r\n                                        <div class=\"window-dots\"><span><\/span><span><\/span><span><\/span><\/div>\r\n                                    <\/div>\r\n                                    <div class=\"card-body\">\r\n                                        <h4 class=\"card-title\">\u062a\u0633\u062a \u0648 \u062a\u062d\u0648\u06cc\u0644 \u067e\u0631\u0648\u0698\u0647<\/h4>\r\n                                                                                    <div class=\"card-date\">13 \u0645\u0631\u062f\u0627\u062f 1404<\/div>\r\n                                                                                                                            <p class=\"card-text\">\u067e\u0631\u0648\u0698\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u06a9\u0627\u0645\u0644 \u062a\u0633\u062a \u0648 \u062a\u062d\u0648\u06cc\u0644 \u06a9\u0627\u0631\u0641\u0631\u0645\u0627 \u062f\u0627\u062f\u0647 \u0634\u062f<\/p>\r\n                                                                            <\/div>\r\n                                <\/div>\r\n                                                    <\/div>\r\n                                    <\/div>\r\n                \r\n                <div class=\"timeline-line\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <style>\r\n        .skill-project-timeline-widget {\r\n            margin: 4rem 0;\r\n        }\r\n        \r\n        .timeline-container {\r\n            position: relative;\r\n            padding: 3rem 0;\r\n            max-width: 100%;\r\n            background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\r\n            border-radius: 20px;\r\n            margin: 2rem 0;\r\n        }\r\n        \r\n        .timeline-title {\r\n            margin-bottom: 3rem;\r\n            font-size: 2.5rem;\r\n            font-weight: 700;\r\n            color: #1e293b;\r\n            text-align: center;\r\n            position: relative;\r\n            letter-spacing: -0.02em;\r\n        }\r\n        \r\n        .timeline-description {\r\n            margin-bottom: 4rem;\r\n            color: #64748b;\r\n            text-align: center;\r\n            font-size: 1.1rem;\r\n            line-height: 1.6;\r\n            max-width: 600px;\r\n            margin-left: auto;\r\n            margin-right: auto;\r\n            font-weight: 400;\r\n        }\r\n        \r\n        \/* Vertical centered line with alternating cards (exactly like the image) *\/\r\n        .timeline-events {\r\n            position: relative;\r\n            padding: 1rem 0 2rem;\r\n        }\r\n        .timeline-events::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            bottom: 0;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 4px;\r\n            border-radius: 2px;\r\n            background: linear-gradient(\r\n                to bottom,\r\n                rgba(255,255,255,0.95) 0%,\r\n                rgba(255,255,255,0.95) 60%,\r\n                rgba(255,255,255,0.4) 60%,\r\n                rgba(255,255,255,0.4) 100%\r\n            );\r\n        }\r\n        .timeline-row {\r\n            position: relative;\r\n            display: grid;\r\n            grid-template-columns: 1fr 1fr;\r\n            gap: 6rem;\r\n            align-items: center;\r\n            margin: 2.5rem 0;\r\n        }\r\n        .timeline-dot {\r\n            position: absolute;\r\n            left: 50%;\r\n            top: 50%;\r\n            transform: translate(-50%, -50%);\r\n            width: 14px;\r\n            height: 14px;\r\n            background: #22d3ee;\r\n            border: 4px solid #ffffff;\r\n            border-radius: 999px;\r\n            box-shadow: 0 0 0 4px rgba(255,255,255,0.25), 0 6px 14px rgba(0,0,0,0.15);\r\n            z-index: 2;\r\n        }\r\n        .timeline-card {\r\n            background: #ffffff;\r\n            border-radius: 14px;\r\n            box-shadow: 0 10px 25px rgba(2, 6, 23, 0.12);\r\n            width: 100%;\r\n            max-width: 420px;\r\n            overflow: hidden;\r\n            border: 1px solid rgba(255,255,255,0.6);\r\n        }\r\n        .timeline-card.side-left { justify-self: end; }\r\n        .timeline-card.side-right { justify-self: start; }\r\n        .card-head {\r\n            height: 38px;\r\n            background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);\r\n            display: flex;\r\n            align-items: center;\r\n            padding: 0 12px;\r\n        }\r\n        .window-dots { display: flex; gap: 6px; }\r\n        .window-dots span {\r\n            width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.9);\r\n        }\r\n        .card-body { padding: 16px 18px 18px; }\r\n        .card-title { font-size: 1.05rem; font-weight: 700; color: #1f2937; margin: 0 0 6px; }\r\n        .card-date { font-size: 0.85rem; color: #64748b; margin-bottom: 10px; }\r\n        .card-text { font-size: 0.95rem; color: #475569; line-height: 1.65; margin: 0; }\r\n        \r\n        \/* Responsive *\/\r\n        @media (max-width: 992px) {\r\n            .timeline-row { gap: 3rem; }\r\n        }\r\n        @media (max-width: 768px) {\r\n            .timeline-row { grid-template-columns: 1fr; }\r\n            .timeline-card.side-left,\r\n            .timeline-card.side-right { justify-self: stretch; }\r\n        }\r\n        @media (max-width: 480px) {\r\n            .card-head { height: 34px; }\r\n            .card-title { font-size: 1rem; }\r\n        }\r\n        <\/style>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56f15b6 elementor-widget elementor-widget-skill_project_team_Widget\" data-id=\"56f15b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_project_team_Widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-project-team-widget\">\n            <div class=\"team-container\">\n                                    <h3 class=\"team-title\">\u0627\u0639\u0636\u0627\u06cc \u062a\u06cc\u0645<\/h3>\n                                \n                <div class=\"team-members team-columns-3\">\n                                            <div class=\"team-member-card\">\n                            <div class=\"member-avatar\">\n                                <div class=\"avatar-placeholder\">\n                                    <i class=\"fas fa-user\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"member-info\">\n                                <h4 class=\"member-name\">\u0645\u062d\u0645\u062f \u062d\u06cc\u062f\u0631\u06cc<\/h4>\n                                <p class=\"member-role\">\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0631\u062f\u067e\u0631\u0633<\/p>\n                                \n                                                                    <div class=\"social-links\">\n                                                                                    <a href=\"https:\/\/www.linkedin.com\/\" target=\"_blank\" class=\"social-link linkedin\" title=\"\u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646\">\n                                                <i class=\"fab fa-linkedin\"><\/i>\n                                            <\/a>\n                                                                                                                                                   <a href=\"https:\/\/www.instagram.com\/\" target=\"_blank\" class=\"social-link instagram\" title=\"\u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645\">\n                                         <i class=\"fab fa-instagram\"><\/i>\n                                     <\/a>\n                                                                                                                                            <a href=\"https:\/\/telegram.org\/\" target=\"_blank\" class=\"social-link telegram\" title=\"\u062a\u0644\u06af\u0631\u0627\u0645\">\n                                         <i class=\"fab fa-telegram-plane\"><\/i>\n                                     <\/a>\n                                                                                                                     <a href=\"mailto:admin@gmail.com\" class=\"social-link email\" title=\"\u0627\u06cc\u0645\u06cc\u0644\">\n                                                <i class=\"fas fa-envelope\"><\/i>\n                                            <\/a>\n                                                                            <\/div>\n                                                            <\/div>\n                        <\/div>\n                                            <div class=\"team-member-card\">\n                            <div class=\"member-avatar\">\n                                <div class=\"avatar-placeholder\">\n                                    <i class=\"fas fa-user\"><\/i>\n                                <\/div>\n                            <\/div>\n                            <div class=\"member-info\">\n                                <h4 class=\"member-name\">\u0645\u062d\u0645\u062f \u062d\u06cc\u062f\u0631\u06cc<\/h4>\n                                <p class=\"member-role\">\u062a\u0648\u0644\u06cc\u062f \u0645\u062d\u062a\u0648\u0627<\/p>\n                                \n                                                                    <div class=\"social-links\">\n                                                                                    <a href=\"https:\/\/www.linkedin.com\/\" target=\"_blank\" class=\"social-link linkedin\" title=\"\u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646\">\n                                                <i class=\"fab fa-linkedin\"><\/i>\n                                            <\/a>\n                                                                                                                                                   <a href=\"https:\/\/www.instagram.com\/\" target=\"_blank\" class=\"social-link instagram\" title=\"\u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645\">\n                                         <i class=\"fab fa-instagram\"><\/i>\n                                     <\/a>\n                                                                                                                                            <a href=\"https:\/\/telegram.org\/\" target=\"_blank\" class=\"social-link telegram\" title=\"\u062a\u0644\u06af\u0631\u0627\u0645\">\n                                         <i class=\"fab fa-telegram-plane\"><\/i>\n                                     <\/a>\n                                                                                                                     <a href=\"mailto:admin@gmail.com\" class=\"social-link email\" title=\"\u0627\u06cc\u0645\u06cc\u0644\">\n                                                <i class=\"fas fa-envelope\"><\/i>\n                                            <\/a>\n                                                                            <\/div>\n                                                            <\/div>\n                        <\/div>\n                                    <\/div>\n            <\/div>\n        <\/div>\n\n        <style>\n        .skill-project-team-widget {\n            margin: 2rem 0;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            padding: 3rem 2rem;\n            border-radius: 20px;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .skill-project-team-widget::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"rgba(255,255,255,0.1)\" stroke-width=\"0.5\"\/><\/pattern><\/defs><rect width=\"100\" height=\"100\" fill=\"url(%23grid)\"\/><\/svg>');\n            opacity: 0.3;\n        }\n        \n        .team-container {\n            position: relative;\n            z-index: 2;\n        }\n        \n        .team-title {\n            margin-bottom: 3rem;\n            font-size: 2.5rem;\n            font-weight: 700;\n            color: #ffffff;\n            text-align: center;\n            text-shadow: 0 2px 4px rgba(0,0,0,0.3);\n        }\n        \n        .team-members {\n            display: grid;\n            gap: 2rem;\n            justify-items: center;\n        }\n        \n        .team-columns-3 { grid-template-columns: repeat(3, 1fr); }\n        .team-columns-4 { grid-template-columns: repeat(4, 1fr); }\n        .team-columns-5 { grid-template-columns: repeat(5, 1fr); }\n        \n        .team-member-card {\n            background: #ffffff;\n            border-radius: 20px;\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n            overflow: hidden;\n            width: 100%;\n            max-width: 280px;\n            position: relative;\n        }\n        \n        .team-member-card:hover {\n            transform: translateY(-10px) scale(1.05);\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n        }\n        \n        .member-avatar {\n            position: relative;\n            height: 200px;\n            background: linear-gradient(45deg, #f0f0f0, #e0e0e0);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            overflow: hidden;\n        }\n        \n        .avatar-placeholder {\n            width: 80px;\n            height: 80px;\n            background: linear-gradient(135deg, #667eea, #764ba2);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n        }\n        \n        .avatar-placeholder i {\n            font-size: 2.5rem;\n            color: #ffffff;\n        }\n        \n        .member-info {\n            padding: 1.5rem;\n            text-align: center;\n        }\n        \n        .member-name {\n            font-size: 1.3rem;\n            font-weight: 700;\n            color: #333333;\n            margin-bottom: 0.5rem;\n            line-height: 1.2;\n        }\n        \n        .member-role {\n            font-size: 1rem;\n            color: #666666;\n            margin-bottom: 1.5rem;\n            font-weight: 500;\n            line-height: 1.4;\n        }\n        \n        .social-links {\n            display: flex;\n            justify-content: center;\n            gap: 0.8rem;\n            flex-wrap: wrap;\n        }\n        \n        .social-link {\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            background: #f8f9fa;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: #666666;\n            text-decoration: none;\n            transition: all 0.3s ease;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .social-link::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.3), transparent);\n            transition: left 0.5s ease;\n        }\n        \n        .social-link:hover::before {\n            left: 100%;\n        }\n        \n        .social-link:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 5px 15px rgba(0,0,0,0.2);\n        }\n        \n        .social-link.linkedin:hover {\n            background: #0077b5;\n            color: #ffffff;\n        }\n        \n        .social-link.instagram:hover {\n            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);\n            color: #ffffff;\n        }\n        \n        .social-link.telegram:hover {\n            background: #0088cc;\n            color: #ffffff;\n        }\n        \n        .social-link.whatsapp:hover {\n            background: #25d366;\n            color: #ffffff;\n        }\n        \n        .social-link.email:hover {\n            background: #ea4335;\n            color: #ffffff;\n        }\n        \n        .social-link i {\n            font-size: 1.2rem;\n            z-index: 1;\n            position: relative;\n        }\n        \n        @media (max-width: 1200px) {\n            .team-columns-5 { grid-template-columns: repeat(4, 1fr); }\n        }\n        \n        @media (max-width: 992px) {\n            .team-columns-4,\n            .team-columns-5 { grid-template-columns: repeat(3, 1fr); }\n        }\n        \n        @media (max-width: 768px) {\n            .team-columns-3,\n            .team-columns-4,\n            .team-columns-5 { grid-template-columns: repeat(2, 1fr); }\n            \n            .team-title {\n                font-size: 2rem;\n            }\n            \n            .skill-project-team-widget {\n                padding: 2rem 1rem;\n            }\n        }\n        \n        @media (max-width: 480px) {\n            .team-columns-2,\n            .team-columns-3,\n            .team-columns-4,\n            .team-columns-5 { grid-template-columns: 1fr; }\n            \n            .team-title {\n                font-size: 1.8rem;\n            }\n        }\n        <\/style>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a53b383 elementor-widget elementor-widget-skill_project_links_Widget\" data-id=\"a53b383\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_project_links_Widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-project-links-widget\">\r\n            <div class=\"links-container links-buttons\">\r\n                                    <h3 class=\"links-title\">\u0644\u06cc\u0646\u06a9 \u0647\u0627 \u0648 \u0645\u0646\u0627\u0628\u0639<\/h3>\r\n                                \r\n                <div class=\"links-grid links-columns-\">\r\n                                            <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\" class=\"project-link live-link\" target=\"_blank\">\r\n                            <i class=\"fas fa-external-link-alt\"><\/i>\r\n                            <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u067e\u0631\u0648\u0698\u0647 \u0632\u0646\u062f\u0647<\/span>\r\n                        <\/a>\r\n                                        \r\n                                            <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\" class=\"project-link github-link\" target=\"_blank\">\r\n                            <i class=\"fab fa-github\"><\/i>\r\n                            <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u062f \u062f\u0631 GitHub<\/span>\r\n                        <\/a>\r\n                                        \r\n                                            <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\" class=\"project-link demo-link\" target=\"_blank\">\r\n                            <i class=\"fas fa-play\"><\/i>\r\n                            <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u062f\u0645\u0648<\/span>\r\n                        <\/a>\r\n                                        \r\n                                            <a href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/\" class=\"project-link docs-link\" target=\"_blank\">\r\n                            <i class=\"fas fa-book\"><\/i>\r\n                            <span>\u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0633\u062a\u0646\u062f\u0627\u062a<\/span>\r\n                        <\/a>\r\n                                    <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <style>\r\n        .skill-project-links-widget {\r\n            margin: 2rem 0;\r\n        }\r\n        \r\n        .links-container {\r\n            padding: 2rem 0;\r\n        }\r\n        \r\n        .links-title {\r\n            margin-bottom: 2rem;\r\n            font-size: 1.5rem;\r\n            font-weight: 600;\r\n            color: #333;\r\n            text-align: center;\r\n        }\r\n        \r\n        \/* Grid Layout *\/\r\n        .links-grid .links-grid {\r\n            display: grid;\r\n            gap: 1rem;\r\n        }\r\n        \r\n        .links-columns-1 { grid-template-columns: 1fr; }\r\n        .links-columns-2 { grid-template-columns: repeat(2, 1fr); }\r\n        .links-columns-3 { grid-template-columns: repeat(3, 1fr); }\r\n        .links-columns-4 { grid-template-columns: repeat(4, 1fr); }\r\n        \r\n        \/* List Layout *\/\r\n        .links-list .links-grid {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 1rem;\r\n        }\r\n        \r\n        \/* Buttons Layout *\/\r\n        .links-buttons .links-grid {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 1rem;\r\n            justify-content: center;\r\n        }\r\n        \r\n        .links-buttons .project-link {\r\n            flex: 0 0 auto;\r\n        }\r\n        \r\n        \/* Common Link Styles *\/\r\n        .project-link {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 0.75rem;\r\n            padding: 1rem 1.5rem;\r\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\r\n            color: white;\r\n            text-decoration: none;\r\n            border-radius: 10px;\r\n            font-weight: 500;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);\r\n        }\r\n        \r\n        .project-link:hover {\r\n            transform: translateY(-3px);\r\n            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);\r\n            color: white;\r\n            text-decoration: none;\r\n        }\r\n        \r\n        .project-link i {\r\n            font-size: 1.2rem;\r\n        }\r\n        \r\n        .project-link span {\r\n            font-size: 0.95rem;\r\n        }\r\n        \r\n        \/* Specific Link Colors *\/\r\n        .live-link {\r\n            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);\r\n            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);\r\n        }\r\n        \r\n        .live-link:hover {\r\n            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);\r\n        }\r\n        \r\n        .github-link {\r\n            background: linear-gradient(135deg, #333 0%, #6c757d 100%);\r\n            box-shadow: 0 4px 15px rgba(51, 51, 51, 0.3);\r\n        }\r\n        \r\n        .github-link:hover {\r\n            box-shadow: 0 8px 25px rgba(51, 51, 51, 0.4);\r\n        }\r\n        \r\n        .demo-link {\r\n            background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);\r\n            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);\r\n        }\r\n        \r\n        .demo-link:hover {\r\n            box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);\r\n        }\r\n        \r\n        .docs-link {\r\n            background: linear-gradient(135deg, #fd7e14 0%, #e83e8c 100%);\r\n            box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3);\r\n        }\r\n        \r\n        .docs-link:hover {\r\n            box-shadow: 0 8px 25px rgba(253, 126, 20, 0.4);\r\n        }\r\n        \r\n        @media (max-width: 768px) {\r\n            .links-columns-2,\r\n            .links-columns-3,\r\n            .links-columns-4 {\r\n                grid-template-columns: 1fr;\r\n            }\r\n            \r\n            .links-buttons .links-grid {\r\n                flex-direction: column;\r\n            }\r\n            \r\n            .project-link {\r\n                justify-content: center;\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cc2ce87 e-flex e-con-boxed e-con e-parent\" data-id=\"cc2ce87\" 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-920e6ef elementor-widget elementor-widget-skill_comment_post\" data-id=\"920e6ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_comment_post.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-comments-widget dark-theme\" dir=\"rtl\">\r\n            <ul class=\"skill-comments-list\">        <li class=\"comment even thread-even depth-1 skill-comment-item\" id=\"comment-37\">\r\n            <div class=\"skill-comment-box\">\r\n                <div class=\"skill-comment-side\">\r\n                    <div class=\"skill-comment-author-avatar\">\r\n                                            <\/div>\r\n                    <div class=\"skill-comment-author-name\">\u0645\u062d\u0645\u062f<\/div>\r\n                    <div class=\"skill-comment-date\">\u06f1\u06f4\u06f0\u06f4\/\u06f0\u06f4\/\u06f1\u06f9<\/div>\r\n                <\/div>\r\n                <div class=\"skill-comment-main\">\r\n                    <div class=\"skill-comment-content\"><p>\u0627\u06cc\u0646 \u06cc\u06a9 \u06a9\u0627\u0645\u0646\u062a \u062a\u0633\u062a\u06cc \u0645\u06cc\u0628\u0627\u0634\u062f<\/p>\n<\/div>\r\n                    <div class=\"skill-comment-actions\">\r\n                        <a rel=\"nofollow\" class=\"comment-reply-link\" href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/?replytocom=37#respond\" data-commentid=\"37\" data-postid=\"1732\" data-belowelement=\"comment-37\" data-respondelement=\"respond\" data-replyto=\"\u067e\u0627\u0633\u062e \u0628\u0647 \u0645\u062d\u0645\u062f\" aria-label=\"\u067e\u0627\u0633\u062e \u0628\u0647 \u0645\u062d\u0645\u062f\"><span class=\"skill-reply-icon\">&#8634;<\/span> <span>\u067e\u0627\u0633\u062e<\/span><\/a>                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <ul class=\"children\">\n        <li class=\"comment byuser comment-author-admiin bypostauthor odd alt depth-2 skill-comment-item skill-comment-child\" id=\"comment-38\">\r\n            <div class=\"skill-comment-box\">\r\n                <div class=\"skill-comment-side\">\r\n                    <div class=\"skill-comment-author-avatar\">\r\n                                            <\/div>\r\n                    <div class=\"skill-comment-author-name\">admiin<\/div>\r\n                    <div class=\"skill-comment-date\">\u06f1\u06f4\u06f0\u06f4\/\u06f0\u06f4\/\u06f1\u06f9<\/div>\r\n                <\/div>\r\n                <div class=\"skill-comment-main\">\r\n                    <div class=\"skill-comment-content\"><p>\u0627\u06cc\u0646 \u06cc\u06a9 \u067e\u0627\u0633\u062e \u062a\u0633\u062a\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0645\u0646\u062a \u0627\u0633\u062a<\/p>\n<\/div>\r\n                    <div class=\"skill-comment-actions\">\r\n                        <a rel=\"nofollow\" class=\"comment-reply-link\" href=\"https:\/\/websavant.ir\/skill\/theme-skill\/project\/project-demo-developer\/?replytocom=38#respond\" data-commentid=\"38\" data-postid=\"1732\" data-belowelement=\"comment-38\" data-respondelement=\"respond\" data-replyto=\"\u067e\u0627\u0633\u062e \u0628\u0647 admiin\" aria-label=\"\u067e\u0627\u0633\u062e \u0628\u0647 admiin\"><span class=\"skill-reply-icon\">&#8634;<\/span> <span>\u067e\u0627\u0633\u062e<\/span><\/a>                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/li><!-- #comment-## -->\n<\/ul><!-- .children -->\n<\/li><!-- #comment-## -->\n<\/ul>\t<div id=\"respond\" class=\"comment-respond\">\n\t\t<h3 id=\"reply-title\" class=\"comment-reply-title\">\u0627\u0631\u0633\u0627\u0644 \u062f\u06cc\u062f\u06af\u0627\u0647 <small><a rel=\"nofollow\" id=\"cancel-comment-reply-link\" href=\"\/skill\/theme-skill\/wp-json\/wp\/v2\/project\/1732#respond\" style=\"display:none;\">\u0644\u063a\u0648 \u067e\u0627\u0633\u062e<\/a><\/small><\/h3><form action=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-comments-post.php\" method=\"post\" id=\"skill-commentform\" class=\"skill-comment-form\"><textarea id=\"comment\" name=\"comment\" placeholder=\"\u0645\u062a\u0646 \u062f\u06cc\u062f\u06af\u0627\u0647*\" required><\/textarea><input name=\"wpml_language_code\" type=\"hidden\" value=\"fa\" \/><input id=\"author\" name=\"author\" type=\"text\" placeholder=\"\u0646\u0627\u0645 \u0634\u0645\u0627*\" required \/>\n<input id=\"email\" name=\"email\" type=\"email\" placeholder=\"\u0627\u06cc\u0645\u06cc\u0644*\" required \/>\n<input id=\"url\" name=\"url\" type=\"text\" placeholder=\"\u0648\u0628\u0633\u0627\u06cc\u062a (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)\" \/>\n\n<div class=\"skill-submit-wrap\"><button name=\"submit\" type=\"submit\" id=\"skill-submit\" class=\"skill-submit-btn\">\u0627\u0631\u0633\u0627\u0644 \u062f\u06cc\u062f\u06af\u0627\u0647<\/button> <input type='hidden' name='comment_post_ID' value='1732' id='comment_post_ID' \/>\n<input type='hidden' name='comment_parent' id='comment_parent' value='0' \/>\n<\/div><\/form>\t<\/div><!-- #respond -->\n\t        <\/div>\r\n        <style>\r\n            .skill-comments-widget.dark-theme {\r\n                background: #0a090a;\r\n                color: #fff;\r\n                border-radius: 14px;\r\n                padding: 32px 24px;\r\n                margin: 24px auto;\r\n                box-shadow: 0 2px 24px rgba(0,0,0,0.18);\r\n                max-width: 1100px;\r\n            }\r\n            .skill-comments-list {\r\n                list-style: none;\r\n                padding: 0;\r\n                margin: 0 0 32px 0;\r\n            }\r\n            .skill-comment-item {\r\n                background: rgba(255, 255, 255, 0.03);\r\n                backdrop-filter: blur(15px);\r\n                -webkit-backdrop-filter: blur(15px);\r\n                border: 1px solid rgba(255, 255, 255, 0.08);\r\n                border-radius: 20px;\r\n                padding: 24px;\r\n                margin-bottom: 24px;\r\n                position: relative;\r\n                transition: all 0.3s ease;\r\n                overflow: hidden;\r\n            }\r\n            .skill-comment-item::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(14, 89, 242, 0.05), rgba(255, 255, 255, 0.02));\r\n                border-radius: 20px;\r\n                z-index: -1;\r\n            }\r\n            .skill-comment-item:hover {\r\n                transform: translateY(-2px);\r\n                box-shadow: 0 8px 25px rgba(14, 89, 242, 0.15);\r\n                border-color: rgba(14, 89, 242, 0.2);\r\n            }\r\n            .skill-comment-child {\r\n                background: rgba(255, 255, 255, 0.05);\r\n                backdrop-filter: blur(20px);\r\n                -webkit-backdrop-filter: blur(20px);\r\n                border: 1px solid rgba(255, 255, 255, 0.1);\r\n                border-radius: 18px;\r\n                margin: 24px 40px 0 0;\r\n                padding: 20px;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            .skill-comment-child::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(14, 89, 242, 0.08), rgba(255, 255, 255, 0.03));\r\n                border-radius: 18px;\r\n                z-index: -1;\r\n            }\r\n            .skill-comment-child:hover {\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 6px 20px rgba(14, 89, 242, 0.12);\r\n            }\r\n            .skill-comment-box {\r\n                display: flex;\r\n                flex-direction: row;\r\n                align-items: flex-start;\r\n                gap: 24px;\r\n                position: relative;\r\n            }\r\n            .skill-comment-side {\r\n                display: flex;\r\n                flex-direction: column;\r\n                align-items: center;\r\n                min-width: 80px;\r\n                margin-top: 4px;\r\n            }\r\n            .skill-comment-author-avatar {\r\n                position: relative;\r\n                margin-bottom: 12px;\r\n            }\r\n            .skill-comment-author-avatar img {\r\n                border-radius: 50%;\r\n                width: 56px;\r\n                height: 56px;\r\n                object-fit: cover;\r\n                background: linear-gradient(135deg, #0e59f2, #00d4ff);\r\n                border: 3px solid rgba(255, 255, 255, 0.1);\r\n                box-shadow: 0 4px 15px rgba(14, 89, 242, 0.3);\r\n                transition: all 0.3s ease;\r\n            }\r\n            .skill-comment-author-avatar::after {\r\n                content: '';\r\n                position: absolute;\r\n                top: -2px;\r\n                left: -2px;\r\n                right: -2px;\r\n                bottom: -2px;\r\n                background: linear-gradient(135deg, #0e59f2, #00d4ff);\r\n                border-radius: 50%;\r\n                z-index: -1;\r\n                opacity: 0.3;\r\n                transition: opacity 0.3s ease;\r\n            }\r\n            .skill-comment-item:hover .skill-comment-author-avatar img {\r\n                transform: scale(1.05);\r\n                box-shadow: 0 6px 20px rgba(14, 89, 242, 0.4);\r\n            }\r\n            .skill-comment-item:hover .skill-comment-author-avatar::after {\r\n                opacity: 0.5;\r\n            }\r\n            .skill-comment-author-name {\r\n                color: #0e59f2;\r\n                font-weight: 600;\r\n                font-size: 1.1em;\r\n                margin-bottom: 4px;\r\n                text-align: center;\r\n                text-shadow: 0 0 10px rgba(14, 89, 242, 0.3);\r\n            }\r\n            .skill-comment-date {\r\n                color: rgba(255, 255, 255, 0.7);\r\n                font-size: 0.9em;\r\n                text-align: center;\r\n                background: rgba(255, 255, 255, 0.05);\r\n                padding: 4px 12px;\r\n                border-radius: 12px;\r\n                backdrop-filter: blur(10px);\r\n                -webkit-backdrop-filter: blur(10px);\r\n            }\r\n            .skill-comment-main {\r\n                flex: 1;\r\n                display: flex;\r\n                flex-direction: column;\r\n                justify-content: space-between;\r\n                min-width: 0;\r\n            }\r\n            .skill-comment-content {\r\n                color: #fff;\r\n                font-size: 1.05em;\r\n                margin-bottom: 45px;\r\n                word-break: break-word;\r\n                line-height: 1.6;\r\n                text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);\r\n            }\r\n            .skill-comment-actions {\r\n                display: flex;\r\n                align-items: center;\r\n                justify-content: flex-start;\r\n                position: absolute;\r\n                left: 24px;\r\n                bottom: 16px;\r\n            }\r\n            .skill-reply-icon {\r\n                color: #0e59f2;\r\n                font-size: 1.1em;\r\n                margin-left: 6px;\r\n                transition: all 0.3s ease;\r\n            }\r\n            .skill-comment-actions a {\r\n                color: #0e59f2;\r\n                font-weight: 500;\r\n                text-decoration: none;\r\n                transition: all 0.3s ease;\r\n                display: flex;\r\n                align-items: center;\r\n                gap: 6px;\r\n                background: rgba(14, 89, 242, 0.1);\r\n                padding: 8px 16px;\r\n                border-radius: 20px;\r\n                border: 1px solid rgba(14, 89, 242, 0.2);\r\n                backdrop-filter: blur(10px);\r\n                -webkit-backdrop-filter: blur(10px);\r\n            }\r\n            .skill-comment-actions a:hover {\r\n                color: #fff;\r\n                background: rgba(14, 89, 242, 0.3);\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 4px 12px rgba(14, 89, 242, 0.3);\r\n            }\r\n            .skill-comment-actions a:hover .skill-reply-icon {\r\n                transform: rotate(180deg);\r\n            }\r\n            .skill-no-comments {\r\n                color: rgba(255, 255, 255, 0.8);\r\n                margin-bottom: 32px;\r\n                text-align: center;\r\n                padding: 40px 20px;\r\n                background: rgba(255, 255, 255, 0.03);\r\n                backdrop-filter: blur(15px);\r\n                -webkit-backdrop-filter: blur(15px);\r\n                border: 1px solid rgba(255, 255, 255, 0.08);\r\n                border-radius: 20px;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            .skill-no-comments::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(14, 89, 242, 0.05), rgba(255, 255, 255, 0.02));\r\n                border-radius: 20px;\r\n                z-index: -1;\r\n            }\r\n            .skill-no-comments::after {\r\n                content: '\ud83d\udcac';\r\n                font-size: 3em;\r\n                display: block;\r\n                margin-bottom: 16px;\r\n                opacity: 0.6;\r\n            }\r\n            .skill-comment-form {\r\n                margin-top: 32px;\r\n                background: rgba(255, 255, 255, 0.05);\r\n                backdrop-filter: blur(20px);\r\n                -webkit-backdrop-filter: blur(20px);\r\n                border: 1px solid rgba(255, 255, 255, 0.1);\r\n                border-radius: 20px;\r\n                padding: 32px;\r\n                position: relative;\r\n                overflow: hidden;\r\n            }\r\n            .skill-comment-form::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                background: linear-gradient(135deg, rgba(14, 89, 242, 0.1), rgba(255, 255, 255, 0.05));\r\n                border-radius: 20px;\r\n                z-index: -1;\r\n            }\r\n            .skill-comment-form h3 {\r\n                color: #fff;\r\n                margin-bottom: 24px;\r\n                font-size: 1.5em;\r\n                font-weight: 600;\r\n                text-align: center;\r\n                position: relative;\r\n            }\r\n            .skill-comment-form h3::after {\r\n                content: '';\r\n                position: absolute;\r\n                bottom: -8px;\r\n                left: 50%;\r\n                transform: translateX(-50%);\r\n                width: 60px;\r\n                height: 3px;\r\n                background: linear-gradient(90deg, #0e59f2, #00d4ff);\r\n                border-radius: 2px;\r\n            }\r\n            .skill-comment-form input,\r\n            .skill-comment-form textarea {\r\n                background: rgba(255, 255, 255, 0.08);\r\n                color: #ffffff;\r\n                border: 2px solid rgba(255, 255, 255, 0.1);\r\n                border-radius: 15px;\r\n                padding: 16px 20px;\r\n                width: 100%;\r\n                margin-bottom: 20px;\r\n                font-size: 14px;\r\n                transition: all 0.3s ease;\r\n                backdrop-filter: blur(10px);\r\n                -webkit-backdrop-filter: blur(10px);\r\n            }\r\n            .skill-comment-form input:focus,\r\n            .skill-comment-form textarea:focus {\r\n                outline: none;\r\n                border-color: rgba(14, 89, 242, 0.6);\r\n                box-shadow: 0 0 20px rgba(14, 89, 242, 0.3);\r\n                background: rgba(255, 255, 255, 0.12);\r\n                transform: translateY(-2px);\r\n            }\r\n            .skill-comment-form input::placeholder,\r\n            .skill-comment-form textarea::placeholder {\r\n                color: rgba(255, 255, 255, 0.6);\r\n                font-weight: 300;\r\n            }\r\n            .skill-comment-form textarea {\r\n                min-height: 140px;\r\n                resize: vertical;\r\n                line-height: 1.6;\r\n            }\r\n            \/* Email field: placeholder RTL, typed LTR *\/\r\n            .skill-comment-form input[type=\"email\"] {\r\n                text-align: left;\r\n                direction: ltr;\r\n            }\r\n            .skill-comment-form input[type=\"email\"]:placeholder-shown {\r\n                text-align: right;\r\n                direction: rtl;\r\n            }\r\n            .skill-comment-form input[type=\"email\"]:focus {\r\n                text-align: left;\r\n                direction: ltr;\r\n            }\r\n            .skill-comment-form input[type=\"email\"]:not(:placeholder-shown) {\r\n                text-align: left;\r\n                direction: ltr;\r\n            }\r\n            .skill-submit-btn {\r\n                background: linear-gradient(135deg, #0e59f2, #00d4ff);\r\n                color: #fff;\r\n                border: none;\r\n                padding: 15px 50px 15px 50px;\r\n                border-radius: 50px;\r\n                font-weight: 600;\r\n                cursor: pointer;\r\n                transition: all 0.4s ease;\r\n                font-size: 16px;\r\n                position: relative;\r\n                overflow: hidden;\r\n                box-shadow: 0 8px 25px rgba(14, 89, 242, 0.3);\r\n                text-transform: uppercase;\r\n                letter-spacing: 1px;\r\n            }\r\n            .skill-submit-btn::before {\r\n                content: '';\r\n                position: absolute;\r\n                top: 0;\r\n                left: -100%;\r\n                width: 100%;\r\n                height: 100%;\r\n                background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\r\n                transition: left 0.5s ease;\r\n            }\r\n            .skill-submit-btn:hover {\r\n                background: linear-gradient(135deg, #00d4ff, #0e59f2);\r\n                transform: translateY(-3px);\r\n                box-shadow: 0 12px 35px rgba(14, 89, 242, 0.4);\r\n            }\r\n            .skill-submit-btn:hover::before {\r\n                left: 100%;\r\n            }\r\n            .skill-submit-btn:active {\r\n                transform: translateY(-1px);\r\n                box-shadow: 0 6px 20px rgba(14, 89, 242, 0.3);\r\n            }\r\n            \r\n            .skill-comment-form input[type=\"checkbox\"],\r\n            .skill-comment-form input[type=\"radio\"] {\r\n                display: none !important;\r\n            }\r\n            \r\n            .skill-comment-form .comment-form-cookies-consent {\r\n                display: none !important;\r\n            }\r\n            \r\n            .skill-comment-form .comment-notes {\r\n                display: none !important;\r\n            }\r\n            \r\n            .skill-comment-form .logged-in-as {\r\n                display: none !important;\r\n            }\r\n            \r\n            .skill-comment-form .comment-form-author,\r\n            .skill-comment-form .comment-form-email,\r\n            .skill-comment-form .comment-form-url,\r\n            .skill-comment-form .comment-form-comment {\r\n                margin-bottom: 20px;\r\n            }\r\n            \r\n            .skill-comment-form .comment-form-author input,\r\n            .skill-comment-form .comment-form-email input,\r\n            .skill-comment-form .comment-form-url input {\r\n                width: 100%;\r\n                box-sizing: border-box;\r\n            }\r\n            \r\n            @media (max-width: 768px) {\r\n                .skill-comment-form {\r\n                    padding: 20px;\r\n                }\r\n                \r\n                .skill-submit-btn {\r\n                    width: 100%;\r\n                    padding: 14px 20px;\r\n                }\r\n            }\r\n            @media (max-width: 700px) {\r\n                .skill-comments-widget.dark-theme {\r\n                    padding: 10px 2px;\r\n                }\r\n                .skill-comment-child {\r\n                    margin: 16px 0 0 0;\r\n                    padding: 16px 8px 0 0;\r\n                }\r\n                .skill-comment-box {\r\n                    flex-direction: column;\r\n                    gap: 8px;\r\n                }\r\n                .skill-comment-side {\r\n                    flex-direction: row-reverse;\r\n                    align-items: center;\r\n                    gap: 8px;\r\n                    min-width: 0;\r\n                }\r\n                .skill-comment-main {\r\n                    margin-top: 8px;\r\n                }\r\n                .skill-comment-actions {\r\n                    left: 8px;\r\n                    bottom: 8px;\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\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u067e\u0631\u0648\u0698\u0647 \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 \u0633\u0627\u062f\u06af\u06cc \u0646\u0627\u0645\u0641\u0647\u0648\u0645 \u0627\u0632 \u0635\u0646\u0639\u062a \u0686\u0627\u067e<\/p>\n","protected":false},"featured_media":0,"comment_status":"open","ping_status":"closed","template":"template-project-landing.php","project_category":[],"class_list":["post-1732","project","type-project","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/project\/1732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/project"}],"about":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/types\/project"}],"replies":[{"embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/comments?post=1732"}],"version-history":[{"count":3,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/project\/1732\/revisions"}],"predecessor-version":[{"id":5494,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/project\/1732\/revisions\/5494"}],"wp:attachment":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/media?parent=1732"}],"wp:term":[{"taxonomy":"project_category","embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/project_category?post=1732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}