@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//avalcrm.com/wp-content/themes/avalcrm/fonts/woodmart-font-1-400.woff2?v=8.3.9") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//avalcrm.com/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//avalcrm.com/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//avalcrm.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//avalcrm.com/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//avalcrm.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//avalcrm.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//avalcrm.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//avalcrm.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "yekan bakh regular", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #26354D;
	--wd-text-font-size: 16px;
	--wd-title-font: "yekanbakh bold", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 800;
	--wd-title-color: #071A3A;
	--wd-entities-title-font: "yekan bakh regular", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 700;
	--wd-entities-title-color: #071A3A;
	--wd-entities-title-color-hover: #2F6BFF;
	--wd-alternative-font: "estedad", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "estedad", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #071A3A;
	--wd-widget-title-font-size: 17px;
	--wd-header-el-font: "yekan bakh regular", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 14px;
	--wd-otl-style: solid;
	--wd-otl-width: 2px;
	--wd-primary-color: #2F6BFF;
	--wd-alternative-color: #00C7F4;
	--btn-default-bgcolor: #FFFFFF;
	--btn-default-bgcolor-hover: #F7FBFF;
	--btn-accented-bgcolor: #2F6BFF;
	--btn-accented-bgcolor-hover: #6C2BFF;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #10B981;
	--notices-success-color: #FFFFFF;
	--notices-warning-bg: #F59E0B;
	--notices-warning-color: #FFFFFF;
	--wd-link-color: #2F6BFF;
	--wd-link-color-hover: #6C2BFF;
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: #071A3A;
	background-image: none;
}
.page .wd-page-content {
	background-color: #F7FBFF;
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-text-font-size: 15px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-text-font-size: 15px;
	}

}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 35px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--btn-accented-box-shadow-active: none;
--btn-accented-bottom: 0px;
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: #071A3A;
}

@font-face {
	font-family: "yekan bakh regular";
	src: url("//avalcrm.com/wp-content/uploads/2026/05/Yekan-Bakh-FaNum-04-Regular.ttf") format("woff2");
	font-weight: 400;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "yekanbakh bold";
	src: url("//avalcrm.com/wp-content/uploads/2026/05/Yekan-Bakh-FaNum-06-Bold-1.ttf") format("woff");
	font-weight: 400;
	font-display:swap;
	font-style: normal;
}

@font-face {
	font-family: "estedad";
	src: url("//avalcrm.com/wp-content/uploads/2026/05/Estedad-FDKSHDwght.woff2") format("woff2");
	font-weight: 400;
	font-display:swap;
	font-style: normal;
}

/* =========================================================
   Aval CRM — Final Optimized CSS
   Woodmart + Elementor + WooCommerce
   RTL | Lightweight | Brand Book Compatible
   ========================================================= */


/* =========================================================
   01. متغیرهای عمومی
   ========================================================= */

:root{
  /* اندازه و گردی گوشه‌ها */
  --aval-radius-sm:12px;
  --aval-radius-md:16px;
  --aval-radius-lg:22px;
  --aval-radius-xl:28px;
  --aval-container:1200px;

  /* سایه‌های سبک */
  --aval-card-shadow:
    0 12px 32px rgba(7,26,58,.06);

  --aval-soft-shadow:
    0 8px 22px rgba(7,26,58,.045);

  --aval-hover-shadow:
    0 16px 38px rgba(7,26,58,.08);

  /* گرادیان اصلی برند */
  --aval-brand-gradient:
    linear-gradient(
      135deg,
      #00C7F4 0%,
      #2F6BFF 52%,
      #6C2BFF 100%
    );

  /* پس‌زمینه روشن Hero */
  --aval-hero-glow:
    radial-gradient(
      circle at 15% 20%,
      rgba(0,199,244,.16),
      transparent 30%
    ),
    radial-gradient(
      circle at 78% 14%,
      rgba(108,43,255,.13),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F7FBFF 100%
    );

  /* پس‌زمینه CTA تیره */
  --aval-dark-cta-gradient:
    radial-gradient(
      circle at 5% 5%,
      rgba(47,107,255,.26),
      transparent 34%
    ),
    radial-gradient(
      circle at 96% 100%,
      rgba(108,43,255,.18),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #123C78 0%,
      #071A3A 46%,
      #101B56 100%
    );
}


