/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
body {
  overflow-x: hidden;
}

.ltr {
  direction: ltr;
}

.elementskit-navbar-nav-default .elementskit-megamenu-panel {
  left: auto;
}

/* Avid glass box*/
.avid-glass-btn .elementor-button,
.avid-glass-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;

  box-shadow:
    0 8px 32px rgb(0 0 0 / 5%),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease;
}

/* لایه‌ی براقی متحرک */
.avid-glass-btn .elementor-button::before,
.avid-glass-box::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;

  /* نوار نورانی مورب */
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.55) 48%,
    rgba(255, 255, 255, 0.1) 60%,
    rgba(255, 255, 255, 0) 78%
  );

  transform: translateX(-140%) skewX(-18deg);
  opacity: 0;
  transition:
    transform 0.95s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.35s ease;
}

/* لایه‌ی ظریف برای برق لبه‌ها */
.avid-glass-btn .elementor-button::after,
.avid-glass-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;

  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.03) 18%,
      transparent 40%
    ),
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.18),
      transparent 22%,
      transparent 78%,
      rgba(255, 255, 255, 0.1)
    ),
    linear-gradient(to bottom, transparent 75%, rgba(255, 255, 255, 0.1));

  mix-blend-mode: screen;
  opacity: 0.75;
  transition: opacity 0.35s ease;
}

/* هاور */
.avid-glass-btn .elementor-button:hover,
.avid-glass-box:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    0 14px 36px rgb(0 0 0 / 10%),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* حرکت برق */
.avid-glass-btn .elementor-button:hover::before,
.avid-glass-box:hover::before {
  transform: translateX(140%) skewX(-18deg);
  opacity: 1;
}

/* افزایش درخشش لبه‌ها */
.avid-glass-btn .elementor-button:hover::after,
.avid-glass-box:hover::after {
  opacity: 1;
}

/* icon center */
.elementor-widget-icon .elementor-icon-wrapper {
  display: flex;
}

/* Persian number */
.ss01 {
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

/* Monospace number */
.ss03 {
  -moz-font-feature-settings: "ss03";
  -webkit-font-feature-settings: "ss03";
  font-feature-settings: "ss03";
}

/* Stylistic alternates number */
.ss04 {
  -moz-font-feature-settings: "ss04";
  -webkit-font-feature-settings: "ss04";
  font-feature-settings: "ss04";
}

/* containers */
:root {
  --avid-purple-950: #180b2e;
  --avid-purple-900: #24103f;
  --avid-purple-800: #35145f;
  --avid-purple-700: #5e2590;
  --avid-purple-600: #7540b5;
  --avid-purple-500: #8d63c7;
  --avid-purple-300: #cbb7eb;
  --avid-purple-100: #f2ebff;
  --avid-purple-50: #faf7ff;

  --avid-blue-700: #315fcd;
  --avid-blue-500: #5096ff;
  --avid-blue-100: #eaf3ff;

  --avid-gold-500: #d8ae5e;
  --avid-gold-300: #f2d99e;

  --avid-text: #211a2d;
  --avid-text-soft: #6e6878;
  --avid-border: rgba(94, 37, 144, 0.12);
  --avid-border-strong: rgba(94, 37, 144, 0.22);

  --avid-white: #ffffff;
  --avid-surface: rgba(255, 255, 255, 0.76);

  --avid-shadow-sm: 0 8px 24px rgba(38, 17, 68, 0.06);

  --avid-shadow-md: 0 20px 50px rgba(38, 17, 68, 0.1);

  --avid-shadow-lg: 0 30px 80px rgba(38, 17, 68, 0.16);

  --avid-radius-sm: 14px;
  --avid-radius-md: 22px;
  --avid-radius-lg: 32px;
}

/* فاصله استاندارد سکشن‌ها */
.avid-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(80px, 4vw, 70px);
}

/* عرض استاندارد محتوای سکشن‌ها */
.avid-section-inner {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 40px));
  margin-inline: auto;
}

/* عنوان کوچک بالای تیتر */
.avid-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 8px 14px;
  color: var(--avid-purple-700);
  background: rgba(94, 37, 144, 0.07);
  border: 1px solid rgba(94, 37, 144, 0.12);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.avid-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--avid-purple-600);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(117, 64, 181, 0.1);
}

/* کارت مشترک */
.avid-card {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding: 28px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--avid-border);
  border-radius: var(--avid-radius-md);
  box-shadow: var(--avid-shadow-sm);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    transform 300ms ease,
    border-color 300ms ease,
    box-shadow 300ms ease;
}

.avid-card:hover {
  transform: translateY(-7px);
  border-color: var(--avid-border-strong);
  box-shadow: var(--avid-shadow-md);
}

