{"id":193,"date":"2025-04-03T14:44:20","date_gmt":"2025-04-03T11:14:20","guid":{"rendered":"https:\/\/websavant.ir\/skill\/theme-skill\/?page_id=193"},"modified":"2025-09-19T14:55:29","modified_gmt":"2025-09-19T14:55:29","slug":"my-resume","status":"publish","type":"page","link":"https:\/\/websavant.ir\/skill\/theme-skill\/my-resume\/","title":{"rendered":"\u0631\u0632\u0648\u0645\u0647 \u0645\u0646"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"193\" class=\"elementor elementor-193\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df0be78 e-grid e-con-boxed e-con e-parent\" data-id=\"df0be78\" 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-d0f2e88 elementor-widget elementor-widget-my_custom_icon_title\" data-id=\"d0f2e88\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"my_custom_icon_title.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"my-custom-icon-title-container\">\r\n            <span class=\"my-custom-icon-title\">\r\n                <svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-file\" viewBox=\"0 0 384 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z\"><\/path><\/svg>                \u0631\u0632\u0648\u0645\u0647 \u0645\u0646            <\/span>\r\n        <\/div>\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-e1308db e-flex e-con-boxed e-con e-parent\" data-id=\"e1308db\" 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-8a1ae06 elementor-widget elementor-widget-skill_job_history_widget\" data-id=\"8a1ae06\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_job_history_widget.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <style>\r\n        .job-std-list {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 28px;\r\n            max-width: 100%;\r\n            margin: 0 auto;\r\n        }\r\n        .job-std-title-wrap {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            margin-bottom: 32px;\r\n        }\r\n        .job-std-title-wrap .job-std-title-icon {\r\n            font-size: 2.1rem;\r\n            color: #1976d2;\r\n            background: #e3f2fd;\r\n            border-radius: 8px;\r\n            padding: 6px;\r\n        }\r\n        .job-std-title {\r\n            font-size: 1.5rem;\r\n            font-weight: 800;\r\n            color: #222;\r\n            letter-spacing: -0.5px;\r\n        }\r\n        .job-std-card {\r\n            display: flex;\r\n            flex-direction: row;\r\n            align-items: flex-start;\r\n            justify-content: space-between;\r\n            background: #fff;\r\n            border-radius: 16px;\r\n            box-shadow: 0 2px 16px 0 rgba(25, 118, 210, 0.08);\r\n            padding: 20px 24px;\r\n            gap: 20px;\r\n            border: 1px solid #f0f4f8;\r\n            transition: box-shadow 0.2s, border 0.2s;\r\n            position: relative;\r\n        }\r\n        .job-std-card-right {\r\n            display: flex;\r\n            align-items: flex-start;\r\n            gap: 16px;\r\n        }\r\n        .job-std-card-left {\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: flex-start;\r\n            justify-content: flex-start;\r\n            min-width: 90px;\r\n            margin-right: auto;\r\n        }\r\n        .job-std-logo {\r\n            width: 60px;\r\n            height: 60px;\r\n            min-width: 60px;\r\n            min-height: 60px;\r\n            border-radius: 12px;\r\n            background: #e3f2fd;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            overflow: hidden;\r\n            box-shadow: 0 2px 8px 0 rgba(25, 118, 210, 0.08);\r\n            border: 2px solid #90caf9;\r\n            align-self: flex-start;\r\n        }\r\n        .job-std-logo img {\r\n            width: 44px;\r\n            height: 44px;\r\n            object-fit: contain;\r\n            border-radius: 8px;\r\n        }\r\n        .job-std-info {\r\n            display: flex;\r\n            flex-direction: column;\r\n            gap: 6px;\r\n        }\r\n        .job-std-job-title {\r\n            font-size: 15px;\r\n            font-weight: 700;\r\n            color: #333;\r\n        }\r\n        .job-std-company {\r\n            color: #1976d2;\r\n            font-size: 17px;\r\n            font-weight: 800;\r\n        }\r\n        .job-std-company a {\r\n            color: #1976d2;\r\n            text-decoration: none;\r\n            transition: color 0.2s;\r\n        }\r\n        .job-std-company a:hover {\r\n            color: #0d47a1;\r\n        }\r\n        .job-std-period {\r\n            font-size: 13px;\r\n            color: #fff;\r\n            background: #1976d2;\r\n            border-radius: 6px;\r\n            padding: 5px 12px 2px 12px;\r\n            font-weight: 500;\r\n            margin: 0 0 8px 0;\r\n            align-self: flex-start;\r\n        }\r\n        .job-std-desc {\r\n            font-size: 14px;\r\n            color: #607d8b;\r\n            margin-top: 2px;\r\n        }\r\n        @media (max-width: 700px) {\r\n            .job-std-list {\r\n                max-width: 98vw;\r\n            }\r\n            .job-std-card {\r\n                flex-direction: column;\r\n                align-items: center;\r\n                padding: 14px 6px;\r\n            }\r\n            .job-std-card-right {\r\n                flex-direction: column;\r\n                align-items: center;\r\n                justify-content: center;\r\n                gap: 8px;\r\n                width: 100%;\r\n            }\r\n            .job-std-card-left {\r\n                align-items: center;\r\n                justify-content: center;\r\n                width: 100%;\r\n                margin-bottom: 8px;\r\n                margin-right: 0;\r\n            }\r\n            .job-std-logo {\r\n                margin-bottom: 8px;\r\n                align-self: center;\r\n            }\r\n            .job-std-info, .job-std-job-title, .job-std-company, .job-std-desc {\r\n                align-items: center !important;\r\n                text-align: center !important;\r\n                width: 100%;\r\n            }\r\n            .job-std-period {\r\n                align-self: center !important;\r\n            }\r\n            .job-std-title {\r\n                font-size: 1.1rem;\r\n            }\r\n        }\r\n        <\/style>\r\n        <div class=\"job-std-list\">\r\n            <div class=\"tdw-wrap\" dir=\"rtl\" style=\"margin-bottom:22px;\">\r\n                <div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n                                            <h2 class=\"tdw-title\">\u0633\u0648\u0627\u0628\u0642 \u06a9\u0627\u0631\u06cc<\/h2>\r\n                                                                <span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n                                    <\/div>\r\n                            <\/div>\r\n                            <div class=\"job-std-card\">\r\n                    <div class=\"job-std-card-right\" style=\"display:flex; align-items:center; gap:16px;\">\r\n                        <div class=\"job-std-logo\">\r\n                                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/05\/zhk-dark-logo.ab40b3b1-removebg-preview.png\" alt=\"\u0634\u0631\u06a9\u062a \u0698\u0627\u06a9\u062a logo\">\r\n                                                    <\/div>\r\n                        <div class=\"job-std-info\">\r\n                            <div class=\"job-std-company\">\r\n                                                                    <a href=\"https:\/\/www.zhaket.com\/store\/web\/websavant\/products\" target=\"_blank\">\r\n                                        <strong >\u0634\u0631\u06a9\u062a \u0698\u0627\u06a9\u062a<\/strong>\r\n                                    <\/a>\r\n                                                            <\/div>\r\n                            <div class=\"job-std-job-title\">\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/div>\r\n                            <div class=\"job-std-desc\">&quot;\u0628\u0627 \u0633\u0627\u0628\u0642\u0647 \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0631\u062f\u067e\u0631\u0633\u06cc\u060c \u062a\u062c\u0631\u0628\u0647 \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0648\u0628 \u062f\u0627\u0631\u0645.&quot;<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"job-std-card-left\" style=\"display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; min-width:90px; margin-right:auto;\">\r\n                        <span class=\"job-std-period\">\u0627\u0632 1404 \u062a\u0627 \u0628\u062d\u0627\u0644<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                            <div class=\"job-std-card\">\r\n                    <div class=\"job-std-card-right\" style=\"display:flex; align-items:center; gap:16px;\">\r\n                        <div class=\"job-std-logo\">\r\n                                                            <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/07\/logo.png\" alt=\"\u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a logo\">\r\n                                                    <\/div>\r\n                        <div class=\"job-std-info\">\r\n                            <div class=\"job-std-company\">\r\n                                                                    <a href=\"https:\/\/websavant.ir\/skill\/\" target=\"_blank\">\r\n                                        <strong >\u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a<\/strong>\r\n                                    <\/a>\r\n                                                            <\/div>\r\n                            <div class=\"job-std-job-title\">\u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647<\/div>\r\n                            <div class=\"job-std-desc\">&quot;\u062a\u062c\u0631\u0628\u0647 \u0645\u0648\u0641\u0642 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u062a\u06cc\u0645\u200c \u062f\u0631 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0628\u0627 \u062a\u0645\u0631\u06a9\u0632 \u0628\u0631 \u0627\u0645\u0646\u06cc\u062a \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f.&quot;<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"job-std-card-left\" style=\"display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; min-width:90px; margin-right:auto;\">\r\n                        <span class=\"job-std-period\">\u0627\u0632 1400 \u062a\u0627 1402<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n                    <\/div>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1da7f3c e-flex e-con-boxed e-con e-parent\" data-id=\"1da7f3c\" 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-1805ea2 elementor-widget elementor-widget-skill_educational_modern\" data-id=\"1805ea2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_educational_modern.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill_educational-modern\" style=\"direction: rtl; text-align: right;\">\r\n            <div class=\"tdw-wrap\">\r\n                <div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\r\n                                            <h2 class=\"tdw-title\">\u0633\u0648\u0627\u0628\u0642 \u062a\u062d\u0635\u06cc\u0644\u06cc<\/h2>\r\n                                                                <span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\r\n                                    <\/div>\r\n                            <\/div>\r\n\r\n            <div class=\"skill_educational-items\">\r\n                                                            <div class=\"skill_educational-iteme\" data-date=\"\u0627\u0632 1395 \u062a\u0627 1398\">\r\n\r\n                            <div class=\"skill_educational-info\">\r\n                                                                    <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/202403061709710450arm-sazman-fny-o-hrfh-ay-kshor.png\" alt=\"\u0641\u0646\u06cc \u062d\u0631\u0641\u0647 \u0627\u06cc \u062e\u06cc\u0627\u0645\">\r\n                                                                <div class=\"skill_educational-meta\">\r\n                                    <h2>\u0641\u0646\u06cc \u062d\u0631\u0641\u0647 \u0627\u06cc \u062e\u06cc\u0627\u0645<\/h2>\r\n                                    <p>\r\n    <span>\u0645\u0642\u0637\u0639<\/span>:\r\n    \u062f\u06cc\u067e\u0644\u0645<\/p>\r\n<p>\r\n    <span>\u0631\u0634\u062a\u0647<\/span>:\r\n    \u0634\u0628\u06a9\u0647 \u0648 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                                                            <div class=\"skill_educational-description\">\r\n                                    <p>&quot;\u062f\u06cc\u067e\u0644\u0645 \u0645\u0646  \u0631\u0634\u062a\u0647 \u0634\u0628\u06a9\u0647 \u0648 \u0646\u0631\u0645 \u0627\u0641\u0632\u0627\u0631 \u0631\u0627\u06cc\u0627\u0646\u0647 \u0628\u0648\u062f\u0647 \u0648 \u062e\u0648\u0634\u062d\u0627\u0644\u0645 \u062f\u0631 \u062e\u062f\u0645\u062a \u0634\u0645\u0627 \u0628\u0627\u0634\u0645&quot;<\/p>\r\n                                <\/div>\r\n                                                    <\/div>\r\n                                            <div class=\"skill_educational-iteme\" data-date=\"\u0627\u0632 1400 \u062a\u0627 1404\">\r\n\r\n                            <div class=\"skill_educational-info\">\r\n                                                                    <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/04\/university.png\" alt=\"\u062f\u0627\u0646\u0634\u06af\u0627\u0647 \u067e\u06cc\u0627\u0645 \u0646\u0648\u0631 \u0634\u0647\u0631\u06a9\u0631\u062f\">\r\n                                                                <div class=\"skill_educational-meta\">\r\n                                    <h2>\u062f\u0627\u0646\u0634\u06af\u0627\u0647 \u067e\u06cc\u0627\u0645 \u0646\u0648\u0631 \u0634\u0647\u0631\u06a9\u0631\u062f<\/h2>\r\n                                    <p>\r\n    <span>\u0645\u0642\u0637\u0639<\/span>:\r\n    \u0644\u06cc\u0633\u0627\u0646\u0633 \u067e\u06cc\u0648\u0633\u062a\u0647<\/p>\r\n<p>\r\n    <span>\u0631\u0634\u062a\u0647<\/span>:\r\n    \u0645\u0647\u0646\u062f\u0633\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                                                            <div class=\"skill_educational-description\">\r\n                                    <p>&quot;\u0641\u0627\u0631\u063a\u200c\u0627\u0644\u062a\u062d\u0635\u06cc\u0644 \u0645\u0647\u0646\u062f\u0633\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631 \u0627\u0632 \u062f\u0627\u0646\u0634\u06af\u0627\u0647 \u0628\u0627 \u062a\u062e\u0635\u0635 \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0648 \u0627\u0645\u0646\u06cc\u062a \u0633\u0627\u06cc\u0628\u0631\u06cc&quot;<\/p>\r\n                                <\/div>\r\n                                                    <\/div>\r\n                                            <div class=\"skill_educational-iteme\" data-date=\"\u0627\u0632 1403 \u062a\u0627 \u06a9\u0646\u0648\u0646\">\r\n\r\n                            <div class=\"skill_educational-info\">\r\n                                                                    <img decoding=\"async\" src=\"https:\/\/websavant.ir\/skill\/theme-skill\/wp-content\/uploads\/2025\/09\/images.png\" alt=\"\u062c\u0647\u0627\u062f \u062f\u0627\u0646\u0634\u06af\u0627\u0647\u06cc\">\r\n                                                                <div class=\"skill_educational-meta\">\r\n                                    <h2>\u062c\u0647\u0627\u062f \u062f\u0627\u0646\u0634\u06af\u0627\u0647\u06cc<\/h2>\r\n                                    <p>\r\n    <span>\u0645\u0642\u0637\u0639<\/span>:\r\n    \u0627\u0646\u062c\u0627\u0645 \u0641\u0639\u0627\u0644\u06cc\u062a \u0647\u0627\u06cc \u062f\u0627\u0646\u0634\u062c\u0648\u06cc\u06cc<\/p>\r\n<p>\r\n    <span>\u0631\u0634\u062a\u0647<\/span>:\r\n    \u0645\u0647\u0646\u062f\u0633\u06cc \u06a9\u0627\u0645\u067e\u06cc\u0648\u062a\u0631<\/p>\r\n                                <\/div>\r\n                            <\/div>\r\n\r\n                                                            <div class=\"skill_educational-description\">\r\n                                    <p>&quot;\u0627\u0646\u062c\u0627\u0645 \u0641\u0639\u0627\u0644\u06cc\u062a \u0647\u0627\u06cc \u062f\u0627\u0646\u0634\u062c\u0648\u06cc\u06cc \u062f\u0631 \u062c\u0647\u0627\u062f \u062f\u0627\u0646\u0634\u06af\u0627\u0647\u06cc&quot;<\/p>\r\n                                <\/div>\r\n                                                    <\/div>\r\n                                                    <div class=\"skill_educational-date-float\"><span><\/span><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <style>\r\n        \/* Vertical line (optional) to enhance look *\/\r\n        .skill_educational-items { position: relative; padding-right: 72px;margin-top: 25px; }\r\n        .skill_educational-items:before { content: \"\"; position: absolute; top: 0; bottom: 0; right: 28px; width: 8px; background: linear-gradient(180deg,#90caf9 0%,#1976d2 100%); border-radius: 8px; }\r\n        \/* Single moving dot on the timeline *\/\r\n\r\n        \/* Floating date outside cards *\/\r\n        .skill_educational-date-float { position: absolute; right: 8px; top: var(--date-top, 30px); transform: translateY(-50%); z-index: 2; pointer-events: none; opacity: var(--date-opacity, 0); transition: top .2s ease, opacity .15s ease; }\r\n        .skill_educational-date-float span { display: inline-block; font-size: 13px; color: #607d8b; font-weight: 700; background: rgba(255,255,255,0.95); padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); white-space: nowrap; }\r\n        .skill_educational-date-float:after { content: \"\"; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 8px solid #1976d2; filter: drop-shadow(0 0 2px rgba(25,118,210,.35)); }\r\n\r\n        \/* Card base - collapsed by default to hide description *\/\r\n        .skill_educational-iteme { position: relative; z-index: 1; border: 1px solid #B6CEFF; border-radius: 16px; padding: 14px; cursor: pointer; background: #ffffff; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease, margin-right .25s ease, height .25s ease; height: 100px; margin-bottom: 22px; }\r\n\r\n        \/* Hover: move card left and increase height to reveal description and date *\/\r\n        .skill_educational-iteme:hover { border-color: #571F8B; box-shadow: 0 12px 30px rgba(87,31,139,0.22), 0 4px 12px rgba(25,118,210,0.16); transform: translateY(-2px); margin-right: 40px; height: 140px; }\r\n        .skill_educational-iteme:hover:before { content: \"\"; position: absolute; inset: 0; border-radius: 16px; pointer-events: none; box-shadow: inset 0 0 0 2px rgba(123,31,162,.12), inset 0 0 0 1px rgba(33,99,242,.15); }\r\n\r\n        .skill_educational-info { display: flex; align-items: center; }\r\n        .skill_educational-info img { object-fit: contain; border-radius: 12px; background: #e3f2fd; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 2px 8px 0 rgba(25, 118, 210, 0.08); border: 2px solid #90caf9; align-self: flex-start; width: 60px; height: 60px; margin-left: 15px; }\r\n\r\n        .skill_educational-meta h2 { font-size: 15px; font-weight: 800; color: #1976d2; margin: 0 0 6px 0; }\r\n        .skill_educational-meta span { font-size: 16px; font-weight: 700; color: #333333; }\r\n        .skill_educational-meta p { font-size: 14px; color: #607d8b; margin: 0; }\r\n\r\n        .skill_educational-description { margin-top: 12px; }\r\n        .skill_educational-description p { font-size: 14px; color: #607d8b; margin: 0 0 10px 0; }\r\n        <\/style>\r\n        <style>\r\n            @media (max-width: 768px) {\r\n            .skill_educational-iteme:hover {\r\n                height: 185px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 425px) {\r\n            \/* Switch to horizontal timeline *\/\r\n            .skill_educational-items { padding-right: 0; padding-top: 56px; }\r\n            .skill_educational-items:before { right: 0; left: 0; width: 100%; height: 8px; top: 28px; bottom: auto; }\r\n            \/* Hide vertical moving dot on mobile *\/\r\n\r\n            \/* Hover behavior: push down and expand height *\/\r\n            .skill_educational-iteme { height: 100px; margin-bottom: 16px; }\r\n            .skill_educational-iteme:hover { margin-right: 0; margin-top: 24px; height: 170px; }\r\n\r\n            \/* Date floats above the card centered horizontally *\/\r\n            .skill_educational-date-float { right: auto; left: var(--date-left, 50%); top: 10px; transform: translate(-50%, -50%); }\r\n        }\r\n\r\n        @media (max-width: 375px) {\r\n            .skill_educational-iteme:hover {\r\n                height: 200px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 320px) {\r\n            .skill_educational-iteme:hover {\r\n                height: 250px;\r\n            }\r\n        }\r\n        <\/style>\r\n        <script>\r\n        (function(){\r\n            \/\/ Scope to this widget container only\r\n            var container = document.currentScript.previousElementSibling.previousElementSibling.previousElementSibling;\r\n            if(!container || !container.querySelector) return;\r\n            var list = container.querySelector('.skill_educational-items');\r\n            if(!list) return;\r\n            var items = list.querySelectorAll('.skill_educational-iteme');\r\n            var dateFloat = list.querySelector('.skill_educational-date-float span');\r\n            function moveDotTo(el){\r\n                var rect = el.getBoundingClientRect();\r\n                var listRect = list.getBoundingClientRect();\r\n                var centerY = rect.top + rect.height\/2 - listRect.top;\r\n                var centerX = rect.left + rect.width\/2 - listRect.left;\r\n                \/\/ For desktop (vertical)\r\n                list.style.setProperty('--dot-top', centerY + 'px');\r\n                list.style.setProperty('--dot-opacity', 1);\r\n                list.style.setProperty('--date-top', centerY + 'px');\r\n                list.style.setProperty('--date-opacity', 1);\r\n                \/\/ For mobile (horizontal)\r\n                list.style.setProperty('--date-left', centerX + 'px');\r\n                if(dateFloat){ dateFloat.textContent = el.getAttribute('data-date') || ''; }\r\n            }\r\n            items.forEach(function(it){\r\n                it.addEventListener('mouseenter', function(){ moveDotTo(it); });\r\n            });\r\n            \/\/ Initialize to first item if exists\r\n            if(items[0]){ moveDotTo(items[0]); }\r\n        })();\r\n        <\/script>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-89b389b e-flex e-con-boxed e-con e-parent\" data-id=\"89b389b\" 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-8f4baa7 elementor-widget elementor-widget-skill-progressbar-e\" data-id=\"8f4baa7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill-progressbar-e.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-progressbar-e-widget skill-minimal\" data-animations=\"enabled\">\n            <div class=\"tdw-wrap\" dir=\"rtl\" style=\"margin-bottom:22px;\">\n                <div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\n                                            <h2 class=\"tdw-title\">\u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u0645\u0646<\/h2>\n                                                                <span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\n                                    <\/div>\n                            <\/div>\n                            <div class=\"skill-progressbar-e-items\">\n                                <div class=\"skill-progressbar-e-item\" data-index=\"0\">\n                    <div class=\"skill-progressbar-e-content\">\n                        <div class=\"skill-progressbar-e-title\">\u062a\u0648\u0633\u0639\u0647 \u0648\u0631\u062f\u067e\u0631\u0633<\/div>\n                        <div class=\"skill-progressbar-e-percent\">100%<\/div>\n                    <\/div>\n                    \n                    <div class=\"skill-progressbar-e-squares\">\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                            <\/div>\n                <\/div>\n                                <div class=\"skill-progressbar-e-item\" data-index=\"1\">\n                    <div class=\"skill-progressbar-e-content\">\n                        <div class=\"skill-progressbar-e-title\">Java<\/div>\n                        <div class=\"skill-progressbar-e-percent\">70%<\/div>\n                    <\/div>\n                    \n                    <div class=\"skill-progressbar-e-squares\">\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                            <\/div>\n                <\/div>\n                                <div class=\"skill-progressbar-e-item\" data-index=\"2\">\n                    <div class=\"skill-progressbar-e-content\">\n                        <div class=\"skill-progressbar-e-title\">Angular<\/div>\n                        <div class=\"skill-progressbar-e-percent\">40%<\/div>\n                    <\/div>\n                    \n                    <div class=\"skill-progressbar-e-squares\">\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                            <\/div>\n                <\/div>\n                                <div class=\"skill-progressbar-e-item\" data-index=\"3\">\n                    <div class=\"skill-progressbar-e-content\">\n                        <div class=\"skill-progressbar-e-title\">Jquery<\/div>\n                        <div class=\"skill-progressbar-e-percent\">100%<\/div>\n                    <\/div>\n                    \n                    <div class=\"skill-progressbar-e-squares\">\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                            <\/div>\n                <\/div>\n                                <div class=\"skill-progressbar-e-item\" data-index=\"4\">\n                    <div class=\"skill-progressbar-e-content\">\n                        <div class=\"skill-progressbar-e-title\">Html<\/div>\n                        <div class=\"skill-progressbar-e-percent\">100%<\/div>\n                    <\/div>\n                    \n                    <div class=\"skill-progressbar-e-squares\">\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                            <\/div>\n                <\/div>\n                                <div class=\"skill-progressbar-e-item\" data-index=\"5\">\n                    <div class=\"skill-progressbar-e-content\">\n                        <div class=\"skill-progressbar-e-title\">CSS<\/div>\n                        <div class=\"skill-progressbar-e-percent\">100%<\/div>\n                    <\/div>\n                    \n                    <div class=\"skill-progressbar-e-squares\">\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                            <\/div>\n                <\/div>\n                                <\/div>\n                    <\/div>\n        <style>\n        .skill-progressbar-e-widget {\n            display: block;\n            width: 100%;\n        }\n        \n        .skill-progressbar-e-items {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n            gap: 24px;\n        }\n        \n        \/* Glassmorphism Style - 2025 Modern *\/\n        .skill-glassmorphism .skill-progressbar-e-item {\n            background: rgba(255, 255, 255, 0.08);\n            backdrop-filter: blur(20px);\n            -webkit-backdrop-filter: blur(20px);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            border-radius: 24px;\n            padding: 28px;\n            box-shadow: \n                0 8px 32px rgba(0, 0, 0, 0.1),\n                inset 0 1px 0 rgba(255, 255, 255, 0.2);\n            position: relative;\n            overflow: hidden;\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            display: block;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-item::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.1), transparent);\n            transition: left 0.8s ease;\n            z-index: 1;\n            pointer-events: none;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-item:hover::before {\n            left: 100%;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-item:hover {\n            transform: translateY(-8px) scale(1.02);\n            box-shadow: \n                0 20px 40px rgba(0, 0, 0, 0.15),\n                inset 0 1px 0 rgba(255, 255, 255, 0.3);\n        }\n\n        .skill-progressbar-e-content {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        \n        \/* Ensure content stays above shimmer *\/\n        .skill-glassmorphism .skill-progressbar-e-content {\n            position: relative;\n            z-index: 2;\n        }\n        \n        \/* Ensure squares stay visible during shimmer *\/\n        .skill-glassmorphism .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n            position: relative;\n            z-index: 3;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-square-fill {\n            z-index: 4;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-square-glow {\n            z-index: 5;\n        }\n        \n        \/* Gradient Style - 2025 Modern *\/\n        .skill-gradient .skill-progressbar-e-item {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            border-radius: 24px;\n            padding: 28px;\n            box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);\n            border: none;\n            position: relative;\n            overflow: hidden;\n            transition: all 0.4s ease;\n            display: block;\n        }\n        \n        .skill-gradient .skill-progressbar-e-item::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n            opacity: 0;\n            transition: opacity 0.4s ease;\n            z-index: 1;\n            pointer-events: none;\n        }\n        \n        .skill-gradient .skill-progressbar-e-item:hover::after {\n            opacity: 1;\n        }\n        \n        .skill-gradient .skill-progressbar-e-content {\n            position: relative;\n            z-index: 2;\n        }\n        \n        .skill-gradient .skill-progressbar-e-title,\n        .skill-gradient .skill-progressbar-e-percent {\n            color: white !important;\n        }\n        \n        \/* Ensure squares stay visible in gradient style *\/\n        .skill-gradient .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n            position: relative;\n            z-index: 3;\n        }\n        \n        .skill-gradient .skill-progressbar-e-square-fill {\n            z-index: 4;\n        }\n        \n        .skill-gradient .skill-progressbar-e-square-glow {\n            z-index: 5;\n        }\n        \n        \/* Neumorphism Style - 2025 Modern *\/\n        .skill-neumorphism .skill-progressbar-e-item {\n            background: #f0f0f3;\n            border-radius: 24px;\n            padding: 28px;\n            box-shadow: \n                12px 12px 24px #d1d1d4,\n                -12px -12px 24px #ffffff;\n            border: none;\n            transition: all 0.3s ease;\n            display: block;\n        }\n        \n        .skill-neumorphism .skill-progressbar-e-item:hover {\n            box-shadow: \n                inset 12px 12px 24px #d1d1d4,\n                inset -12px -12px 24px #ffffff;\n            transform: translateY(2px);\n        }\n        \n        \/* Ensure squares stay visible in neumorphism style *\/\n        .skill-neumorphism .skill-progressbar-e-square {\n            background: #e0e5ec !important;\n            box-shadow: \n                inset 4px 4px 8px #a3b1c6,\n                inset -4px -4px 8px #ffffff !important;\n            border: none !important;\n            position: relative;\n            z-index: 3;\n        }\n        \n        .skill-neumorphism .skill-progressbar-e-square-fill {\n            z-index: 4;\n        }\n        \n        .skill-neumorphism .skill-progressbar-e-square-glow {\n            z-index: 5;\n        }\n        \n        \/* Minimal Style - 2025 Modern *\/\n        .skill-minimal .skill-progressbar-e-item {\n            background: #ffffff;\n            border-radius: 20px;\n            padding: 24px;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n            border: 1px solid #f0f0f0;\n            transition: all 0.3s ease;\n            display: block;\n        }\n        \n        .skill-minimal .skill-progressbar-e-item:hover {\n            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n            transform: translateY(-4px);\n        }\n        \n        \/* Ensure squares stay visible in minimal style *\/\n        .skill-minimal .skill-progressbar-e-square {\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n            position: relative;\n            z-index: 3;\n        }\n        \n        .skill-minimal .skill-progressbar-e-square-fill {\n            z-index: 4;\n        }\n        \n        .skill-minimal .skill-progressbar-e-square-glow {\n            z-index: 5;\n        }\n        \n        \/* Common Styles *\/\n        .skill-progressbar-e-title {\n            font-size: 18px;\n            font-weight: 600;\n            margin-bottom: 8px;\n            color: #333;\n        }\n        \n        .skill-progressbar-e-percent {\n            font-size: 16px;\n            font-weight: 500;\n            color: #666;\n            margin-bottom: 16px;\n        }\n        \n        .skill-progressbar-e-squares {\n            display: flex;\n            gap: 8px;\n            align-items: center;\n        }\n        \n        .skill-progressbar-e-square {\n            width: 16px;\n            height: 16px;\n            border-radius: 4px;\n            position: relative;\n            overflow: hidden;\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            display: block;\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0;\n        }\n        \n        .skill-progressbar-e-square-fill {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            background: linear-gradient(135deg, #667eea, #764ba2);\n            transition: width 0.6s ease;\n            z-index: 1;\n        }\n        \n        .skill-progressbar-e-square-glow {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n            animation: glowMove 2s ease-in-out infinite;\n            z-index: 2;\n        }\n        \n        \/* Force background visibility for all widget instances *\/\n        .skill-progressbar-e-widget .skill-progressbar-e-square {\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n            display: block !important;\n            position: relative !important;\n            z-index: 3 !important;\n        }\n        \n        \/* Specific styles for each design *\/\n        .skill-progressbar-e-widget.skill-glassmorphism .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n        }\n        \n        .skill-progressbar-e-widget.skill-neumorphism .skill-progressbar-e-square {\n            background: #e0e5ec !important;\n            box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff !important;\n            border: none !important;\n        }\n        \n        .skill-progressbar-e-widget.skill-gradient .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n        }\n        \n        .skill-progressbar-e-widget.skill-minimal .skill-progressbar-e-square {\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n        }\n        \n        \/* Ensure all squares are visible in Elementor editor *\/\n        .elementor-editor-active .skill-progressbar-e-widget .skill-progressbar-e-square {\n            opacity: 1 !important;\n            visibility: visible !important;\n            display: block !important;\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-widget.skill-glassmorphism .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-widget.skill-neumorphism .skill-progressbar-e-square {\n            background: #e0e5ec !important;\n            box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff !important;\n            border: none !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-widget.skill-gradient .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-widget.skill-minimal .skill-progressbar-e-square {\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n        }\n        \n        \/* Animation Classes - Only apply when animations are enabled *\/\n        .skill-progressbar-e-widget[data-animations=\"enabled\"] .skill-progressbar-e-item {\n            opacity: 1;\n            transform: translateY(0);\n        }\n        \n        \/* Keyframe Animations *\/\n        @keyframes slideInUp {\n            from {\n                opacity: 0;\n                transform: translateY(30px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n        \n        @keyframes fillSquare {\n            from {\n                width: 0%;\n            }\n            to {\n                width: 100%;\n            }\n        }\n        \n        @keyframes glowMove {\n            0%, 100% {\n                transform: translateX(-100%);\n            }\n            50% {\n                transform: translateX(100%);\n            }\n        }\n        \n        \/* Responsive Design *\/\n        @media (max-width: 768px) {\n            .skill-progressbar-e-items {\n                grid-template-columns: 1fr;\n                gap: 20px;\n            }\n            \n            .skill-progressbar-e-item {\n                padding: 24px;\n            }\n            \n            .skill-progressbar-e-squares {\n                gap: 10px;\n            }\n            \n            .skill-progressbar-e-square {\n                width: 28px;\n                height: 28px;\n            }\n            \n            .skill-progressbar-e-title {\n                font-size: 16px;\n            }\n            \n            .skill-progressbar-e-percent {\n                font-size: 18px;\n            }\n        }\n        \n        \/* Modern hover effects *\/\n        .skill-progressbar-e-item {\n            cursor: pointer;\n        }\n        \n        .skill-progressbar-e-item:hover .skill-progressbar-e-title {\n            transform: translateX(4px);\n        }\n        \n        .skill-progressbar-e-item:hover .skill-progressbar-e-percent {\n            transform: scale(1.1);\n        }\n        \n        \/* Elementor Editor Specific Styles *\/\n        .elementor-editor-active .skill-progressbar-e-widget[data-animations=\"enabled\"] .skill-progressbar-e-item {\n            opacity: 1 !important;\n            transform: translateY(0) !important;\n            animation: none !important;\n        }\n        \n        \/* Force visibility in Elementor *\/\n        .elementor-editor-active .skill-progressbar-e-widget {\n            display: block !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-items {\n            display: grid !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-item {\n            display: block !important;\n            opacity: 1 !important;\n            visibility: visible !important;\n        }\n        <\/style>\n        <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const widgets = document.querySelectorAll('.skill-progressbar-e-widget');\n            \n            widgets.forEach(function(widget) {\n                const animationsEnabled = widget.getAttribute('data-animations') === 'enabled';\n                const isElementorEditor = document.body.classList.contains('elementor-editor-active');\n                const designStyle = widget.className.match(\/skill-(\\w+)\/);\n                const currentStyle = designStyle ? designStyle[1] : 'minimal';\n                \n                function ensureItemsVisible() {\n                    const items = widget.querySelectorAll('.skill-progressbar-e-item');\n                    const squares = widget.querySelectorAll('.skill-progressbar-e-square');\n                    \n                    items.forEach(item => {\n                        item.style.opacity = '1';\n                        item.style.visibility = 'visible';\n                        item.style.display = 'block';\n                        item.style.transform = 'translateY(0)';\n                    });\n                    \n                    squares.forEach(square => {\n                        square.style.opacity = '1';\n                        square.style.visibility = 'visible';\n                        square.style.display = 'block';\n                        square.style.position = 'relative';\n                        square.style.zIndex = '3';\n                        \n                        \/\/ Force background color based on style\n                        switch(currentStyle) {\n                            case 'glassmorphism':\n                                square.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';\n                                square.style.border = '1px solid rgba(255, 255, 255, 0.3)';\n                                break;\n                            case 'neumorphism':\n                                square.style.backgroundColor = '#e0e5ec';\n                                square.style.border = 'none';\n                                square.style.boxShadow = 'inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff';\n                                break;\n                            case 'gradient':\n                                square.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';\n                                square.style.border = '1px solid rgba(255, 255, 255, 0.3)';\n                                break;\n                            case 'minimal':\n                                square.style.backgroundColor = '#f5f5f5';\n                                square.style.border = '1px solid #e0e0e0';\n                                break;\n                            default:\n                                square.style.backgroundColor = '#f5f5f5';\n                                square.style.border = '1px solid #e0e0e0';\n                        }\n                    });\n                }\n                \n                \/\/ Ensure visibility immediately\n                ensureItemsVisible();\n                \n                if (animationsEnabled && !isElementorEditor) {\n                    const observer = new IntersectionObserver((entries) => {\n                        entries.forEach(entry => {\n                            if (entry.isIntersecting) {\n                                const item = entry.target;\n                                item.style.animation = 'slideInUp 0.8s ease forwards';\n                                \n                                \/\/ Animate squares with delay\n                                const squares = item.querySelectorAll('.skill-progressbar-e-square');\n                                squares.forEach((square, index) => {\n                                    setTimeout(() => {\n                                        square.style.animation = 'fillSquare 0.6s ease forwards';\n                                    }, 200 + (index * 100));\n                                });\n                            }\n                        });\n                    }, { threshold: 0.3 });\n                    \n                    const items = widget.querySelectorAll('.skill-progressbar-e-item');\n                    items.forEach(item => observer.observe(item));\n                    \n                    \/\/ Hover effects for squares\n                    const squares = widget.querySelectorAll('.skill-progressbar-e-square');\n                    squares.forEach(square => {\n                        square.addEventListener('mouseenter', function() {\n                            this.style.transform = 'scale(1.1)';\n                            this.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.15)';\n                        });\n                        \n                        square.addEventListener('mouseleave', function() {\n                            this.style.transform = 'scale(1)';\n                            this.style.boxShadow = '';\n                        });\n                    });\n                }\n                \n                \/\/ Additional checks for frontend\n                if (!isElementorEditor) {\n                    setTimeout(ensureItemsVisible, 100);\n                    setTimeout(ensureItemsVisible, 500);\n                    setTimeout(ensureItemsVisible, 1000);\n                }\n            });\n        });\n        <\/script>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5c19cc0 elementor-widget elementor-widget-skill_progressbar_line\" data-id=\"5c19cc0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill_progressbar_line.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-progress-line-group\" dir=\"rtl\">\r\n                        \r\n                                     <div class=\"skill-progress-line__item elementor-repeater-item-0\">\r\n                 <div class=\"skill-progress-line__track\">\r\n                     <div class=\"skill-progress-line__fill\" style=\"width: 85%; background: #282932;\">\r\n                         <div class=\"skill-progress-line__content\">\r\n                             <span class=\"skill-progress-line__skill-name\">PHP<\/span>\r\n                             <span class=\"skill-progress-line__percent\">85\u066a<\/span>\r\n                         <\/div>\r\n                     <\/div>\r\n                 <\/div>\r\n             <\/div>\r\n                                     <div class=\"skill-progress-line__item elementor-repeater-item-1\">\r\n                 <div class=\"skill-progress-line__track\">\r\n                     <div class=\"skill-progress-line__fill\" style=\"width: 90%; background: #2FA0B7;\">\r\n                         <div class=\"skill-progress-line__content\">\r\n                             <span class=\"skill-progress-line__skill-name\">SEO<\/span>\r\n                             <span class=\"skill-progress-line__percent\">90\u066a<\/span>\r\n                         <\/div>\r\n                     <\/div>\r\n                 <\/div>\r\n             <\/div>\r\n                                     <div class=\"skill-progress-line__item elementor-repeater-item-2\">\r\n                 <div class=\"skill-progress-line__track\">\r\n                     <div class=\"skill-progress-line__fill\" style=\"width: 95%; background: #2FA0B7;\">\r\n                         <div class=\"skill-progress-line__content\">\r\n                             <span class=\"skill-progress-line__skill-name\">\u062a\u0648\u0644\u06cc\u062f\u0645\u062d\u062a\u0648\u0627<\/span>\r\n                             <span class=\"skill-progress-line__percent\">95\u066a<\/span>\r\n                         <\/div>\r\n                     <\/div>\r\n                 <\/div>\r\n             <\/div>\r\n                    <\/div>\r\n\r\n        <style>\r\n        .skill-progress-line-group {\r\n            width: 100%;\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 20px;\r\n        }\r\n        \r\n        .skill-progress-line__main-title {\r\n            font-weight: 700;\r\n            font-size: 1.2em;\r\n            margin-bottom: 20px;\r\n            line-height: 1.5;\r\n            color: #ffffff;\r\n            width: 100%;\r\n        }\r\n        \r\n        .skill-progress-line__item {\r\n            flex: 0 0 calc(50% - 10px);\r\n            min-width: 300px;\r\n        }\r\n        \r\n        .skill-progress-line__track {\r\n            background: linear-gradient(145deg, #1e1f26, #dfdfdf);\r\n            border-radius: 25px;\r\n            padding: 8px;\r\n            box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.5),\r\n                        inset -6px -6px 12px rgba(255, 255, 255, 0.08);\r\n            position: relative;\r\n            height: 50px;\r\n            display: flex;\r\n            align-items: center;\r\n        }\r\n        \r\n        .skill-progress-line__fill {\r\n            height: 100%;\r\n            border-radius: 20px;\r\n            transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n            position: relative;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n            padding: 0 20px;\r\n        }\r\n        \r\n        .skill-progress-line__content {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            width: 100%;\r\n            z-index: 2;\r\n            position: relative;\r\n        }\r\n        \r\n        .skill-progress-line__skill-name {\r\n            font-weight: 600;\r\n            font-size: 1em;\r\n            color: #ffffff;\r\n            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\r\n        }\r\n        \r\n        .skill-progress-line__percent {\r\n            font-weight: 700;\r\n            font-size: 0.95em;\r\n            color: #ffffff;\r\n            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);\r\n        }\r\n        \r\n                                                                       \/* Default colors for different progress bars - only if no custom color is set *\/\r\n           .elementor-repeater-item-0 .skill-progress-line__fill:not([style*=\"background\"]) {\r\n               background: #4a5568;\r\n           }\r\n           \r\n           .elementor-repeater-item-1 .skill-progress-line__fill:not([style*=\"background\"]) {\r\n               background: #3182ce;\r\n           }\r\n           \r\n           .elementor-repeater-item-2 .skill-progress-line__fill:not([style*=\"background\"]) {\r\n               background: #e53e3e;\r\n           }\r\n           \r\n           .elementor-repeater-item-3 .skill-progress-line__fill:not([style*=\"background\"]) {\r\n               background: #805ad5;\r\n           }\r\n        \r\n        \/* Responsive Design *\/\r\n        @media (max-width: 768px) {\r\n            .skill-progress-line__item {\r\n                flex: 0 0 100%;\r\n                min-width: auto;\r\n            }\r\n            \r\n            .skill-progress-line__track {\r\n                padding: 6px;\r\n                height: 45px;\r\n            }\r\n            \r\n            .skill-progress-line__fill {\r\n                padding: 0 15px;\r\n            }\r\n            \r\n            .skill-progress-line__skill-name {\r\n                font-size: 0.9em;\r\n            }\r\n            \r\n            .skill-progress-line__percent {\r\n                font-size: 0.85em;\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-0f24719 e-flex e-con-boxed e-con e-parent\" data-id=\"0f24719\" 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-676af3a elementor-widget elementor-widget-skill-progressbar-e\" data-id=\"676af3a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"skill-progressbar-e.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <div class=\"skill-progressbar-e-widget skill-neumorphism\" data-animations=\"enabled\">\n            <div class=\"tdw-wrap\" dir=\"rtl\" style=\"margin-bottom:22px;\">\n                <div class=\"tdw-title-row\" style=\"display:inline-flex; align-items:center; gap:8px; flex-direction: row-reverse;\">\n                                            <h2 class=\"tdw-title\">\u0632\u0628\u0627\u0646 \u0647\u0627\u06cc \u062e\u0627\u0631\u062c\u06cc<\/h2>\n                                                                <span class=\"tdw-dot\" aria-hidden=\"true\" style=\"display:inline-block; border-radius:3px;\"><\/span>\n                                    <\/div>\n                            <\/div>\n                            <div class=\"skill-progressbar-e-items\">\n                                <div class=\"skill-progressbar-e-item\" data-index=\"0\">\n                    <div class=\"skill-progressbar-e-content\">\n                        <div class=\"skill-progressbar-e-title\">\u0627\u0646\u06af\u0644\u06cc\u0633\u06cc<\/div>\n                        <div class=\"skill-progressbar-e-percent\">70%<\/div>\n                    <\/div>\n                    \n                    <div class=\"skill-progressbar-e-squares\">\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                            <\/div>\n                <\/div>\n                                <div class=\"skill-progressbar-e-item\" data-index=\"1\">\n                    <div class=\"skill-progressbar-e-content\">\n                        <div class=\"skill-progressbar-e-title\">\u0622\u0644\u0645\u0627\u0646\u06cc<\/div>\n                        <div class=\"skill-progressbar-e-percent\">40%<\/div>\n                    <\/div>\n                    \n                    <div class=\"skill-progressbar-e-squares\">\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 100%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                                    <div class=\"skill-progressbar-e-square\">\n                                <div class=\"skill-progressbar-e-square-fill\" style=\"width: 0%\"><\/div>\n                                <div class=\"skill-progressbar-e-square-glow\"><\/div>\n                            <\/div>\n                                            <\/div>\n                <\/div>\n                                <\/div>\n                    <\/div>\n        <style>\n        .skill-progressbar-e-widget {\n            display: block;\n            width: 100%;\n        }\n        \n        .skill-progressbar-e-items {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n            gap: 24px;\n        }\n        \n        \/* Glassmorphism Style - 2025 Modern *\/\n        .skill-glassmorphism .skill-progressbar-e-item {\n            background: rgba(255, 255, 255, 0.08);\n            backdrop-filter: blur(20px);\n            -webkit-backdrop-filter: blur(20px);\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            border-radius: 24px;\n            padding: 28px;\n            box-shadow: \n                0 8px 32px rgba(0, 0, 0, 0.1),\n                inset 0 1px 0 rgba(255, 255, 255, 0.2);\n            position: relative;\n            overflow: hidden;\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            display: block;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-item::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.1), transparent);\n            transition: left 0.8s ease;\n            z-index: 1;\n            pointer-events: none;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-item:hover::before {\n            left: 100%;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-item:hover {\n            transform: translateY(-8px) scale(1.02);\n            box-shadow: \n                0 20px 40px rgba(0, 0, 0, 0.15),\n                inset 0 1px 0 rgba(255, 255, 255, 0.3);\n        }\n\n        .skill-progressbar-e-content {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        \n        \/* Ensure content stays above shimmer *\/\n        .skill-glassmorphism .skill-progressbar-e-content {\n            position: relative;\n            z-index: 2;\n        }\n        \n        \/* Ensure squares stay visible during shimmer *\/\n        .skill-glassmorphism .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n            position: relative;\n            z-index: 3;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-square-fill {\n            z-index: 4;\n        }\n        \n        .skill-glassmorphism .skill-progressbar-e-square-glow {\n            z-index: 5;\n        }\n        \n        \/* Gradient Style - 2025 Modern *\/\n        .skill-gradient .skill-progressbar-e-item {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            border-radius: 24px;\n            padding: 28px;\n            box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);\n            border: none;\n            position: relative;\n            overflow: hidden;\n            transition: all 0.4s ease;\n            display: block;\n        }\n        \n        .skill-gradient .skill-progressbar-e-item::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n            opacity: 0;\n            transition: opacity 0.4s ease;\n            z-index: 1;\n            pointer-events: none;\n        }\n        \n        .skill-gradient .skill-progressbar-e-item:hover::after {\n            opacity: 1;\n        }\n        \n        .skill-gradient .skill-progressbar-e-content {\n            position: relative;\n            z-index: 2;\n        }\n        \n        .skill-gradient .skill-progressbar-e-title,\n        .skill-gradient .skill-progressbar-e-percent {\n            color: white !important;\n        }\n        \n        \/* Ensure squares stay visible in gradient style *\/\n        .skill-gradient .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n            position: relative;\n            z-index: 3;\n        }\n        \n        .skill-gradient .skill-progressbar-e-square-fill {\n            z-index: 4;\n        }\n        \n        .skill-gradient .skill-progressbar-e-square-glow {\n            z-index: 5;\n        }\n        \n        \/* Neumorphism Style - 2025 Modern *\/\n        .skill-neumorphism .skill-progressbar-e-item {\n            background: #f0f0f3;\n            border-radius: 24px;\n            padding: 28px;\n            box-shadow: \n                12px 12px 24px #d1d1d4,\n                -12px -12px 24px #ffffff;\n            border: none;\n            transition: all 0.3s ease;\n            display: block;\n        }\n        \n        .skill-neumorphism .skill-progressbar-e-item:hover {\n            box-shadow: \n                inset 12px 12px 24px #d1d1d4,\n                inset -12px -12px 24px #ffffff;\n            transform: translateY(2px);\n        }\n        \n        \/* Ensure squares stay visible in neumorphism style *\/\n        .skill-neumorphism .skill-progressbar-e-square {\n            background: #e0e5ec !important;\n            box-shadow: \n                inset 4px 4px 8px #a3b1c6,\n                inset -4px -4px 8px #ffffff !important;\n            border: none !important;\n            position: relative;\n            z-index: 3;\n        }\n        \n        .skill-neumorphism .skill-progressbar-e-square-fill {\n            z-index: 4;\n        }\n        \n        .skill-neumorphism .skill-progressbar-e-square-glow {\n            z-index: 5;\n        }\n        \n        \/* Minimal Style - 2025 Modern *\/\n        .skill-minimal .skill-progressbar-e-item {\n            background: #ffffff;\n            border-radius: 20px;\n            padding: 24px;\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n            border: 1px solid #f0f0f0;\n            transition: all 0.3s ease;\n            display: block;\n        }\n        \n        .skill-minimal .skill-progressbar-e-item:hover {\n            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);\n            transform: translateY(-4px);\n        }\n        \n        \/* Ensure squares stay visible in minimal style *\/\n        .skill-minimal .skill-progressbar-e-square {\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n            position: relative;\n            z-index: 3;\n        }\n        \n        .skill-minimal .skill-progressbar-e-square-fill {\n            z-index: 4;\n        }\n        \n        .skill-minimal .skill-progressbar-e-square-glow {\n            z-index: 5;\n        }\n        \n        \/* Common Styles *\/\n        .skill-progressbar-e-title {\n            font-size: 18px;\n            font-weight: 600;\n            margin-bottom: 8px;\n            color: #333;\n        }\n        \n        .skill-progressbar-e-percent {\n            font-size: 16px;\n            font-weight: 500;\n            color: #666;\n            margin-bottom: 16px;\n        }\n        \n        .skill-progressbar-e-squares {\n            display: flex;\n            gap: 8px;\n            align-items: center;\n        }\n        \n        .skill-progressbar-e-square {\n            width: 16px;\n            height: 16px;\n            border-radius: 4px;\n            position: relative;\n            overflow: hidden;\n            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n            display: block;\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0;\n        }\n        \n        .skill-progressbar-e-square-fill {\n            position: absolute;\n            top: 0;\n            left: 0;\n            height: 100%;\n            background: linear-gradient(135deg, #667eea, #764ba2);\n            transition: width 0.6s ease;\n            z-index: 1;\n        }\n        \n        .skill-progressbar-e-square-glow {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);\n            animation: glowMove 2s ease-in-out infinite;\n            z-index: 2;\n        }\n        \n        \/* Force background visibility for all widget instances *\/\n        .skill-progressbar-e-widget .skill-progressbar-e-square {\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n            display: block !important;\n            position: relative !important;\n            z-index: 3 !important;\n        }\n        \n        \/* Specific styles for each design *\/\n        .skill-progressbar-e-widget.skill-glassmorphism .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n        }\n        \n        .skill-progressbar-e-widget.skill-neumorphism .skill-progressbar-e-square {\n            background: #e0e5ec !important;\n            box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff !important;\n            border: none !important;\n        }\n        \n        .skill-progressbar-e-widget.skill-gradient .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n        }\n        \n        .skill-progressbar-e-widget.skill-minimal .skill-progressbar-e-square {\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n        }\n        \n        \/* Ensure all squares are visible in Elementor editor *\/\n        .elementor-editor-active .skill-progressbar-e-widget .skill-progressbar-e-square {\n            opacity: 1 !important;\n            visibility: visible !important;\n            display: block !important;\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-widget.skill-glassmorphism .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-widget.skill-neumorphism .skill-progressbar-e-square {\n            background: #e0e5ec !important;\n            box-shadow: inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff !important;\n            border: none !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-widget.skill-gradient .skill-progressbar-e-square {\n            background: rgba(255, 255, 255, 0.2) !important;\n            border: 1px solid rgba(255, 255, 255, 0.3) !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-widget.skill-minimal .skill-progressbar-e-square {\n            background: #f5f5f5 !important;\n            border: 1px solid #e0e0e0 !important;\n        }\n        \n        \/* Animation Classes - Only apply when animations are enabled *\/\n        .skill-progressbar-e-widget[data-animations=\"enabled\"] .skill-progressbar-e-item {\n            opacity: 1;\n            transform: translateY(0);\n        }\n        \n        \/* Keyframe Animations *\/\n        @keyframes slideInUp {\n            from {\n                opacity: 0;\n                transform: translateY(30px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n        \n        @keyframes fillSquare {\n            from {\n                width: 0%;\n            }\n            to {\n                width: 100%;\n            }\n        }\n        \n        @keyframes glowMove {\n            0%, 100% {\n                transform: translateX(-100%);\n            }\n            50% {\n                transform: translateX(100%);\n            }\n        }\n        \n        \/* Responsive Design *\/\n        @media (max-width: 768px) {\n            .skill-progressbar-e-items {\n                grid-template-columns: 1fr;\n                gap: 20px;\n            }\n            \n            .skill-progressbar-e-item {\n                padding: 24px;\n            }\n            \n            .skill-progressbar-e-squares {\n                gap: 10px;\n            }\n            \n            .skill-progressbar-e-square {\n                width: 28px;\n                height: 28px;\n            }\n            \n            .skill-progressbar-e-title {\n                font-size: 16px;\n            }\n            \n            .skill-progressbar-e-percent {\n                font-size: 18px;\n            }\n        }\n        \n        \/* Modern hover effects *\/\n        .skill-progressbar-e-item {\n            cursor: pointer;\n        }\n        \n        .skill-progressbar-e-item:hover .skill-progressbar-e-title {\n            transform: translateX(4px);\n        }\n        \n        .skill-progressbar-e-item:hover .skill-progressbar-e-percent {\n            transform: scale(1.1);\n        }\n        \n        \/* Elementor Editor Specific Styles *\/\n        .elementor-editor-active .skill-progressbar-e-widget[data-animations=\"enabled\"] .skill-progressbar-e-item {\n            opacity: 1 !important;\n            transform: translateY(0) !important;\n            animation: none !important;\n        }\n        \n        \/* Force visibility in Elementor *\/\n        .elementor-editor-active .skill-progressbar-e-widget {\n            display: block !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-items {\n            display: grid !important;\n        }\n        \n        .elementor-editor-active .skill-progressbar-e-item {\n            display: block !important;\n            opacity: 1 !important;\n            visibility: visible !important;\n        }\n        <\/style>\n        <script>\n        document.addEventListener('DOMContentLoaded', function() {\n            const widgets = document.querySelectorAll('.skill-progressbar-e-widget');\n            \n            widgets.forEach(function(widget) {\n                const animationsEnabled = widget.getAttribute('data-animations') === 'enabled';\n                const isElementorEditor = document.body.classList.contains('elementor-editor-active');\n                const designStyle = widget.className.match(\/skill-(\\w+)\/);\n                const currentStyle = designStyle ? designStyle[1] : 'minimal';\n                \n                function ensureItemsVisible() {\n                    const items = widget.querySelectorAll('.skill-progressbar-e-item');\n                    const squares = widget.querySelectorAll('.skill-progressbar-e-square');\n                    \n                    items.forEach(item => {\n                        item.style.opacity = '1';\n                        item.style.visibility = 'visible';\n                        item.style.display = 'block';\n                        item.style.transform = 'translateY(0)';\n                    });\n                    \n                    squares.forEach(square => {\n                        square.style.opacity = '1';\n                        square.style.visibility = 'visible';\n                        square.style.display = 'block';\n                        square.style.position = 'relative';\n                        square.style.zIndex = '3';\n                        \n                        \/\/ Force background color based on style\n                        switch(currentStyle) {\n                            case 'glassmorphism':\n                                square.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';\n                                square.style.border = '1px solid rgba(255, 255, 255, 0.3)';\n                                break;\n                            case 'neumorphism':\n                                square.style.backgroundColor = '#e0e5ec';\n                                square.style.border = 'none';\n                                square.style.boxShadow = 'inset 4px 4px 8px #a3b1c6, inset -4px -4px 8px #ffffff';\n                                break;\n                            case 'gradient':\n                                square.style.backgroundColor = 'rgba(255, 255, 255, 0.2)';\n                                square.style.border = '1px solid rgba(255, 255, 255, 0.3)';\n                                break;\n                            case 'minimal':\n                                square.style.backgroundColor = '#f5f5f5';\n                                square.style.border = '1px solid #e0e0e0';\n                                break;\n                            default:\n                                square.style.backgroundColor = '#f5f5f5';\n                                square.style.border = '1px solid #e0e0e0';\n                        }\n                    });\n                }\n                \n                \/\/ Ensure visibility immediately\n                ensureItemsVisible();\n                \n                if (animationsEnabled && !isElementorEditor) {\n                    const observer = new IntersectionObserver((entries) => {\n                        entries.forEach(entry => {\n                            if (entry.isIntersecting) {\n                                const item = entry.target;\n                                item.style.animation = 'slideInUp 0.8s ease forwards';\n                                \n                                \/\/ Animate squares with delay\n                                const squares = item.querySelectorAll('.skill-progressbar-e-square');\n                                squares.forEach((square, index) => {\n                                    setTimeout(() => {\n                                        square.style.animation = 'fillSquare 0.6s ease forwards';\n                                    }, 200 + (index * 100));\n                                });\n                            }\n                        });\n                    }, { threshold: 0.3 });\n                    \n                    const items = widget.querySelectorAll('.skill-progressbar-e-item');\n                    items.forEach(item => observer.observe(item));\n                    \n                    \/\/ Hover effects for squares\n                    const squares = widget.querySelectorAll('.skill-progressbar-e-square');\n                    squares.forEach(square => {\n                        square.addEventListener('mouseenter', function() {\n                            this.style.transform = 'scale(1.1)';\n                            this.style.boxShadow = '0 8px 25px rgba(0, 0, 0, 0.15)';\n                        });\n                        \n                        square.addEventListener('mouseleave', function() {\n                            this.style.transform = 'scale(1)';\n                            this.style.boxShadow = '';\n                        });\n                    });\n                }\n                \n                \/\/ Additional checks for frontend\n                if (!isElementorEditor) {\n                    setTimeout(ensureItemsVisible, 100);\n                    setTimeout(ensureItemsVisible, 500);\n                    setTimeout(ensureItemsVisible, 1000);\n                }\n            });\n        });\n        <\/script>\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>\u0631\u0632\u0648\u0645\u0647 \u0645\u0646 \u0633\u0648\u0627\u0628\u0642 \u06a9\u0627\u0631\u06cc \u0634\u0631\u06a9\u062a \u0698\u0627\u06a9\u062a \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 &quot;\u0628\u0627 \u0633\u0627\u0628\u0642\u0647 \u0647\u0645\u06a9\u0627\u0631\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0648\u0631\u062f\u067e\u0631\u0633\u06cc\u060c \u062a\u062c\u0631\u0628\u0647 \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0648\u0628 \u062f\u0627\u0631\u0645.&quot; \u0627\u0632 1404 \u062a\u0627 \u0628\u062d\u0627\u0644 \u0634\u0631\u06a9\u062a \u0645\u0647\u0627\u0631\u062a \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 &quot;\u062a\u062c\u0631\u0628\u0647 \u0645\u0648\u0641\u0642 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0628\u0627 \u062a\u06cc\u0645\u200c \u062f\u0631 \u0627\u062c\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627 \u0628\u0627 \u062a\u0645\u0631\u06a9\u0632 \u0628\u0631 \u0627\u0645\u0646\u06cc\u062a \u0648 \u0628\u0647\u06cc\u0646\u0647\u200c\u0633\u0627\u0632\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f.&quot; \u0627\u0632 1400 \u062a\u0627 1402 \u0633\u0648\u0627\u0628\u0642 \u062a\u062d\u0635\u06cc\u0644\u06cc \u0641\u0646\u06cc \u062d\u0631\u0641\u0647 \u0627\u06cc \u062e\u06cc\u0627\u0645 \u0645\u0642\u0637\u0639: \u062f\u06cc\u067e\u0644\u0645 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-193","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/pages\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":0,"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"wp:attachment":[{"href":"https:\/\/websavant.ir\/skill\/theme-skill\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}