/* =========================================================
   02. تنظیمات پایه
   ========================================================= */

html{
  scroll-behavior:smooth;
}

html body{
  direction:rtl;
  text-rendering:optimizeLegibility;
}

img{
  max-width:100%;
  height:auto;
}

/* متن‌ها، قیمت‌ها و کدهای چپ‌به‌راست */
.en,
.latin,
[lang="en"],
.amount,
.price,
.sku,
code,
pre{
  direction:ltr;
  unicode-bidi:isolate;
}


/* =========================================================
   03. کانتینر و سکشن‌ها
   ========================================================= */

.aval-container,
.container.aval-container{
  width:min(
    var(--aval-container),
    calc(100% - 32px)
  );

  margin-inline:auto;
}

.aval-section{
  position:relative;
  overflow:hidden;
  padding:90px 0;
}

.aval-section-sm{
  padding:56px 0;
}

.aval-section-head{
  margin-bottom:38px;
  text-align:center;
}

.aval-title{
  margin:16px 0 12px;
}

.aval-subtitle{
  max-width:760px;
  margin:0 auto 30px;
  font-size:17px;
}


/* =========================================================
   04. پس‌زمینه روشن Hero

   کلاس Elementor:
   aval-gradient-section

   نام جایگزین:
   aval-bg-hero
   ========================================================= */

.aval-gradient-section,
.aval-bg-hero{
  background-color:#F7FBFF !important;
  background-image:var(--aval-hero-glow) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;
}


/* =========================================================
   05. متن گرادیانی برند

   کلاس Elementor یا HTML:
   aval-gradient-text
   ========================================================= */