/* آیکون مشترک */
.avid-icon-box {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: var(--avid-purple-700);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.95),
    rgba(242, 235, 255, 0.85)
  );
  border: 1px solid rgba(94, 37, 144, 0.14);
  border-radius: 17px;
  box-shadow:
    0 10px 24px rgba(94, 37, 144, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

@media (max-width: 767px) {
  .avid-section {
    padding-block: 72px;
  }

  .avid-section-inner {
    width: min(100% - 28px, 1200px);
  }

  .avid-card {
    padding: 22px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avid-card,
  .avid-card:hover {
    transform: none;
    transition: none;
  }
}

.avid-form .gform_title {
  font-size: 20px;
  text-align: center;
}
.avid-form .gform_fields {
  grid-row-gap: 10px !important;
  row-gap: 10px !important;
}
.avid-form .gfield_required,
.avid-form .ginput_counter,
.gform_validation_errors {
  display: none !important;
}
.avid-form .ginput_container input:not([type="submit"]),
.avid-form .ginput_container .gfield_select,
.avid-form .ginput_container .textarea {
  background-color: rgba(251, 250, 253, 0.8);
  border-color: #e3dceb;
  border-radius: 12px;
  color: #332b3d;
}
.avid-form input[type="submit"] {
  border-radius: 15px !important;
  background: #7929b7 !important;
  font-weight: bold !important;
  padding: 15px 30px !important;
}
.avid-form .ginput_container input:not([type="submit"]):focus,
.avid-form .ginput_container .gfield_select:focus,
.avid-form .ginput_container .textarea:focus {
  outline-color: #7929b7;
}

/* =========================================================
   AVID BACKGROUND SYSTEM
   Reusable, theme-aware background styles for Elementor
   ========================================================= */

/* =========================================================
   0. GLOBAL DESIGN TOKENS
   Change these variables globally or override them with a
   theme class on any Elementor container.
   ========================================================= */

:root {
  --avid-primary: #7e43ff;
  --avid-secondary: #5096ff;
  --avid-primary-rgb: 126, 67, 255;
  --avid-secondary-rgb: 80, 150, 255;
  --avid-ink-rgb: 94, 37, 144;

  --avid-surface-1: #ffffff;
  --avid-surface-2: #f8f4ff;
  --avid-surface-3: #eef2ff;

  --avid-dark-1: #180b2e;
  --avid-dark-2: #251042;
  --avid-dark-3: #101a38;

  --avid-white-rgb: 255, 255, 255;
  --avid-black-rgb: 0, 0, 0;
}

/* =========================================================
   SHARED BACKGROUND FOUNDATION
   ========================================================= */

:is(
  .avid-bg-hero,
  .avid-bg-aurora,
  .avid-bg-orbs,
  .avid-bg-geometry,
  .avid-bg-grid,
  .avid-bg-network,
  .avid-bg-dark,
  .avid-bg-glass,
  .avid-bg-diagonal,
  .avid-bg-premium,
  .avid-bg-spotlight,
  .avid-bg-mission,
  .avid-bg-testimonials,
  .avid-bg-products,
  .avid-bg-stats,
  .avid-bg-dots
) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:is(
    .avid-bg-hero,
    .avid-bg-aurora,
    .avid-bg-orbs,
    .avid-bg-geometry,
    .avid-bg-grid,
    .avid-bg-network,
    .avid-bg-dark,
    .avid-bg-glass,
    .avid-bg-diagonal,
    .avid-bg-premium,
    .avid-bg-spotlight,
    .avid-bg-mission,
    .avid-bg-testimonials,
    .avid-bg-products,
    .avid-bg-stats,
    .avid-bg-dots
  )
  > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   1. HERO BACKGROUND
   ========================================================= */

.avid-bg-hero {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(var(--avid-primary-rgb), 0.18),
      transparent 32%
    ),
    radial-gradient(
      circle at 85% 30%,
      rgba(var(--avid-secondary-rgb), 0.14),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      var(--avid-surface-1) 0%,
      var(--avid-surface-2) 48%,
      var(--avid-surface-3) 100%
    );
}

.avid-bg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(var(--avid-ink-rgb), 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--avid-ink-rgb), 0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(
    circle at center,
    #000 0%,
    transparent 70%
  );
  mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
  pointer-events: none;
}

/* =========================================================
   2. AURORA BACKGROUND
   ========================================================= */

.avid-bg-aurora {
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(var(--avid-primary-rgb), 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 85% 25%,
      rgba(var(--avid-secondary-rgb), 0.12),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      var(--avid-surface-1) 0%,
      var(--avid-surface-2) 45%,
      var(--avid-surface-3) 100%
    );
}

