.elementor-10 .elementor-element.elementor-element-499e3ad{--display:flex;--min-height:480px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-499e3ad:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-499e3ad > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://silversarv.ir/wp-content/uploads/2025/10/banner.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-10 .elementor-element.elementor-element-499e3ad.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-12b1b95{--display:flex;}.elementor-10 .elementor-element.elementor-element-2221e4a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--border-radius:50px 50px 50px 50px;--padding-top:24px;--padding-bottom:24px;--padding-left:30px;--padding-right:30px;}.elementor-10 .elementor-element.elementor-element-2221e4a:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-2221e4a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#6794ACA6;}.elementor-10 .elementor-element.elementor-element-2221e4a.e-con{--align-self:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-4d7c730 .elementor-heading-title{font-size:32px;font-weight:600;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-10 .elementor-element.elementor-element-cbaa580{text-align:center;font-size:18px;font-weight:400;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-8c7bf6a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-10 .elementor-element.elementor-element-55d135f .elementor-button{background-color:#F8F9FA;fill:#000000;color:#000000;}.elementor-10 .elementor-element.elementor-element-3312712 .elementor-button{background-color:#F8F9FA;fill:#000000;color:#000000;}.elementor-10 .elementor-element.elementor-element-10296fd{--display:flex;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:60px;--padding-right:60px;}.elementor-10 .elementor-element.elementor-element-10296fd:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-10296fd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(158deg, #4C0062 0%, #4900DD 100%);}.elementor-10 .elementor-element.elementor-element-10296fd.e-con{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-065a4b5{--display:flex;}.elementor-10 .elementor-element.elementor-element-065a4b5.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-dec7e82{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--background-transition:0.3s;}.elementor-10 .elementor-element.elementor-element-a3ffd9c{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-10 .elementor-element.elementor-element-8ad2562{width:var( --container-widget-width, 101.567% );max-width:101.567%;--container-widget-width:101.567%;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-8ad2562.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-8ad2562 img{border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-aeb3b40{--display:flex;--background-transition:0s;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-aeb3b40:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-aeb3b40 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-aeb3b40:hover{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);}.elementor-10 .elementor-element.elementor-element-f2688ca:hover{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-f2688ca{border-radius:5px 5px 5px 5px;text-align:center;}.elementor-10 .elementor-element.elementor-element-f2688ca .elementor-heading-title{font-family:"IRANSansWeb", Sans-serif;font-weight:600;color:#000000;}.elementor-10 .elementor-element.elementor-element-0c96523{column-gap:0px;text-align:center;font-family:"IRANSansWeb", Sans-serif;font-weight:400;line-height:40px;color:#000000;}.elementor-10 .elementor-element.elementor-element-b6e8037{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;}.elementor-10 .elementor-element.elementor-element-965765c{--display:flex;--border-radius:20px 20px 20px 20px;--margin-top:10px;--margin-bottom:10px;--margin-left:10px;--margin-right:10px;}.elementor-10 .elementor-element.elementor-element-965765c:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-965765c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-965765c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-34d3024{width:var( --container-widget-width, 102.913% );max-width:102.913%;--container-widget-width:102.913%;--container-widget-flex-grow:0;text-align:center;}.elementor-10 .elementor-element.elementor-element-34d3024.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-34d3024 .elementor-heading-title{font-family:"IRANSansWeb", Sans-serif;font-weight:600;color:#000000;}.elementor-10 .elementor-element.elementor-element-c3ebff6{width:100%;max-width:100%;text-align:center;font-family:"IRANSansWeb", Sans-serif;font-weight:400;line-height:40px;color:#000000;}.elementor-10 .elementor-element.elementor-element-4ef6ae3{--display:flex;}.elementor-10 .elementor-element.elementor-element-1ef2109 img{border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-4dc99fe{text-align:center;}.elementor-10 .elementor-element.elementor-element-4dc99fe .elementor-heading-title{font-size:30px;font-weight:600;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-ef904bd{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-a681ead{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-a681ead:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-a681ead > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-image-box .elementor-image-box-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-image-box:has(:hover) .elementor-image-box-title,
					 .elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-10 .elementor-element.elementor-element-ebfbf6e{width:var( --container-widget-width, 100.526% );max-width:100.526%;--container-widget-width:100.526%;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-ebfbf6e.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-ebfbf6e .elementor-image-box-wrapper{text-align:center;}.elementor-10 .elementor-element.elementor-element-ebfbf6e.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-10 .elementor-element.elementor-element-ebfbf6e.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-10 .elementor-element.elementor-element-ebfbf6e.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-10 .elementor-element.elementor-element-ebfbf6e .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-10 .elementor-element.elementor-element-ebfbf6e .elementor-image-box-img img{border-radius:20px;transition-duration:0.3s;}.elementor-10 .elementor-element.elementor-element-ebfbf6e .elementor-image-box-title{font-family:"IRANSansWeb", Sans-serif;font-size:17px;font-weight:600;color:#03273C;}.elementor-10 .elementor-element.elementor-element-ebfbf6e:has(:hover) .elementor-image-box-title,
					 .elementor-10 .elementor-element.elementor-element-ebfbf6e:has(:focus) .elementor-image-box-title{color:#010101;}.elementor-10 .elementor-element.elementor-element-ebfbf6e .elementor-image-box-description{font-family:"IRANSansWeb", Sans-serif;font-size:14px;font-weight:400;color:#212529;}.elementor-10 .elementor-element.elementor-element-da8e312 .elementor-button{background-color:#007BFF;fill:#FFFFFF;color:#FFFFFF;padding:12px 20px 12px 20px;}.elementor-10 .elementor-element.elementor-element-7b4c7bf{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-7b4c7bf:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-7b4c7bf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-ef0ea89{width:var( --container-widget-width, 100.526% );max-width:100.526%;--container-widget-width:100.526%;--container-widget-flex-grow:0;}.elementor-10 .elementor-element.elementor-element-ef0ea89.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-ef0ea89 .elementor-image-box-wrapper{text-align:center;}.elementor-10 .elementor-element.elementor-element-ef0ea89.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-10 .elementor-element.elementor-element-ef0ea89.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-10 .elementor-element.elementor-element-ef0ea89.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-10 .elementor-element.elementor-element-ef0ea89 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-10 .elementor-element.elementor-element-ef0ea89 .elementor-image-box-img img{border-radius:20px;transition-duration:0.3s;}.elementor-10 .elementor-element.elementor-element-ef0ea89 .elementor-image-box-title{font-family:"IRANSansWeb", Sans-serif;font-size:17px;font-weight:600;color:#03273C;}.elementor-10 .elementor-element.elementor-element-ef0ea89:has(:hover) .elementor-image-box-title,
					 .elementor-10 .elementor-element.elementor-element-ef0ea89:has(:focus) .elementor-image-box-title{color:#010101;}.elementor-10 .elementor-element.elementor-element-ef0ea89 .elementor-image-box-description{font-family:"IRANSansWeb", Sans-serif;font-size:14px;font-weight:400;color:#212529;}.elementor-10 .elementor-element.elementor-element-770a0bc .elementor-button{background-color:#007BFF;fill:#FFFFFF;color:#FFFFFF;padding:12px 20px 12px 20px;}.elementor-10 .elementor-element.elementor-element-770a0bc{margin:20px 20px calc(var(--kit-widget-spacing, 0px) + 20px) 20px;}.elementor-10 .elementor-element.elementor-element-d35fa7f{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-d35fa7f:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-d35fa7f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-df81fbf .elementor-image-box-wrapper{text-align:center;}.elementor-10 .elementor-element.elementor-element-df81fbf.elementor-position-right .elementor-image-box-img{margin-left:15px;}.elementor-10 .elementor-element.elementor-element-df81fbf.elementor-position-left .elementor-image-box-img{margin-right:15px;}.elementor-10 .elementor-element.elementor-element-df81fbf.elementor-position-top .elementor-image-box-img{margin-bottom:15px;}.elementor-10 .elementor-element.elementor-element-df81fbf .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-10 .elementor-element.elementor-element-df81fbf .elementor-image-box-img img{border-radius:20px;transition-duration:0.3s;}.elementor-10 .elementor-element.elementor-element-df81fbf .elementor-image-box-title{font-family:"IRANSansWeb", Sans-serif;font-size:17px;font-weight:600;color:#03273C;}.elementor-10 .elementor-element.elementor-element-df81fbf:has(:hover) .elementor-image-box-title,
					 .elementor-10 .elementor-element.elementor-element-df81fbf:has(:focus) .elementor-image-box-title{color:#010101;}.elementor-10 .elementor-element.elementor-element-df81fbf .elementor-image-box-description{font-family:"IRANSansWeb", Sans-serif;font-size:14px;font-weight:400;color:#212529;}.elementor-10 .elementor-element.elementor-element-dea47fa .elementor-button{background-color:#007BFF;fill:#FFFFFF;color:#FFFFFF;padding:12px 20px 12px 20px;}.elementor-10 .elementor-element.elementor-element-ad7ff9a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-740398f{--display:flex;}.elementor-10 .elementor-element.elementor-element-3363de6 .elementor-heading-title{font-size:25px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-5775d22 .elementor-heading-title{font-size:16px;font-weight:400;color:#032133;}.elementor-10 .elementor-element.elementor-element-d246208{--display:flex;}.elementor-10 .elementor-element.elementor-element-6d96f77{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-6d96f77:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-6d96f77 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-6d96f77:hover{border-style:solid;border-width:-1px -1px -1px -1px;--border-top-width:-1px;--border-right-width:-1px;--border-bottom-width:-1px;--border-left-width:-1px;border-color:#4900D6;--border-color:#4900D6;}.elementor-10 .elementor-element.elementor-element-5624bd1{text-align:left;}.elementor-10 .elementor-element.elementor-element-5624bd1 img{width:35%;}.elementor-10 .elementor-element.elementor-element-14b0686 .elementor-heading-title{font-size:22px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-0324a47 .elementor-heading-title{font-size:14px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-d6e4803{--display:flex;}.elementor-10 .elementor-element.elementor-element-b583f33{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-b583f33:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-b583f33 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-b583f33:hover{border-style:solid;border-width:-1px -1px -1px -1px;--border-top-width:-1px;--border-right-width:-1px;--border-bottom-width:-1px;--border-left-width:-1px;border-color:#4900D6;--border-color:#4900D6;}.elementor-10 .elementor-element.elementor-element-192eb4f{text-align:left;}.elementor-10 .elementor-element.elementor-element-192eb4f img{width:35%;}.elementor-10 .elementor-element.elementor-element-3084ab3 .elementor-heading-title{font-size:22px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-c8ee57c .elementor-heading-title{font-size:14px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-ae9e949{--display:flex;}.elementor-10 .elementor-element.elementor-element-cce3dbe{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-cce3dbe:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-cce3dbe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-cce3dbe:hover{border-style:solid;border-width:-1px -1px -1px -1px;--border-top-width:-1px;--border-right-width:-1px;--border-bottom-width:-1px;--border-left-width:-1px;border-color:#4900D6;--border-color:#4900D6;}.elementor-10 .elementor-element.elementor-element-b6323fa{text-align:left;}.elementor-10 .elementor-element.elementor-element-b6323fa img{width:54%;}.elementor-10 .elementor-element.elementor-element-eb20032 .elementor-heading-title{font-size:22px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-9ac9478 .elementor-heading-title{font-size:14px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-f518874{--display:flex;}.elementor-10 .elementor-element.elementor-element-6eed52f{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-6eed52f:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-6eed52f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-6eed52f:hover{border-style:solid;border-width:-1px -1px -1px -1px;--border-top-width:-1px;--border-right-width:-1px;--border-bottom-width:-1px;--border-left-width:-1px;border-color:#4900D6;--border-color:#4900D6;}.elementor-10 .elementor-element.elementor-element-dc79ff8{text-align:left;}.elementor-10 .elementor-element.elementor-element-dc79ff8 img{width:28%;}.elementor-10 .elementor-element.elementor-element-cb893cf .elementor-heading-title{font-size:22px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-ad95f57 .elementor-heading-title{font-size:14px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-e4cc623{--display:flex;}.elementor-10 .elementor-element.elementor-element-ed9d9ae{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-ed9d9ae:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-ed9d9ae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-ed9d9ae:hover{border-style:solid;border-width:-1px -1px -1px -1px;--border-top-width:-1px;--border-right-width:-1px;--border-bottom-width:-1px;--border-left-width:-1px;border-color:#4900D6;--border-color:#4900D6;}.elementor-10 .elementor-element.elementor-element-24edec5{text-align:left;}.elementor-10 .elementor-element.elementor-element-24edec5 img{width:35%;}.elementor-10 .elementor-element.elementor-element-0a1db78 .elementor-heading-title{font-size:22px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-2e18660 .elementor-heading-title{font-size:14px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-b3e3d3a{--display:flex;}.elementor-10 .elementor-element.elementor-element-cef1998{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-cef1998:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-cef1998 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-cef1998:hover{border-style:solid;border-width:-1px -1px -1px -1px;--border-top-width:-1px;--border-right-width:-1px;--border-bottom-width:-1px;--border-left-width:-1px;border-color:#4900D6;--border-color:#4900D6;}.elementor-10 .elementor-element.elementor-element-802e6df{text-align:left;}.elementor-10 .elementor-element.elementor-element-802e6df img{width:35%;}.elementor-10 .elementor-element.elementor-element-ff1fb76 .elementor-heading-title{font-size:22px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-d3dc615 .elementor-heading-title{font-size:14px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-d24e499{--display:flex;}.elementor-10 .elementor-element.elementor-element-79f2047{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-79f2047:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-79f2047 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-79f2047:hover{border-style:solid;border-width:-1px -1px -1px -1px;--border-top-width:-1px;--border-right-width:-1px;--border-bottom-width:-1px;--border-left-width:-1px;border-color:#4900D6;--border-color:#4900D6;}.elementor-10 .elementor-element.elementor-element-9d0f626{text-align:left;}.elementor-10 .elementor-element.elementor-element-9d0f626 img{width:43%;}.elementor-10 .elementor-element.elementor-element-5472496 .elementor-heading-title{font-size:22px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-c6e3c81 .elementor-heading-title{font-size:14px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-5d2b118{--display:flex;}.elementor-10 .elementor-element.elementor-element-a4c77e9{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-a4c77e9:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-a4c77e9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-0fc6bec{width:var( --container-widget-width, 104.559% );max-width:104.559%;--container-widget-width:104.559%;--container-widget-flex-grow:0;text-align:left;}.elementor-10 .elementor-element.elementor-element-0fc6bec.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-0fc6bec img{width:43%;}.elementor-10 .elementor-element.elementor-element-c07920c .elementor-heading-title{font-family:"IRANSansWeb", Sans-serif;font-weight:600;color:#0C0C0C;}.elementor-10 .elementor-element.elementor-element-d27fd85 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-fc8fcfb{--display:flex;}.elementor-10 .elementor-element.elementor-element-3bc3038{--display:flex;--overlay-opacity:0.5;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-3bc3038:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-3bc3038 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-3bc3038::before, .elementor-10 .elementor-element.elementor-element-3bc3038 > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-3bc3038 > .e-con-inner > .elementor-background-video-container::before, .elementor-10 .elementor-element.elementor-element-3bc3038 > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-3bc3038 > .e-con-inner > .elementor-background-slideshow::before, .elementor-10 .elementor-element.elementor-element-3bc3038 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#FFFFFF;--background-overlay:'';}.elementor-10 .elementor-element.elementor-element-3bc3038.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-10 .elementor-element.elementor-element-ea79aac{text-align:left;}.elementor-10 .elementor-element.elementor-element-ea79aac img{width:62%;}.elementor-10 .elementor-element.elementor-element-84d4c73 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-3180cb2 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-72415e0{--display:flex;}.elementor-10 .elementor-element.elementor-element-7901225{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-7901225:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-7901225 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;background-image:url("https://silversarv.ir/wp-content/uploads/2025/11/لوگو-بیمه-سینا.png");}.elementor-10 .elementor-element.elementor-element-60cc27c{text-align:left;}.elementor-10 .elementor-element.elementor-element-60cc27c img{width:45%;}.elementor-10 .elementor-element.elementor-element-0bf9259 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-93fa7a5 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-cacefb2{--display:flex;}.elementor-10 .elementor-element.elementor-element-c27ef2e{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-c27ef2e:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-c27ef2e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-409fd84{text-align:left;}.elementor-10 .elementor-element.elementor-element-409fd84 img{width:46%;}.elementor-10 .elementor-element.elementor-element-d773b87 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-3824ef0 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-747b783{--display:flex;}.elementor-10 .elementor-element.elementor-element-b1b2b93{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-b1b2b93:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-b1b2b93 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-9f0be14{text-align:left;}.elementor-10 .elementor-element.elementor-element-9f0be14 img{width:47%;}.elementor-10 .elementor-element.elementor-element-7a958dd .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-f5f57e4 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-ce0440d{--display:flex;}.elementor-10 .elementor-element.elementor-element-e58dde3{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-e58dde3:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-e58dde3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-e28eb33{text-align:left;}.elementor-10 .elementor-element.elementor-element-e28eb33 img{width:46%;}.elementor-10 .elementor-element.elementor-element-5626f2f .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-9daf02d .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-1aa3390{--display:flex;}.elementor-10 .elementor-element.elementor-element-240288f{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-240288f:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-240288f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-7ce1750{text-align:left;}.elementor-10 .elementor-element.elementor-element-7ce1750 img{width:44%;}.elementor-10 .elementor-element.elementor-element-bcde47d .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-a2e00b2 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-ddee667{--display:flex;}.elementor-10 .elementor-element.elementor-element-14d3569{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-14d3569:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-14d3569 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-dddb042{text-align:center;}.elementor-10 .elementor-element.elementor-element-dddb042 img{width:84%;}.elementor-10 .elementor-element.elementor-element-ed162b0 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-2263ba9 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-3a6cdd8{--display:flex;}.elementor-10 .elementor-element.elementor-element-8b0cbfc{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-8b0cbfc:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-8b0cbfc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-0fe63bf{text-align:left;}.elementor-10 .elementor-element.elementor-element-0fe63bf img{width:39%;}.elementor-10 .elementor-element.elementor-element-06490a0 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-f8d1358 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-88255ae{--display:flex;}.elementor-10 .elementor-element.elementor-element-3a2a240{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-3a2a240:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-3a2a240 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-e9c20c1{text-align:left;}.elementor-10 .elementor-element.elementor-element-e9c20c1 img{width:51%;}.elementor-10 .elementor-element.elementor-element-4ddb3fc .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-2a5aa7e .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-c99647c{--display:flex;}.elementor-10 .elementor-element.elementor-element-c732024{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-c732024:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-c732024 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-69cf029{text-align:left;}.elementor-10 .elementor-element.elementor-element-69cf029 img{width:52%;}.elementor-10 .elementor-element.elementor-element-7143864 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-4aaf36a .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-e3c85f8{--display:flex;}.elementor-10 .elementor-element.elementor-element-ed1aed0{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-ed1aed0:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-ed1aed0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-c88e56d{text-align:left;}.elementor-10 .elementor-element.elementor-element-c88e56d img{width:53%;}.elementor-10 .elementor-element.elementor-element-c61ae5f .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-08448fd .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-b8a2f1a{--display:flex;}.elementor-10 .elementor-element.elementor-element-caeb8f1{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-caeb8f1:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-caeb8f1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-960f85f{text-align:left;}.elementor-10 .elementor-element.elementor-element-960f85f img{width:52%;}.elementor-10 .elementor-element.elementor-element-376a828 .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-302e00c .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-9ad242f{--display:flex;}.elementor-10 .elementor-element.elementor-element-f263aac{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-f263aac:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-f263aac > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-92c906d{text-align:left;}.elementor-10 .elementor-element.elementor-element-92c906d img{width:95%;}.elementor-10 .elementor-element.elementor-element-b3e4b6b .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-026647b .elementor-heading-title{color:#000000;}.elementor-10 .elementor-element.elementor-element-b8fdab3{--display:flex;}.elementor-10 .elementor-element.elementor-element-011391b{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-10 .elementor-element.elementor-element-011391b:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-011391b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-705f021{text-align:left;}.elementor-10 .elementor-element.elementor-element-705f021 img{width:22%;}.elementor-10 .elementor-element.elementor-element-ad235c1 .elementor-heading-title{font-family:"IRANSansWeb", Sans-serif;font-weight:600;line-height:32px;-webkit-text-stroke-width:0px;stroke-width:0px;-webkit-text-stroke-color:#000;stroke:#000;color:#000000;}.elementor-10 .elementor-element.elementor-element-e0593bb .elementor-heading-title{font-family:"IRANSansWeb", Sans-serif;font-weight:600;line-height:25px;color:#000000;}.elementor-10 .elementor-element.elementor-element-b66b00c{--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:-15px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:-15px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-size:24px;--e-n-carousel-arrow-normal-color:#695B5B;--e-n-carousel-arrow-hover-color:var( --e-global-color-secondary );--e-n-carousel-swiper-pagination-size:10px;--e-n-carousel-dots-normal-color:#869791;}.elementor-10 .elementor-element.elementor-element-b66b00c :is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {background-color:#FFFFFF;box-shadow:0px 24px 42px 0px rgba(0, 0, 0, 0.05);padding:25px 10px 25px 10px;}.elementor-10 .elementor-element.elementor-element-013245c{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:space-between;--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-9150115 .elementor-button{background-color:#ED1846;font-family:"IRANSansWeb", Sans-serif;font-weight:500;fill:#FFFEFE;color:#FFFEFE;border-radius:6px 6px 6px 6px;}.elementor-10 .elementor-element.elementor-element-edb9931 .elementor-heading-title{font-size:30px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-1f55f72{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-edd53ec{--display:flex;--border-radius:50px 50px 50px 50px;--padding-top:50px;--padding-bottom:50px;--padding-left:60px;--padding-right:60px;}.elementor-10 .elementor-element.elementor-element-edd53ec:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-edd53ec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(158deg, #4C0062 0%, #4900DD 100%);}.elementor-10 .elementor-element.elementor-element-edd53ec.e-con{--align-self:center;}.elementor-10 .elementor-element.elementor-element-3a853c6 .elementor-heading-title{font-size:24px;font-weight:600;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-9f12a6e{text-align:right;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-906c84a{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;}.elementor-10 .elementor-element.elementor-element-13513fb .elementor-button{background-color:#F8F9FA;fill:#000000;color:#000000;}.elementor-10 .elementor-element.elementor-element-0797e30 .elementor-button{background-color:#F8F9FA;fill:#000000;color:#000000;}.elementor-10 .elementor-element.elementor-element-00228bf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-74fc621{--display:flex;--border-radius:15px 15px 15px 15px;box-shadow:0px 24px 64px 0px rgba(0, 0, 0, 0.05);--padding-top:20px;--padding-bottom:80px;--padding-left:20px;--padding-right:20px;}.elementor-10 .elementor-element.elementor-element-74fc621:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-74fc621 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-74fc621.e-con{--align-self:center;}.elementor-10 .elementor-element.elementor-element-8859d03{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:20px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-8859d03:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-8859d03 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#D1ECF1;}.elementor-10 .elementor-element.elementor-element-ab697a3 .elementor-heading-title{font-size:30px;font-weight:400;color:#032133;}.elementor-10 .elementor-element.elementor-element-6dbdfb3{text-align:center;font-size:18px;font-weight:600;color:#000000;}.elementor-10 .elementor-element.elementor-element-f735bda{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-e341faa{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-e341faa:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-e341faa > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-10 .elementor-element.elementor-element-35da5fa .elementor-heading-title{font-size:16px;font-weight:400;color:#032133;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title,
					 .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-10 .elementor-element.elementor-element-708bba5 .elementor-icon-box-wrapper{align-items:start;text-align:right;}.elementor-10 .elementor-element.elementor-element-708bba5{--icon-box-icon-margin:15px;}.elementor-10 .elementor-element.elementor-element-708bba5 .elementor-icon-box-title{margin-block-end:0px;color:#000000;}.elementor-10 .elementor-element.elementor-element-708bba5.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-10 .elementor-element.elementor-element-708bba5.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-708bba5.elementor-view-default .elementor-icon{fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-10 .elementor-element.elementor-element-708bba5 .elementor-icon{font-size:24px;}.elementor-10 .elementor-element.elementor-element-708bba5 .elementor-icon-box-title, .elementor-10 .elementor-element.elementor-element-708bba5 .elementor-icon-box-title a{font-family:"IRANSansWeb", Sans-serif;font-weight:600;}.elementor-10 .elementor-element.elementor-element-708bba5 .elementor-icon-box-description{font-family:"IRANSansWeb", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-55359b3 .elementor-button{background-color:#61CE7000;fill:#6C757D;color:#6C757D;border-style:solid;border-width:2px 2px 2px 2px;border-color:#6C757D;padding:14px 30px 14px 30px;}.elementor-10 .elementor-element.elementor-element-55359b3 .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-55359b3 .elementor-button:focus{background-color:#6C757D;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-55359b3 .elementor-button-content-wrapper{flex-direction:row;}.elementor-10 .elementor-element.elementor-element-55359b3 .elementor-button:hover svg, .elementor-10 .elementor-element.elementor-element-55359b3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-b438cf0 .elementor-button{background-color:#61CE7000;fill:#6C757D;color:#6C757D;border-style:solid;border-width:2px 2px 2px 2px;border-color:#6C757D;padding:14px 35px 14px 35px;}.elementor-10 .elementor-element.elementor-element-b438cf0 .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-b438cf0 .elementor-button:focus{background-color:#6C757D;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-b438cf0 .elementor-button-content-wrapper{flex-direction:row;}.elementor-10 .elementor-element.elementor-element-b438cf0 .elementor-button:hover svg, .elementor-10 .elementor-element.elementor-element-b438cf0 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-ba81c64{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-ba81c64:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-ba81c64 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-10 .elementor-element.elementor-element-2285e71 .elementor-heading-title{font-size:16px;font-weight:400;color:#032133;}.elementor-10 .elementor-element.elementor-element-2828016 .elementor-icon-box-wrapper{align-items:start;text-align:right;}.elementor-10 .elementor-element.elementor-element-2828016{--icon-box-icon-margin:15px;}.elementor-10 .elementor-element.elementor-element-2828016 .elementor-icon-box-title{margin-block-end:0px;color:#000000;}.elementor-10 .elementor-element.elementor-element-2828016.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-10 .elementor-element.elementor-element-2828016.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-2828016.elementor-view-default .elementor-icon{fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-10 .elementor-element.elementor-element-2828016 .elementor-icon{font-size:24px;}.elementor-10 .elementor-element.elementor-element-2828016 .elementor-icon-box-title, .elementor-10 .elementor-element.elementor-element-2828016 .elementor-icon-box-title a{font-family:"IRANSansWeb", Sans-serif;font-weight:600;}.elementor-10 .elementor-element.elementor-element-2828016 .elementor-icon-box-description{font-family:"IRANSansWeb", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-10af323 .elementor-button{background-color:#61CE7000;fill:#007BFF;color:#007BFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#007BFF;}.elementor-10 .elementor-element.elementor-element-10af323 .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-10af323 .elementor-button:focus{background-color:#007BFF;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-10af323 .elementor-button:hover svg, .elementor-10 .elementor-element.elementor-element-10af323 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-c49b29a .elementor-button{background-color:#61CE7000;fill:#007BFF;color:#007BFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#007BFF;}.elementor-10 .elementor-element.elementor-element-c49b29a .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-c49b29a .elementor-button:focus{background-color:#007BFF;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-c49b29a .elementor-button:hover svg, .elementor-10 .elementor-element.elementor-element-c49b29a .elementor-button:focus svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-72b974e .elementor-button{background-color:#61CE7000;fill:#007BFF;color:#007BFF;border-style:solid;border-width:2px 2px 2px 2px;border-color:#007BFF;}.elementor-10 .elementor-element.elementor-element-72b974e .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-72b974e .elementor-button:focus{background-color:#007BFF;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-72b974e .elementor-button:hover svg, .elementor-10 .elementor-element.elementor-element-72b974e .elementor-button:focus svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-a5a11de{--display:flex;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-a5a11de:not(.elementor-motion-effects-element-type-background), .elementor-10 .elementor-element.elementor-element-a5a11de > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;}.elementor-10 .elementor-element.elementor-element-0a0ad98 .elementor-heading-title{font-size:16px;font-weight:400;color:#032133;}.elementor-10 .elementor-element.elementor-element-020c615 .elementor-icon-box-wrapper{align-items:start;text-align:right;}.elementor-10 .elementor-element.elementor-element-020c615{--icon-box-icon-margin:15px;}.elementor-10 .elementor-element.elementor-element-020c615 .elementor-icon-box-title{margin-block-end:0px;color:#000000;}.elementor-10 .elementor-element.elementor-element-020c615.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-10 .elementor-element.elementor-element-020c615.elementor-view-framed .elementor-icon, .elementor-10 .elementor-element.elementor-element-020c615.elementor-view-default .elementor-icon{fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-10 .elementor-element.elementor-element-020c615 .elementor-icon{font-size:24px;}.elementor-10 .elementor-element.elementor-element-020c615 .elementor-icon-box-title, .elementor-10 .elementor-element.elementor-element-020c615 .elementor-icon-box-title a{font-family:"IRANSansWeb", Sans-serif;font-weight:600;}.elementor-10 .elementor-element.elementor-element-020c615 .elementor-icon-box-description{font-family:"IRANSansWeb", Sans-serif;font-size:14px;font-weight:400;}.elementor-10 .elementor-element.elementor-element-bca90d6 .elementor-button{background-color:#61CE7000;fill:#6C757D;color:#6C757D;border-style:solid;border-width:2px 2px 2px 2px;border-color:#6C757D;}.elementor-10 .elementor-element.elementor-element-bca90d6 .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-bca90d6 .elementor-button:focus{background-color:#6C757D;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-bca90d6 .elementor-button-content-wrapper{flex-direction:row;}.elementor-10 .elementor-element.elementor-element-bca90d6 .elementor-button:hover svg, .elementor-10 .elementor-element.elementor-element-bca90d6 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-96cd425 .elementor-button{background-color:#61CE7000;fill:#6C757D;color:#6C757D;border-style:solid;border-width:2px 2px 2px 2px;border-color:#6C757D;padding:12px 30px 12px 30px;}.elementor-10 .elementor-element.elementor-element-96cd425 .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-96cd425 .elementor-button:focus{background-color:#6C757D;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-96cd425 .elementor-button-content-wrapper{flex-direction:row;}.elementor-10 .elementor-element.elementor-element-96cd425 .elementor-button:hover svg, .elementor-10 .elementor-element.elementor-element-96cd425 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-5cd8286 .elementor-button{background-color:#61CE7000;fill:#6C757D;color:#6C757D;border-style:solid;border-width:2px 2px 2px 2px;border-color:#6C757D;padding:12px 35px 12px 35px;}.elementor-10 .elementor-element.elementor-element-5cd8286 .elementor-button:hover, .elementor-10 .elementor-element.elementor-element-5cd8286 .elementor-button:focus{background-color:#6C757D;color:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-5cd8286 .elementor-button-content-wrapper{flex-direction:row;}.elementor-10 .elementor-element.elementor-element-5cd8286 .elementor-button:hover svg, .elementor-10 .elementor-element.elementor-element-5cd8286 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-10 .elementor-element.elementor-element-9e083f1{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:space-between;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-10 .elementor-element.elementor-element-cc37b58{--display:flex;--justify-content:flex-end;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-e73adb6 .elementor-button{background-color:#ED1846;fill:#FFFEFE;color:#FFFEFE;border-radius:6px 6px 6px 6px;}.elementor-10 .elementor-element.elementor-element-dc97bbe{--display:flex;}.elementor-10 .elementor-element.elementor-element-93a82b5 .elementor-heading-title{font-size:25px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-b9f9e5e .elementor-heading-title{font-size:16px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-65b1744{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-10 .elementor-element.elementor-element-8e92c2c{--grid-columns:3;}.elementor-10 .elementor-element.elementor-element-e596b53{width:var( --container-widget-width, 80% );max-width:80%;padding:31px 31px 31px 31px;--container-widget-width:80%;--container-widget-flex-grow:0;border-radius:10px 10px 10px 10px;box-shadow:0px 0px 6px 0px rgba(0,0,0,0.5);text-align:justify;}.elementor-10 .elementor-element.elementor-element-e596b53.elementor-element{--align-self:center;}.elementor-10 .elementor-element.elementor-element-b0bebfb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-f3d91b9 .elementor-heading-title{font-size:25px;font-weight:600;color:#032133;}.elementor-10 .elementor-element.elementor-element-3ab6669{text-align:right;font-size:16px;font-weight:400;color:#03273C;}.elementor-10 .elementor-element.elementor-element-8dbfd82{--display:flex;}.elementor-10 .elementor-element.elementor-element-abf275e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-10 .elementor-element.elementor-element-40928e5{font-family:"IRANSansWeb", Sans-serif;font-weight:400;}.elementor-10 .elementor-element.elementor-element-587c81d{--display:flex;}.elementor-10 .elementor-element.elementor-element-9b39f69{--display:flex;}.elementor-10 .elementor-element.elementor-element-c5684d8{--display:flex;}.elementor-10 .elementor-element.elementor-element-8f3cddf{--display:flex;}.elementor-10 .elementor-element.elementor-element-811c8b2{--display:flex;}.elementor-10 .elementor-element.elementor-element-616fe3e{--display:flex;}.elementor-10 .elementor-element.elementor-element-8cd0f1b{--display:flex;}.elementor-10 .elementor-element.elementor-element-145e104{--display:flex;}.elementor-10 .elementor-element.elementor-element-3cd1208{--n-accordion-title-font-size:1rem;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:15px;--n-accordion-item-title-distance-from-content:0px;--n-accordion-border-radius:15px 15px 0px 0px;--n-accordion-icon-size:15px;}.elementor-10 .elementor-element.elementor-element-3cd1208 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{background-color:#F2F2F2;}:where( .elementor-10 .elementor-element.elementor-element-3cd1208 > .e-n-accordion > .e-n-accordion-item ) > .e-con{background-color:#F5F6F8;--border-radius:0px 0px 15px 15px;}.elementor-10 .elementor-element.elementor-element-3cd1208 {--n-accordion-padding:15px 15px 15px 15px;}body.elementor-page-10:not(.elementor-motion-effects-element-type-background), body.elementor-page-10 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8FAFD;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-10 .elementor-element.elementor-element-b66b00c{--e-n-carousel-swiper-slides-to-display:2;}.elementor-10 .elementor-element.elementor-element-8e92c2c{--grid-columns:2;}}@media(max-width:767px){.elementor-10 .elementor-element.elementor-element-499e3ad{--width:378.25px;}.elementor-10 .elementor-element.elementor-element-4d7c730{text-align:center;}.elementor-10 .elementor-element.elementor-element-4d7c730 .elementor-heading-title{font-size:20px;line-height:1.5em;}.elementor-10 .elementor-element.elementor-element-cbaa580{font-size:14px;}.elementor-10 .elementor-element.elementor-element-10296fd{--width:374.333px;--padding-top:40px;--padding-bottom:40px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-f2688ca .elementor-heading-title{line-height:1.3em;}.elementor-10 .elementor-element.elementor-element-965765c{--width:290px;}.elementor-10 .elementor-element.elementor-element-34d3024 .elementor-heading-title{font-size:22px;line-height:1.2em;letter-spacing:-0.9px;}.elementor-10 .elementor-element.elementor-element-4dc99fe .elementor-heading-title{line-height:1.4em;}.elementor-10 .elementor-element.elementor-element-ebfbf6e .elementor-image-box-img{margin-bottom:15px;}.elementor-10 .elementor-element.elementor-element-ef0ea89 .elementor-image-box-img{margin-bottom:15px;}.elementor-10 .elementor-element.elementor-element-df81fbf .elementor-image-box-img{margin-bottom:15px;}.elementor-10 .elementor-element.elementor-element-3363de6 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-5775d22 .elementor-heading-title{font-size:14px;line-height:1.5em;}.elementor-10 .elementor-element.elementor-element-d246208{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-14b0686 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-0324a47 .elementor-heading-title{font-size:14px;}.elementor-10 .elementor-element.elementor-element-d6e4803{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-3084ab3 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-c8ee57c .elementor-heading-title{font-size:14px;}.elementor-10 .elementor-element.elementor-element-ae9e949{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-eb20032 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-9ac9478 .elementor-heading-title{font-size:14px;}.elementor-10 .elementor-element.elementor-element-f518874{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-cb893cf .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-ad95f57 .elementor-heading-title{font-size:14px;}.elementor-10 .elementor-element.elementor-element-e4cc623{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-0a1db78 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-2e18660 .elementor-heading-title{font-size:14px;}.elementor-10 .elementor-element.elementor-element-b3e3d3a{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-ff1fb76 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-d3dc615 .elementor-heading-title{font-size:14px;}.elementor-10 .elementor-element.elementor-element-d24e499{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-5472496 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-c6e3c81 .elementor-heading-title{font-size:14px;}.elementor-10 .elementor-element.elementor-element-b66b00c{--e-n-carousel-swiper-slides-to-display:1;}.elementor-10 .elementor-element.elementor-element-013245c{--justify-content:center;}.elementor-10 .elementor-element.elementor-element-9150115 .elementor-button{font-size:13px;}.elementor-10 .elementor-element.elementor-element-edb9931{text-align:right;}.elementor-10 .elementor-element.elementor-element-edb9931 .elementor-heading-title{font-size:18px;}.elementor-10 .elementor-element.elementor-element-edd53ec{--border-radius:12px 12px 12px 12px;--padding-top:30px;--padding-bottom:30px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-906c84a{--justify-content:flex-start;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-10 .elementor-element.elementor-element-00228bf{--margin-top:20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-ab697a3 .elementor-heading-title{line-height:1.3em;}.elementor-10 .elementor-element.elementor-element-6dbdfb3{text-align:center;font-size:14px;line-height:1.5em;}.elementor-10 .elementor-element.elementor-element-f735bda{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10 .elementor-element.elementor-element-93a82b5 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-b9f9e5e .elementor-heading-title{font-size:14px;line-height:1.5em;}.elementor-10 .elementor-element.elementor-element-65b1744{--margin-top:30px;--margin-bottom:30px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-10 .elementor-element.elementor-element-8e92c2c{--grid-columns:1;}.elementor-10 .elementor-element.elementor-element-b0bebfb{--padding-top:40px;--padding-bottom:0px;--padding-left:15px;--padding-right:15px;}.elementor-10 .elementor-element.elementor-element-f3d91b9 .elementor-heading-title{font-size:20px;}.elementor-10 .elementor-element.elementor-element-3ab6669{font-size:14px;}.elementor-10 .elementor-element.elementor-element-40928e5{font-size:14px;}.elementor-10 .elementor-element.elementor-element-3cd1208{--n-accordion-title-font-size:14px;}:where( .elementor-10 .elementor-element.elementor-element-3cd1208 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{line-height:1.5em;}}@media(min-width:768px){.elementor-10 .elementor-element.elementor-element-12b1b95{--content-width:1140px;}.elementor-10 .elementor-element.elementor-element-2221e4a{--width:72%;}.elementor-10 .elementor-element.elementor-element-10296fd{--width:100%;}.elementor-10 .elementor-element.elementor-element-065a4b5{--content-width:1600px;}.elementor-10 .elementor-element.elementor-element-965765c{--width:51.429%;}.elementor-10 .elementor-element.elementor-element-3bc3038{--width:93.074%;}.elementor-10 .elementor-element.elementor-element-edd53ec{--width:100%;}.elementor-10 .elementor-element.elementor-element-74fc621{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6d96f77 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b583f33 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cce3dbe *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6eed52f *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ed9d9ae *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-cef1998 *//*
  Main container setup
  - Position: relative for absolute positioning of circles
  - Overflow: hidden to clip the circles
*/
.hover-effect-container {
  position: relative;
  overflow: hidden;
  /* اضافه کردن یک سایز برای مثال */
  /* width: 200px; */
  /* height: 200px; */
  /* background: none;  */
}

/* ----------------- Initial State (Default - Hidden) ----------------- */
/* تعریف اولیه تمام لایه‌ها برای تنظیم ترنزیشن و محتوا */

/* بزرگ‌ترین دایره - در عقب */
.hover-effect-container::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.12) 0%,
    transparent 70%);
  z-index: 0;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.4s ease-out; /* ترنزیشن برای ظهور/ناپدید شدن روان */
}

/* دایره متوسط - وسط */
.hover-effect-container::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.22) 0%,
    transparent 70%);
  z-index: 1;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.3s ease-out;
}

/* دایره سوم - کوچک‌تر و جلوتر (عنصر فرزند) */
.hover-effect-container .circle-small-layer {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(103, 80, 252, 0.35) 0%,
    transparent 70%);
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* مخفی در حالت عادی */
  transition: opacity 0.2s ease-out;
}

/* ----------------- Hover State (Visible) ----------------- */
/* در حالت هاور، opacity را به 1 تغییر دهید تا ظاهر شوند */

.hover-effect-container:hover::before,
.hover-effect-container:hover::after,
.hover-effect-container:hover .circle-small-layer {
  opacity: 1; /* نمایش در حالت هاور */
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-55359b3 */.elementor-button-icon svg {
    width: 24px !important;
    height: 24px !important;
    display: block;
    margin-top: -5px
}/* End custom CSS */