.aval-gradient-text,
.aval-gradient-text .elementor-heading-title{
  background-image:var(--aval-brand-gradient) !important;
  background-repeat:no-repeat;
  background-size:100% 100%;

  -webkit-background-clip:text;
  background-clip:text;

  color:transparent !important;
  -webkit-text-fill-color:transparent !important;

  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.aval-gradient-text::selection,
.aval-gradient-text .elementor-heading-title::selection{
  background:rgba(47,107,255,.18);
  color:#2F6BFF;
  -webkit-text-fill-color:#2F6BFF;
}


/* =========================================================
   06. برچسب کوچک بالای عنوان — نسخه یکپارچه گرادیانی
   ========================================================= */

html body .aval-eyebrow,
html body .aval-eyebrow.light{
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;

  width:fit-content !important;
  max-width:100% !important;
  padding:8px 14px !important;

  margin-top:0 !important;
  margin-right:0 !important;
  margin-bottom:8px !important;
  margin-left:0 !important;

  border:2px solid transparent !important;
  border-radius:999px !important;

  background:
    linear-gradient(
      rgba(234,247,255,.96),
      rgba(234,247,255,.96)
    ) padding-box,
    var(
      --aval-brand-gradient,
      linear-gradient(
        135deg,
        #00C7F4 0%,
        #2F6BFF 52%,
        #6C2BFF 100%
      )
    ) border-box !important;

  background-color:transparent !important;

  color:#071A3A !important;
  -webkit-text-fill-color:#071A3A !important;

  font-size:14px !important;
  font-weight:800 !important;
  line-height:1.6 !important;
  text-align:center !important;
  white-space:normal;

  opacity:1 !important;
  transform:none !important;
  box-shadow:none !important;
  z-index:auto !important;
}

html body .aval-eyebrow::before,
html body .aval-eyebrow.light::before{
  content:"" !important;
  display:block !important;

  width:8px !important;
  height:8px !important;
  flex:0 0 8px !important;

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

  background:
    var(
      --aval-brand-gradient,
      linear-gradient(
        135deg,
        #00C7F4 0%,
        #2F6BFF 52%,
        #6C2BFF 100%
      )
    ) !important;

  opacity:1 !important;
}

html body .aval-eyebrow + h1,
html body .aval-eyebrow + h2,
html body .aval-eyebrow + h3,
html body .aval-eyebrow + p{
  margin-top:5px !important;
}


/* =========================================================
   07. دکمه‌های عمومی
   ========================================================= */

.aval-btn,
.elementor-button,
.wd-button-wrapper a.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:48px;
  padding:13px 24px;

  border-radius:14px;

  font-weight:800;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;

  cursor:pointer;

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

.aval-btn:hover,
.elementor-button:hover,
.btn:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.add_to_cart_button:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover{
  transform:translateY(-2px);
}


/* دکمه گرادیانی عمومی */

.aval-btn-gradient,
.aval-btn-gradient .elementor-button,
.elementor-button.aval-btn-gradient{
  border-color:transparent !important;
  background-image:var(--aval-brand-gradient) !important;
  color:#FFFFFF !important;

  box-shadow:
    0 12px 28px rgba(47,107,255,.18) !important;
}

.aval-btn-gradient:hover,
.aval-btn-gradient .elementor-button:hover,
.elementor-button.aval-btn-gradient:hover{
  color:#FFFFFF !important;

  box-shadow:
    0 16px 34px rgba(47,107,255,.24) !important;
}


/* =========================================================
   08. کارت‌ها، محصولات و ابزارک‌ها

   Blur از کارت‌ها حذف شده تا صفحه سبک‌تر باشد.
   ========================================================= */

.aval-card,
.product-grid-item,
.wd-product,
.wd-product .product-wrapper,
.wd-dropdown,
.widget,
.woocommerce .product,
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation,
.wd-side-hidden,
.wd-popup,
.wd-modal{
  border-radius:var(--aval-radius-lg) !important;
}

.aval-card{
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--aval-card-shadow);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;

  /*
   * برای حفظ سرعت سایت فعال نشود:
   * backdrop-filter:blur(10px);
   */
}

.wd-product .product-wrapper,
.widget,
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation{
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--aval-soft-shadow);
}

.wd-product .product-wrapper{
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.wd-product:hover .product-wrapper,
.aval-card:hover{
  box-shadow:var(--aval-hover-shadow) !important;
}

.product-grid-item .product-element-top,
.wd-product .product-element-top{
  overflow:hidden;
  border-radius:18px !important;
}

.product-label,
.onsale{
  border-radius:999px !important;
}


/* =========================================================
   09. آیکن‌ها
   ========================================================= */

.aval-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:48px;
  height:48px;
  flex:0 0 auto;

  border-radius:16px;

  font-size:14px;
  font-weight:900;

  box-shadow:
    0 10px 24px rgba(7,26,58,.08);
}

.aval-icon-gradient{
  background-image:var(--aval-brand-gradient);
  color:#FFFFFF;
}

.aval-icon-line{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:46px;
  height:46px;
  flex:0 0 auto;

  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
}


/* =========================================================
   10. فرم‌ها
   ========================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.elementor-field,
.select2-container--default .select2-selection--single{
  min-height:48px;

  border-radius:14px !important;
  box-shadow:none !important;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

input:focus,
textarea:focus,
select:focus,
.elementor-field:focus,
.select2-container--default.select2-container--open
.select2-selection--single{
  box-shadow:
    0 0 0 4px rgba(47,107,255,.10) !important;

  outline:none !important;
}


/* =========================================================
   11. هدر چسبان و شیشه‌ای Woodmart

   ابتدا Sticky Header را در Header Builder فعال کنید.

   برای غیرفعال کردن ظاهر شیشه‌ای، بخش بین
   START و END را کامنت کنید.
   ========================================================= */


/* ===== START: STICKY GLASS HEADER ===== */