.avid-bg-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(var(--avid-ink-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(var(--avid-ink-rgb), 0.035) 1px,
      transparent 1px
    );
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(
    circle at center,
    #000 0%,
    transparent 75%
  );
  mask-image: radial-gradient(circle at center, #000 0%, transparent 75%);
  pointer-events: none;
}

/* =========================================================
   3. SOFT ORB BACKGROUND
   ========================================================= */

.avid-bg-orbs {
  background: var(--avid-surface-1);
}

.avid-bg-orbs::before,
.avid-bg-orbs::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}

.avid-bg-orbs::before {
  width: 420px;
  height: 420px;
  top: -180px;
  right: -140px;
  background: radial-gradient(
    circle,
    rgba(var(--avid-primary-rgb), 0.14),
    transparent 68%
  );
}

.avid-bg-orbs::after {
  width: 360px;
  height: 360px;
  bottom: -160px;
  left: -120px;
  background: radial-gradient(
    circle,
    rgba(var(--avid-secondary-rgb), 0.11),
    transparent 68%
  );
}

/* =========================================================
   4. GEOMETRIC BACKGROUND
   ========================================================= */

.avid-bg-geometry {
  background: linear-gradient(
    180deg,
    var(--avid-surface-1) 0%,
    var(--avid-surface-2) 100%
  );
}

.avid-bg-geometry::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 520px;
  height: 520px;
  right: -260px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  border: 70px solid rgba(var(--avid-primary-rgb), 0.035);
  border-radius: 90px;
  pointer-events: none;
}

.avid-bg-geometry::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 260px;
  height: 260px;
  left: -130px;
  bottom: -80px;
  border: 1px solid rgba(var(--avid-primary-rgb), 0.07);
  border-radius: 50px;
  transform: rotate(35deg);
  pointer-events: none;
}

/* =========================================================
   5. DOT GRID BACKGROUND
   ========================================================= */

.avid-bg-grid {
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(var(--avid-primary-rgb), 0.09),
      transparent 28%
    ),
    var(--avid-surface-1);
}

.avid-bg-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.55;
  background-image: radial-gradient(
    circle,
    rgba(var(--avid-primary-rgb), 0.12) 1.2px,
    transparent 1.2px
  );
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 35%,
    #000 100%
  );
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%, #000 100%);
  pointer-events: none;
}

/* =========================================================
   6. NETWORK BACKGROUND
   ========================================================= */

.avid-bg-network {
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(var(--avid-primary-rgb), 0.07),
      transparent 45%
    ),
    linear-gradient(
      180deg,
      var(--avid-surface-1) 0%,
      var(--avid-surface-2) 100%
    );
}

.avid-bg-network::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(
      30deg,
      rgba(var(--avid-primary-rgb), 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      150deg,
      rgba(var(--avid-secondary-rgb), 0.1) 1px,
      transparent 1px
    );
  background-size: 90px 52px;
  pointer-events: none;
}

/* =========================================================
   7. DARK ENTERPRISE BACKGROUND
   ========================================================= */

.avid-bg-dark {
  color: #ffffff;
  background:
    radial-gradient(
      circle at 85% 20%,
      rgba(var(--avid-secondary-rgb), 0.32),
      transparent 30%
    ),
    radial-gradient(
      circle at 10% 80%,
      rgba(var(--avid-primary-rgb), 0.22),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      var(--avid-dark-1) 0%,
      var(--avid-dark-2) 48%,
      var(--avid-dark-3) 100%
    );
}

.avid-bg-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(var(--avid-white-rgb), 0.035) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(var(--avid-white-rgb), 0.035) 1px,
      transparent 1px
    );
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 90%);
  mask-image: linear-gradient(to bottom, #000, transparent 90%);
  pointer-events: none;
}

/* =========================================================
   8. GLASS GLOW BACKGROUND
   ========================================================= */

.avid-bg-glass {
  background:
    radial-gradient(
      circle at 20% 25%,
      rgba(var(--avid-primary-rgb), 0.14),
      transparent 26%
    ),
    radial-gradient(
      circle at 75% 70%,
      rgba(var(--avid-secondary-rgb), 0.12),
      transparent 28%
    ),
    linear-gradient(135deg, var(--avid-surface-2), var(--avid-surface-3));
}

.avid-bg-glass::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 340px;
  height: 340px;
  top: 50px;
  left: 8%;
  border-radius: 50%;
  background: rgba(var(--avid-white-rgb), 0.35);
  border: 1px solid rgba(var(--avid-white-rgb), 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: none;
}

/* =========================================================
   9. SOFT DIAGONAL BACKGROUND
   ========================================================= */

.avid-bg-diagonal {
  background: linear-gradient(
    135deg,
    var(--avid-surface-1) 0%,
    var(--avid-surface-1) 55%,
    var(--avid-surface-2) 55%,
    var(--avid-surface-3) 100%
  );
}

.avid-bg-diagonal::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 420px;
  height: 420px;
  right: -160px;
  bottom: -250px;
  border-radius: 50%;
  border: 55px solid rgba(var(--avid-primary-rgb), 0.035);
  pointer-events: none;
}

