.elementor-13 .elementor-element.elementor-element-9cc0029:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-9cc0029 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FF5050 0%, #FFFFFF 100%);}.elementor-13 .elementor-element.elementor-element-9cc0029{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:40px 0px 40px 0px;}.elementor-13 .elementor-element.elementor-element-9cc0029 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-13 .elementor-element.elementor-element-89d5f8e > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-13 .elementor-element.elementor-element-cb16f24{text-align:center;}.elementor-13 .elementor-element.elementor-element-cfde02c .wd-button-wrapper a{background-color:var( --e-global-color-6d63f5e3 );border-color:var( --e-global-color-6d63f5e3 );}.elementor-13 .elementor-element.elementor-element-cfde02c .wd-btn-text{font-family:"iransans", Sans-serif;font-weight:800;line-height:18px;letter-spacing:-0.1px;word-spacing:0px;}@media(min-width:768px){.elementor-13 .elementor-element.elementor-element-62cd691{width:18.928%;}.elementor-13 .elementor-element.elementor-element-870d9f0{width:81.078%;}}@media(max-width:767px){.elementor-13 .elementor-element.elementor-element-89d5f8e{padding:0px 10px 0px 10px;}}/* Start custom CSS for section, class: .elementor-element-9cc0029 *//* =====================================================================
   پس‌زمینه متحرک RGB برای بخش «محصولات پرطرفدار»
   ---------------------------------------------------------------------
   نحوه استفاده:
   1) در المنتور روی سکشن (Section) اصلی این بخش کلیک کن.
   2) برو به تب Advanced > CSS Classes
   3) این کلاس رو اضافه کن:  ss-rgb-hero
   4) کل این کد CSS رو کپی کن و در یکی از این دو جا پیست کن:
      - تب Advanced > Custom CSS همون سکشن (پیشنهاد اصلی)
      - یا در Site Settings > Custom CSS المنتور (سراسری)
      - یا داخل یک ویجت HTML، بین تگ <style> ... </style>
   نکته: اگه سکشن شما از پس‌زمینه رنگی/گرادیان قبلی (قرمز) استفاده می‌کنه،
   این کد جایگزینش می‌شه و انیمیشن RGB روی همون ناحیه اجرا می‌شه.
===================================================================== */

.ss-rgb-hero{
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(120deg,
    #ff2b2b, #ff7a00, #ffee00, #39ff14, #00fff2, #2b6bff, #b026ff, #ff2fd1, #ff2b2b) !important;
  background-size:400% 400% !important;
  animation:ss-rgb-flow 14s ease infinite;
  isolation:isolate;
}

/* لایه‌ی تیره‌ی نیمه‌شفاف روی گرادیان، تا خوانایی متن/کارت‌های داخل حفظ بشه */
.ss-rgb-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,15,.35), rgba(10,10,15,.55));
  z-index:0;
  pointer-events:none;
}

/* دو کره‌ی نورانی محو که به‌آرومی جابه‌جا می‌شن، برای عمق بصری بیشتر */
.ss-rgb-hero::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.25), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.18), transparent 40%);
  filter:blur(40px);
  animation:ss-rgb-drift 10s ease-in-out infinite alternate;
  z-index:0;
  pointer-events:none;
}

/* یک نوار نور مورب که هر چند ثانیه از روی بخش رد می‌شه */
.ss-rgb-hero .ss-rgb-shine{
  position:absolute;
  top:0; left:-60%;
  width:35%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  animation:ss-rgb-shine-move 4.5s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}

/* هر محتوایی که مستقیم داخل این کلاس باشه (کارت‌ها، عنوان و ...) بالای انیمیشن قرار می‌گیره */
.ss-rgb-hero > *{
  position:relative;
  z-index:1;
}

@keyframes ss-rgb-flow{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

@keyframes ss-rgb-drift{
  0%{transform:translate(0,0) scale(1);}
  100%{transform:translate(-4%,4%) scale(1.15);}
}

@keyframes ss-rgb-shine-move{
  0%{left:-60%;}
  50%{left:120%;}
  100%{left:120%;}
}

/* احترام به تنظیمات کاهش انیمیشن کاربر */
@media (prefers-reduced-motion:reduce){
  .ss-rgb-hero,
  .ss-rgb-hero::after,
  .ss-rgb-hero .ss-rgb-shine{
    animation:none !important;
  }
}/* End custom CSS */