.whb-main-header,
.whb-clone{
  transition:
    background-color .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

/*
 * این بخش فقط پس از اسکرول و فعال شدن
 * کلاس Sticky توسط Woodmart اجرا می‌شود.
 */
.whb-main-header.whb-sticked,
.whb-sticked .whb-main-header,
.whb-clone.whb-sticked{
  background-color:
    rgba(255,255,255,.82) !important;

  /* شیشه‌ای شدن در Safari */
  -webkit-backdrop-filter:
    blur(12px) saturate(125%);

  /* خط اصلی شیشه‌ای شدن هدر */
  backdrop-filter:
    blur(12px) saturate(125%);

  /* سایه پایین هدر */
  box-shadow:
    0 8px 28px rgba(7,26,58,.08);

  /* خط ظریف پایین هدر */
  border-bottom:
    1px solid rgba(221,232,247,.82);
}

/* شفاف کردن ردیف‌های داخلی هدر */
.whb-main-header.whb-sticked .whb-row,
.whb-sticked .whb-main-header .whb-row,
.whb-clone.whb-sticked .whb-row,
.whb-main-header.whb-sticked .whb-general-header,
.whb-sticked .whb-main-header .whb-general-header{
  background-color:transparent !important;
  background-image:none !important;
}

/* ===== END: STICKY GLASS HEADER ===== */


/* جایگزین مرورگرهایی که Blur را پشتیبانی نمی‌کنند */

@supports not (
  (backdrop-filter:blur(12px)) or
  (-webkit-backdrop-filter:blur(12px))
){
  .whb-main-header.whb-sticked,
  .whb-sticked .whb-main-header,
  .whb-clone.whb-sticked{
    background-color:
      rgba(255,255,255,.96) !important;
  }
}


/* =========================================================
   12. پیام‌های ووکامرس
   ========================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wd-notice,
.mc4wp-success,
.mc4wp-error{
  border-radius:16px !important;
}


/* =========================================================
   13. شبکه‌های آماده
   ========================================================= */

.aval-grid-2,
.aval-grid-3,
.aval-grid-4{
  display:grid;
}

.aval-grid-2{
  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:24px;
}

.aval-grid-3{
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:22px;
}

.aval-grid-4{
  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:20px;
}


/* =========================================================
   14. برچسب‌های کپسولی
   ========================================================= */

.aval-pill-list{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.aval-pill{
  padding:7px 12px;

  border:
    1px solid rgba(0,0,0,.08);

  border-radius:999px;

  font-size:13px;
  font-weight:700;
}


/* =========================================================
   15. پرسش‌های متداول
   ========================================================= */

.aval-faq details{
  padding:18px 20px;

  border:
    1px solid rgba(0,0,0,.08);

  border-radius:18px;

  box-shadow:
    0 8px 22px rgba(7,26,58,.04);
}

.aval-faq details + details{
  margin-top:12px;
}

.aval-faq summary{
  font-weight:800;
  cursor:pointer;
}

.aval-faq p{
  margin:12px 0 0;
}


/* =========================================================
   16. سکشن CTA تیره

   کلاس Elementor:
   aval-cta-dark
   ========================================================= */

.aval-cta-dark{
  position:relative;
  overflow:hidden;
  isolation:isolate;

  padding:52px 46px;
  border-radius:28px;

  background-color:#071A3A !important;
  background-image:var(--aval-dark-cta-gradient) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;

  color:#FFFFFF;

  box-shadow:
    0 18px 45px rgba(7,26,58,.14);
}

.aval-cta-dark h1,
.aval-cta-dark h2,
.aval-cta-dark h3,
.aval-cta-dark h4,
.aval-cta-dark h5,
.aval-cta-dark h6,
.aval-cta-dark .elementor-heading-title{
  color:#FFFFFF !important;
}

.aval-cta-dark p,
.aval-cta-dark .elementor-widget-text-editor{
  color:rgba(255,255,255,.78) !important;
}

.aval-cta-dark a:not(.elementor-button){
  color:rgba(255,255,255,.90);
}


/* =========================================================
   17. دکمه اصلی CTA گرادیانی

   کلاس Elementor:
   aval-cta-btn-primary
   ========================================================= */

.aval-cta-btn-primary{
  --aval-cta-button-background:
    var(--aval-brand-gradient);

  --aval-cta-button-border:
    transparent;

  --aval-cta-button-shadow:
    0 14px 30px rgba(47,107,255,.28);
}

.aval-cta-btn-primary .elementor-button,
.elementor-button.aval-cta-btn-primary,
a.aval-cta-btn-primary,
button.aval-cta-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:64px;
  padding:16px 26px;

  border:
    1px solid
    var(--aval-cta-button-border) !important;

  border-radius:14px !important;

  background:
    var(--aval-cta-button-background) !important;

  color:#FFFFFF !important;

  font-weight:800;
  line-height:1.4;
  text-decoration:none;

  box-shadow:
    var(--aval-cta-button-shadow) !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.aval-cta-btn-primary .elementor-button:hover,
.elementor-button.aval-cta-btn-primary:hover,
a.aval-cta-btn-primary:hover,
button.aval-cta-btn-primary:hover{
  color:#FFFFFF !important;

  transform:translateY(-2px);
  filter:brightness(1.05);

  box-shadow:
    0 18px 38px rgba(47,107,255,.34) !important;
}


/* =========================================================
   18. دکمه دوم CTA

   کلاس Elementor:
   aval-cta-btn-secondary
   ========================================================= */

.aval-cta-btn-secondary .elementor-button,
.elementor-button.aval-cta-btn-secondary,
a.aval-cta-btn-secondary,
button.aval-cta-btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  min-height:64px;
  padding:16px 26px;

  border:
    1px solid rgba(255,255,255,.20) !important;

  border-radius:14px !important;

  background:
    rgba(255,255,255,.08) !important;

  color:#FFFFFF !important;

  font-weight:800;
  line-height:1.4;
  text-decoration:none;

  box-shadow:none !important;

  transition:
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease;
}

.aval-cta-btn-secondary .elementor-button:hover,
.elementor-button.aval-cta-btn-secondary:hover,
a.aval-cta-btn-secondary:hover,
button.aval-cta-btn-secondary:hover{
  background:
    rgba(255,255,255,.14) !important;

  border-color:
    rgba(255,255,255,.34) !important;

  color:#FFFFFF !important;

  transform:translateY(-2px);
}


/* =========================================================
   19. کانتینر دکمه‌های CTA

   کلاس Elementor:
   aval-cta-buttons
   ========================================================= */

.aval-cta-buttons{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;

  gap:0 !important;
}

.aval-cta-buttons > .elementor-element{
  margin:0 !important;
}


/* =========================================================
   20. تبلت
   ========================================================= */

@media (max-width:1024px){

  .aval-section{
    padding:70px 0;
  }

  .aval-grid-3,
  .aval-grid-4{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   21. موبایل
   ========================================================= */

@media (max-width:768px){

  .aval-section{
    padding:58px 0;
  }

  .aval-grid-2,
  .aval-grid-3,
  .aval-grid-4{
    grid-template-columns:1fr;
  }

  .aval-section-head{
    text-align:right;
  }

  .aval-subtitle{
    margin-inline:0;
    font-size:15px;
  }

  /* دکمه تمام‌عرض موبایل */
  .aval-mobile-full{
    width:100% !important;
  }

  /* Blur سبک‌تر هدر در موبایل */
  .whb-main-header.whb-sticked,
  .whb-sticked .whb-main-header,
  .whb-clone.whb-sticked{
    -webkit-backdrop-filter:
      blur(9px) saturate(115%);

    backdrop-filter:
      blur(9px) saturate(115%);
  }

  /* CTA موبایل */
  .aval-cta-dark{
    padding:34px 20px;
    border-radius:22px;
  }

  .aval-cta-buttons{
    flex-direction:column;
    align-items:stretch;
    gap:10px !important;
  }

  .aval-cta-btn-primary,
  .aval-cta-btn-secondary{
    width:100%;
  }

  .aval-cta-btn-primary .elementor-button,
  .aval-cta-btn-secondary .elementor-button,
  .elementor-button.aval-cta-btn-primary,
  .elementor-button.aval-cta-btn-secondary,
  a.aval-cta-btn-primary,
  a.aval-cta-btn-secondary{
    width:100%;
    min-height:58px;
  }
}


/* =========================================================
   22. کاهش حرکت برای کاربران حساس به انیمیشن
   ========================================================= */

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

  html{
    scroll-behavior:auto;
  }

  .aval-btn,
  .elementor-button,
  .aval-card,
  .wd-product .product-wrapper,
  .whb-main-header,
  .whb-clone,
  .aval-cta-btn-primary .elementor-button,
  .aval-cta-btn-secondary .elementor-button{
    transition:none !important;
  }

  .aval-btn:hover,
  .elementor-button:hover,
  .btn:hover,
  .button:hover,
  button:hover,
  input[type="submit"]:hover,
  .aval-cta-btn-primary .elementor-button:hover,
  .aval-cta-btn-secondary .elementor-button:hover{
    transform:none !important;
  }
}

/* =========================================================
   Aval CRM — Page Section Panels
   برای هماهنگی سکشن‌ها با بک‌گراند روشن سایت
   ========================================================= */

:root{
  --aval-site-bg:#F3F8FC;
  --aval-section-radius:15px;
  --aval-section-gap:28px;
}

/* بک‌گراند کلی صفحه، اگر از تنظیمات Woodmart کامل اعمال نشده باشد */
.main-page-wrapper,
.site-content,
.elementor{
  background-color:var(--aval-site-bg);
}

/* کلاس عمومی برای سکشن‌هایی که باید مثل پنل روی بک‌گراند سایت بنشینند */
.aval-page-panel{
  width:min(var(--aval-container,1200px), calc(100% - 32px));
  margin:0 auto var(--aval-section-gap);
  border-radius:var(--aval-section-radius);
  overflow:hidden;
  background:#FFFFFF;
  background-clip:padding-box;
  border:1px solid rgba(47,107,255,.06);
  box-shadow:0 8px 22px rgba(7,26,58,.025);
}

/* وقتی داخل پنل از aval-container استفاده می‌شود، عرض داخلی درست بماند */
.aval-page-panel > .aval-container{
  width:min(100%, calc(100% - 32px));
}

/* نسخه روشن هماهنگ با بک‌گراند سایت */
.aval-page-panel-soft{
  background:
    radial-gradient(circle at 12% 18%, rgba(0,199,244,.08), transparent 30%),
    radial-gradient(circle at 88% 82%, rgba(108,43,255,.07), transparent 32%),
    linear-gradient(180deg,#FFFFFF 0%,#F7FBFF 100%);
}

/* نسخه بدون سایه، برای سکشن‌های خیلی ساده مثل FAQ */
.aval-page-panel-flat{
  box-shadow:none;
  border-color:rgba(47,107,255,.07);
}

/* اگر سکشن مستقیم با کلاس‌های صفحات قبلی ساخته شده باشد */
.aval-home-v3 > .aval-section,
.aval-about-v1 > .aval-section,
.aval-review-v1 > .aval-section,
.aval-packages-v1 > .aval-section,
.aval-about-v1 > .about-statement,
.aval-review-v1 > .review-offer-strip,
.aval-packages-v1 > .pkg-statement,
.aval-about-v1 > .about-trust{
  width:min(var(--aval-container,1200px), calc(100% - 32px));
  margin:0 auto var(--aval-section-gap);
  border-radius:var(--aval-section-radius);
  overflow:hidden;
  background-clip:padding-box;
}

/* چون داخل سکشن‌های بالا دوباره aval-container داریم، عرض داخلی را تنظیم می‌کنیم */
.aval-home-v3 > .aval-section > .aval-container,
.aval-about-v1 > .aval-section > .aval-container,
.aval-review-v1 > .aval-section > .aval-container,
.aval-packages-v1 > .aval-section > .aval-container,
.aval-about-v1 > .about-statement > .aval-container,
.aval-review-v1 > .review-offer-strip > .aval-container,
.aval-packages-v1 > .pkg-statement > .aval-container,
.aval-about-v1 > .about-trust > .aval-container{
  width:min(100%, calc(100% - 32px));
}

/* فاصله بالای اولین سکشن صفحه کمتر باشد */
.aval-home-v3:first-child > .aval-section:first-child,
.aval-about-v1:first-child > .aval-section:first-child,
.aval-review-v1:first-child > .aval-section:first-child,
.aval-packages-v1:first-child > .aval-section:first-child{
  margin-top:24px;
}

/* موبایل */
@media (max-width:768px){
  :root{
    --aval-section-radius:15px;
    --aval-section-gap:18px;
  }

  .aval-page-panel,
  .aval-home-v3 > .aval-section,
  .aval-about-v1 > .aval-section,
  .aval-review-v1 > .aval-section,
  .aval-packages-v1 > .aval-section,
  .aval-about-v1 > .about-statement,
  .aval-review-v1 > .review-offer-strip,
  .aval-packages-v1 > .pkg-statement,
  .aval-about-v1 > .about-trust{
    width:calc(100% - 20px);
  }
}
/* تنظیم عمومی برچسب‌های Aval */
.aval-badge {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: fit-content !important;
  max-width: 100%;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
  padding: 7px 14px;
  line-height: 1.6 !important;
  white-space: normal;
  vertical-align: middle;
  transform: none !important;
  z-index: auto !important;
}

/* =========================================================
   Aval CRM — Gradient Card Borders
   نسخه اصلاح‌شده برای تمام باکس‌های مشخص‌شده
   ========================================================= */

/* باکس‌های دارای لبه گرادیانی */
.path-card,
.ap-journey-item,
.ap-image-box,
.ap-deliver-grid > .aval-card {
  position: relative;
  box-sizing: border-box !important;

  /* ضخامت لبه گرادیانی */
  border: 2px solid transparent !important;

  /* گردی گوشه‌ها */
  border-radius: var(--aval-radius-lg, 22px) !important;

  /* پس‌زمینه سفید و لبه گرادیانی اول CRM */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(
      --aval-brand-gradient,
      linear-gradient(
        135deg,
        #00c7f4 0%,
        #2f6bff 52%,
        #6c2bff 100%
      )
    ) border-box !important;

  box-shadow:
    0 12px 32px rgba(7, 26, 58, 0.06);

  overflow: hidden;

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

/* افکت هاور */
.path-card:hover,
.ap-journey-item:hover,
.ap-image-box:hover,
.ap-deliver-grid > .aval-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 16px 38px rgba(47, 107, 255, 0.12),
    0 6px 18px rgba(108, 43, 255, 0.08) !important;
}

/* حفظ خوانایی محتوای داخل کارت‌ها */
.ap-deliver-grid > .aval-card h3 {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

.ap-deliver-grid > .aval-card p {
  position: relative;
  z-index: 1;
}

/* حذف حرکت برای کاربران حساس به انیمیشن */
@media (prefers-reduced-motion: reduce) {
  .path-card,
  .ap-journey-item,
  .ap-image-box,
  .ap-deliver-grid > .aval-card {
    transition: none !important;
  }

  .path-card:hover,
  .ap-journey-item:hover,
  .ap-image-box:hover,
  .ap-deliver-grid > .aval-card:hover {
    transform: none !important;
  }
}

/* حذف »نو موبایل در دسکتاپ */

@media (min-width: 1025px) {
    .wd-sticky-nav {
        display: none !important;
    }
}