/* =========================================================
   10. PREMIUM LIGHT BACKGROUND
   ========================================================= */

.avid-bg-premium {
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(var(--avid-primary-rgb), 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(var(--avid-secondary-rgb), 0.07),
      transparent 28%
    ),
    var(--avid-surface-1);
}

.avid-bg-premium::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -160px;
  left: 50%;
  width: 580px;
  height: 280px;
  transform: translateX(-50%) rotate(-5deg);
  border-radius: 50%;
  border: 1px solid rgba(var(--avid-primary-rgb), 0.055);
  pointer-events: none;
}

/* =========================================================
   11. SPOTLIGHT BACKGROUND
   ========================================================= */

.avid-bg-spotlight {
  background:
    radial-gradient(
      ellipse at center top,
      rgba(var(--avid-primary-rgb), 0.12),
      transparent 50%
    ),
    linear-gradient(180deg, var(--avid-surface-2) 0%, var(--avid-surface-1) 75%);
}

.avid-bg-spotlight::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -220px;
  left: 50%;
  width: 850px;
  height: 500px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(var(--avid-primary-rgb), 0.05);
  box-shadow:
    0 0 0 70px rgba(var(--avid-primary-rgb), 0.015),
    0 0 0 140px rgba(var(--avid-secondary-rgb), 0.01);
  pointer-events: none;
}

/* =========================================================
   12. MISSION BACKGROUND
   ========================================================= */

.avid-bg-mission {
  color: #ffffff;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(var(--avid-primary-rgb), 0.34),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(var(--avid-secondary-rgb), 0.24),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      var(--avid-dark-1) 0%,
      var(--avid-dark-2) 52%,
      var(--avid-dark-3) 100%
    );
}

.avid-bg-mission::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(var(--avid-white-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(var(--avid-white-rgb), 0.055) 1px,
      transparent 1px
    );
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(circle at 35% 50%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 35% 50%, #000, transparent 72%);
  pointer-events: none;
}

.avid-bg-mission::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  right: -130px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(var(--avid-white-rgb), 0.09);
  border-radius: 48% 52% 45% 55%;
  transform: translateY(-50%) rotate(18deg);
  box-shadow:
    inset 0 0 70px rgba(var(--avid-primary-rgb), 0.08),
    0 0 90px rgba(var(--avid-secondary-rgb), 0.05);
  pointer-events: none;
}

/* =========================================================
   13. TESTIMONIALS BACKGROUND
   ========================================================= */

.avid-bg-testimonials {
  background:
    radial-gradient(
      circle at 15% 25%,
      rgba(var(--avid-primary-rgb), 0.12),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 75%,
      rgba(var(--avid-secondary-rgb), 0.1),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--avid-surface-1) 0%,
      var(--avid-surface-2) 52%,
      var(--avid-surface-3) 100%
    );
}

.avid-bg-testimonials::before {
  content: "“";
  position: absolute;
  z-index: 0;
  top: 40px;
  left: 7%;
  color: rgba(var(--avid-ink-rgb), 0.055);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(220px, 28vw, 430px);
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.avid-bg-testimonials::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -120px;
  bottom: -120px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(var(--avid-primary-rgb), 0.09);
  border-radius: 50%;
  box-shadow:
    0 0 0 45px rgba(var(--avid-primary-rgb), 0.025),
    0 0 0 90px rgba(var(--avid-secondary-rgb), 0.018);
  pointer-events: none;
}

/* =========================================================
   14. PRODUCTS BACKGROUND
   ========================================================= */

.avid-bg-products {
  background:
    radial-gradient(
      circle at 12% 12%,
      rgba(var(--avid-primary-rgb), 0.13),
      transparent 26%
    ),
    radial-gradient(
      circle at 88% 80%,
      rgba(var(--avid-secondary-rgb), 0.11),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      var(--avid-surface-2) 0%,
      var(--avid-surface-1) 45%,
      var(--avid-surface-3) 100%
    );
}

.avid-bg-products::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(var(--avid-ink-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(var(--avid-ink-rgb), 0.045) 1px,
      transparent 1px
    );
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000, transparent 78%);
  pointer-events: none;
}

.avid-bg-products::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 120px;
  right: -180px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(var(--avid-primary-rgb), 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 55px rgba(var(--avid-primary-rgb), 0.025),
    0 0 0 110px rgba(var(--avid-secondary-rgb), 0.018);
  pointer-events: none;
}

/* =========================================================
   15. STATISTICS BACKGROUND
   ========================================================= */

.avid-bg-stats {
  color: #ffffff;
  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(var(--avid-primary-rgb), 0.38),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(var(--avid-secondary-rgb), 0.28),
      transparent 32%
    ),
    linear-gradient(
      120deg,
      var(--avid-dark-1) 0%,
      var(--avid-dark-2) 50%,
      var(--avid-dark-3) 100%
    );
}

.avid-bg-stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.3;
  background-image: radial-gradient(
    circle,
    rgba(var(--avid-white-rgb), 0.2) 1px,
    transparent 1.5px
  );
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000, transparent 75%);
  mask-image: radial-gradient(ellipse at center, #000, transparent 75%);
  pointer-events: none;
}

.avid-bg-stats::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  top: 52%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--avid-white-rgb), 0.18),
    transparent
  );
  pointer-events: none;
}

/* =========================================================
   16. DOTS OVERLAY
   Standalone decorative background. Do not stack it with another
   avid-bg-* class on the same element because pseudo-elements may conflict.
   ========================================================= */

.avid-bg-dots {
  background-color: var(--avid-surface-1);
}

.avid-bg-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.5;
  background-image: radial-gradient(
    circle,
    rgba(var(--avid-ink-rgb), 0.2) 1px,
    transparent 1.5px
  );
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
  mask-image: linear-gradient(
    to bottom,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
  pointer-events: none;
}

/* =========================================================
   AVID - ElementsKit AJAX Mega Menu Skeleton
   No JS required
   ========================================================= */

/* ---------- Base ---------- */

:is(.avid-mm-4row, .avid-mm-2row)
  > .elementskit-megamenu-panel
  > .megamenu-ajax-load {
  position: relative;

  display: block !important;

  width: calc(100% - 40px) !important;
  max-width: 1200px !important;

  margin-inline: auto !important;

  padding: 0 !important;

  overflow: hidden;

  background-color: #ffffff;

  /*
     * یک Skeleton Item:
     * آیکن + عنوان + توضیح
     *
     * SVG داخل CSS است و هیچ HTTP Request
     * اضافی ایجاد نمی‌کند.
     */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 400 112'%3E%3Crect x='332' y='25' width='32' height='32' rx='10' fill='%23E8ECF3'/%3E%3Crect x='185' y='25' width='120' height='14' rx='7' fill='%23E8ECF3'/%3E%3Crect x='145' y='54' width='160' height='10' rx='5' fill='%23F0F2F6'/%3E%3C/svg%3E");

  box-sizing: border-box;

  border-radius: 0 0 20px 20px;

  contain: paint;

  font-size: 0;
  color: transparent;
}

/* =========================================================
   PRODUCTS
   محصولات
   3 Columns
   ========================================================= */

.avid-mm-4row > .elementskit-megamenu-panel > .megamenu-ajax-load {
  height: 460px;

  background-size: 33.333333% 115px;

  background-position: 0 15px;

  background-repeat: repeat;
}

/* =========================================================
   KNOWLEDGE
   دانش
   3 Columns / 2 Rows
   ========================================================= */

.avid-mm-2row > .elementskit-megamenu-panel > .megamenu-ajax-load {
  height: 230px;

  background-size: 33.333333% 112px;

  background-position: 0 3px;

  background-repeat: repeat;
}

/* =========================================================
   COLUMN DIVIDERS
   محصولات + دانش
   ========================================================= */

:is(.avid-mm-4row, .avid-mm-2row)
  > .elementskit-megamenu-panel
  > .megamenu-ajax-load::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background: linear-gradient(
    to right,

    transparent 33.25%,

    #e9edf3 33.25%,
    #e9edf3 33.36%,

    transparent 33.36%,
    transparent 66.58%,

    #e9edf3 66.58%,
    #e9edf3 66.69%,

    transparent 66.69%
  );
}

/* =========================================================
   MODERN SHIMMER
   ========================================================= */

:is(.avid-mm-4row, .avid-mm-2row)
  > .elementskit-megamenu-panel
  > .megamenu-ajax-load::after {
  content: "";

  position: absolute;

  top: -20%;
  bottom: -20%;

  left: -45%;

  width: 38%;

  pointer-events: none;

  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 25%,
    rgba(255, 255, 255, 0.82) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    rgba(255, 255, 255, 0) 100%
  );

  transform: skewX(-12deg);

  animation: avidMegaSkeletonShimmer 1.35s linear infinite;

  will-change: left;
}

@keyframes avidMegaSkeletonShimmer {
  from {
    left: -45%;
  }

  to {
    left: 115%;
  }
}

/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 1024px) {
  :is(.avid-mm-4row, .avid-mm-2row)
    > .elementskit-megamenu-panel
    > .megamenu-ajax-load {
    height: 184px;

    border-radius: 0;

    background-size: 100% 90px;

    background-position: 0 2px;

    background-repeat: repeat;
  }

  :is(.avid-mm-4row, .avid-mm-2row)
    > .elementskit-megamenu-panel
    > .megamenu-ajax-load::before {
    display: none;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  :is(.avid-mm-4row, .avid-mm-2row)
    > .elementskit-megamenu-panel
    > .megamenu-ajax-load::after {
    animation: none;
    display: none;
  }
}

/* =========================================================
   HATAMPOURI — Modern WordPress Audio Player
   Brand Color: #7929b7
   ========================================================= */

:root {
    --hp-audio-primary: #7929b7;
    --hp-audio-primary-hover: #68229e;
    --hp-audio-primary-soft: rgba(121, 41, 183, .10);

    --hp-audio-bg: #f8f7fa;
    --hp-audio-track: #e5e0e9;
    --hp-audio-loaded: #d2c8da;

    --hp-audio-text: #6f6875;
    --hp-audio-dark: #231d27;
}


/* =========================================================
   Main Wrapper
   ========================================================= */

.wp-audio-shortcode {
    width: 100% !important;
    max-width: 100%;
    margin: 20px 0;
}


/* =========================================================
   Player Container
   بدون هاور روی خود پلیر
   ========================================================= */

.wp-audio-shortcode.mejs-container,
.mejs-container.wp-audio-shortcode {
    position: relative;

    min-height: 68px !important;
    height: 68px !important;

    background: var(--hp-audio-bg) !important;

    border: 1px solid rgba(121, 41, 183, .08) !important;
    border-radius: 18px !important;

    overflow: hidden;

    box-shadow:
        0 3px 14px rgba(30, 15, 40, .025);

    font-family: inherit !important;
}


/* =========================================================
   Controls
   ========================================================= */

.wp-audio-shortcode .mejs-controls,
.mejs-container.wp-audio-shortcode .mejs-controls {
    height: 68px !important;

    padding: 0 16px !important;

    display: flex !important;
    align-items: center !important;

    gap: 7px;

    background: transparent !important;
}


/* remove WP old gradients */
.wp-audio-shortcode .mejs-controls,
.wp-audio-shortcode .mejs-controls div {
    background-image: none !important;
}


/* =========================================================
   Play / Pause
   ========================================================= */

.wp-audio-shortcode .mejs-playpause-button {
    width: 44px !important;
    height: 44px !important;

    flex: 0 0 44px;

    margin: 0 5px 0 0 !important;
}


.wp-audio-shortcode .mejs-playpause-button > button {
    position: relative !important;

    width: 44px !important;
    height: 44px !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background-color: var(--hp-audio-primary) !important;
    background-image: none !important;

    cursor: pointer;

    box-shadow:
        0 5px 15px rgba(121, 41, 183, .20);

    transition:
        transform .25s cubic-bezier(.2,.8,.2,1),
        background-color .25s ease,
        box-shadow .25s ease;
}


/* Play Hover */
.wp-audio-shortcode .mejs-playpause-button > button:hover {
    background-color: var(--hp-audio-primary-hover) !important;

    transform:
        translateY(-1px)
        scale(1.07);

    box-shadow:
        0 8px 22px rgba(121, 41, 183, .30);
}


/* Click */
.wp-audio-shortcode .mejs-playpause-button > button:active {
    transform: scale(.94);

    box-shadow:
        0 3px 9px rgba(121, 41, 183, .18);
}


/* Keyboard focus */
.wp-audio-shortcode .mejs-playpause-button > button:focus-visible {
    outline: none !important;

    box-shadow:
        0 0 0 4px rgba(121, 41, 183, .15),
        0 6px 20px rgba(121, 41, 183, .25);
}


/* =========================================================
   Custom Play Icon
   ========================================================= */

.wp-audio-shortcode .mejs-play > button::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 53%;

    width: 0;
    height: 0;

    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #fff;

    transform:
        translate(-50%, -50%)
        scale(1);

    transition:
        transform .22s cubic-bezier(.2,.8,.2,1);
}


.wp-audio-shortcode .mejs-play > button:hover::before {
    transform:
        translate(-50%, -50%)
        scale(1.1);
}


/* =========================================================
   Pause Icon
   ========================================================= */

.wp-audio-shortcode .mejs-pause > button::before,
.wp-audio-shortcode .mejs-pause > button::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 3px;
    height: 15px;

    border-radius: 10px;

    background: #fff;

    transform: translateY(-50%);

    transition:
        height .2s ease;
}


.wp-audio-shortcode .mejs-pause > button::before {
    left: 15px;
}


.wp-audio-shortcode .mejs-pause > button::after {
    right: 15px;
}


.wp-audio-shortcode .mejs-pause > button:hover::before,
.wp-audio-shortcode .mejs-pause > button:hover::after {
    height: 17px;
}


/* =========================================================
   Playing State
   Soft Pulse
   ========================================================= */

.mejs-container.wp-audio-shortcode .mejs-pause > button {
    animation: hpAudioPulse 2.8s ease-in-out infinite;
}


@keyframes hpAudioPulse {

    0%,
    100% {
        box-shadow:
            0 5px 15px rgba(121, 41, 183, .20);
    }

    50% {
        box-shadow:
            0 6px 22px rgba(121, 41, 183, .34);
    }
}


/* =========================================================
   Time
   ========================================================= */

.wp-audio-shortcode .mejs-time {
    height: auto !important;

    padding: 0 5px !important;

    color: var(--hp-audio-text) !important;

    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;

    font-variant-numeric: tabular-nums;
}


.wp-audio-shortcode .mejs-time span {
    color: inherit !important;
    font-size: inherit !important;
}


/* =========================================================
   Progress Rail
   ========================================================= */

.wp-audio-shortcode .mejs-time-rail {
    position: relative;

    height: 32px !important;

    padding-top: 0 !important;
    margin: 0 5px !important;

    display: flex !important;
    align-items: center !important;

    cursor: pointer;
}


/* Main Track */
.wp-audio-shortcode .mejs-time-total {
    height: 6px !important;

    margin: 0 !important;

    border-radius: 100px !important;

    overflow: visible !important;

    background: var(--hp-audio-track) !important;

    transition:
        height .2s ease,
        background-color .2s ease;
}


/* Hover روی خود تایم‌لاین */
.wp-audio-shortcode .mejs-time-rail:hover .mejs-time-total {
    height: 8px !important;

    background: #ddd5e2 !important;
}


/* =========================================================
   Loaded Area
   ========================================================= */

.wp-audio-shortcode .mejs-time-loaded {
    height: 100% !important;

    border-radius: inherit !important;

    background: var(--hp-audio-loaded) !important;
}


/* =========================================================
   Current Progress
   ========================================================= */

.wp-audio-shortcode .mejs-time-current {
    height: 100% !important;

    border-radius: inherit !important;

    background:
        linear-gradient(
            90deg,
            #7929b7 0%,
            #9143cc 100%
        ) !important;

    box-shadow:
        0 0 8px rgba(121, 41, 183, .12);
}


/* =========================================================
   Hover Progress
   ========================================================= */

.wp-audio-shortcode .mejs-time-hovered {
    height: 100% !important;

    border-radius: inherit !important;

    background: rgba(121, 41, 183, .15) !important;
}


/* =========================================================
   Progress Handle
   ========================================================= */

.wp-audio-shortcode .mejs-time-handle {
    display: block !important;
}


.wp-audio-shortcode .mejs-time-handle-content {
    width: 13px !important;
    height: 13px !important;

    top: 50% !important;

    margin-top: -6.5px !important;

    border: 3px solid #fff !important;
    border-radius: 50% !important;

    background: var(--hp-audio-primary) !important;

    box-shadow:
        0 2px 9px rgba(121, 41, 183, .30);

    transform:
        scale(0);

    transition:
        transform .2s cubic-bezier(.2,.8,.2,1),
        box-shadow .2s ease;
}


.wp-audio-shortcode .mejs-time-rail:hover .mejs-time-handle-content {
    transform: scale(1);
}


.wp-audio-shortcode .mejs-time-handle-content:hover {
    box-shadow:
        0 3px 13px rgba(121, 41, 183, .40);
}


/* =========================================================
   Time Tooltip
   ========================================================= */

.wp-audio-shortcode .mejs-time-float {
    bottom: 27px !important;

    padding: 5px 7px !important;

    border: 0 !important;
    border-radius: 7px !important;

    background: var(--hp-audio-dark) !important;

    color: #fff !important;

    font-size: 10px !important;

    box-shadow:
        0 5px 15px rgba(25, 12, 35, .15);
}


.wp-audio-shortcode .mejs-time-float-current {
    color: #fff !important;
}


.wp-audio-shortcode .mejs-time-float-corner {
    border-top-color: var(--hp-audio-dark) !important;
}


/* =========================================================
   Volume / Mute
   ========================================================= */

.wp-audio-shortcode .mejs-volume-button {
    position: relative !important;

    width: 36px !important;
    height: 36px !important;

    margin-left: 3px !important;

    flex: 0 0 36px;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Volume Main Button */
.wp-audio-shortcode .mejs-volume-button > button {
    position: relative !important;

    width: 34px !important;
    height: 34px !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: transparent !important;
    background-image: none !important;

    opacity: 1 !important;

    cursor: pointer;

    transition:
        background-color .22s ease,
        transform .22s cubic-bezier(.2,.8,.2,1);
}


/* Volume Hover */
.wp-audio-shortcode .mejs-volume-button > button:hover {
    background-color: rgba(121, 41, 183, .09) !important;

    transform: scale(1.08);
}


/* Volume Click */
.wp-audio-shortcode .mejs-volume-button > button:active {
    transform: scale(.92);
}


/* Volume Keyboard Focus */
.wp-audio-shortcode .mejs-volume-button > button:focus-visible {
    outline: none !important;

    background-color: rgba(121, 41, 183, .10) !important;

    box-shadow:
        0 0 0 3px rgba(121, 41, 183, .13) !important;
}


/* =========================================================
   Custom Volume Icon
   ========================================================= */

.wp-audio-shortcode .mejs-volume-button > button::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 19px;
    height: 19px;

    transform: translate(-50%, -50%);

    background-color: var(--hp-audio-primary);

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4zm11.5 3a3.5 3.5 0 0 0-1.5-2.87v5.74A3.5 3.5 0 0 0 15.5 12zm0-6.18v2.06A5.99 5.99 0 0 1 18 12a5.99 5.99 0 0 1-2.5 4.12v2.06A8 8 0 0 0 20 12a8 8 0 0 0-4.5-6.18z'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4zm11.5 3a3.5 3.5 0 0 0-1.5-2.87v5.74A3.5 3.5 0 0 0 15.5 12zm0-6.18v2.06A5.99 5.99 0 0 1 18 12a5.99 5.99 0 0 1-2.5 4.12v2.06A8 8 0 0 0 20 12a8 8 0 0 0-4.5-6.18z'/%3E%3C/svg%3E")
        center / contain no-repeat;

    transition:
        background-color .22s ease,
        transform .22s cubic-bezier(.2,.8,.2,1);
}


.wp-audio-shortcode .mejs-volume-button > button:hover::before {
    background-color: var(--hp-audio-primary-hover);

    transform:
        translate(-50%, -50%)
        scale(1.08);
}


/* =========================================================
   Muted Icon
   ========================================================= */

.wp-audio-shortcode .mejs-unmute > button::before {
    background-color: var(--hp-audio-primary);

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4zm12.6 3 2.2-2.2-1.4-1.4-2.2 2.2L13 8.4l-1.4 1.4 2.2 2.2-2.2 2.2 1.4 1.4 2.2-2.2 2.2 2.2 1.4-1.4L16.6 12z'/%3E%3C/svg%3E")
        center / contain no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9H4zm12.6 3 2.2-2.2-1.4-1.4-2.2 2.2L13 8.4l-1.4 1.4 2.2 2.2-2.2 2.2 1.4 1.4 2.2-2.2 2.2 2.2 1.4-1.4L16.6 12z'/%3E%3C/svg%3E")
        center / contain no-repeat;
}


/* =========================================================
   Horizontal Volume Slider
   ========================================================= */

.wp-audio-shortcode .mejs-horizontal-volume-slider {
    width: 58px !important;
}


.wp-audio-shortcode .mejs-horizontal-volume-total {
    width: 54px !important;
    height: 5px !important;

    border-radius: 100px !important;

    background: var(--hp-audio-track) !important;
}


.wp-audio-shortcode .mejs-horizontal-volume-current {
    height: 5px !important;

    border-radius: 100px !important;

    background: var(--hp-audio-primary) !important;

    box-shadow:
        0 0 6px rgba(121, 41, 183, .15);
}


/* =========================================================
   Generic Buttons
   ========================================================= */

.wp-audio-shortcode .mejs-button > button {
    outline: none !important;
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

    .wp-audio-shortcode.mejs-container,
    .mejs-container.wp-audio-shortcode {
        min-height: 62px !important;
        height: 62px !important;

        border-radius: 16px !important;
    }


    .wp-audio-shortcode .mejs-controls,
    .mejs-container.wp-audio-shortcode .mejs-controls {
        height: 62px !important;

        padding: 0 11px !important;

        gap: 4px;
    }


    .wp-audio-shortcode .mejs-playpause-button {
        width: 40px !important;
        height: 40px !important;

        flex-basis: 40px;
    }


    .wp-audio-shortcode .mejs-playpause-button > button {
        width: 40px !important;
        height: 40px !important;
    }


    .wp-audio-shortcode .mejs-play > button::before {
        border-top-width: 6px;
        border-bottom-width: 6px;
        border-left-width: 10px;
    }


    .wp-audio-shortcode .mejs-pause > button::before {
        left: 13px;
    }


    .wp-audio-shortcode .mejs-pause > button::after {
        right: 13px;
    }


    .wp-audio-shortcode .mejs-time {
        padding: 0 3px !important;

        font-size: 11px !important;
    }


    /* Hide Volume Slider on Mobile */
    .wp-audio-shortcode .mejs-horizontal-volume-slider {
        display: none !important;
    }


    .wp-audio-shortcode .mejs-volume-button {
        width: 34px !important;
        height: 34px !important;

        flex-basis: 34px;
    }


    .wp-audio-shortcode .mejs-volume-button > button {
        width: 32px !important;
        height: 32px !important;
    }
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .wp-audio-shortcode *,
    .wp-audio-shortcode *::before,
    .wp-audio-shortcode *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}