/*
Theme Name: Salepush Child
Theme URI: http://demo.7iquid.com/salepush
Author: 7iquid
Author URI: http://themeforest.net/user/7iquid
Template: salepush
Description: Salepush is a bright, eye-catching and minimalistic WordPress theme, that would be a perfect match for SEO companies, digital marketing agencies or any other corporate enterprises. The theme helps you to get your site up and running in less than minutes with the One Click Demo Importer. Create pages easily with the Drag & Drop Page Builder (Elementor Free) and fully responsive, retina ready and easy to customize.
Version: 1.2
License: ThemeForest
License URI: https://themeforest.net/licenses
Text Domain: salepush-child
Tags: elementor, agency, seo, business, smm, consulting, corporate, creative, e-commerce, social media marketing agency, fintech, marketing, multipurpose, one page, portfolio, shop, translation-ready
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/



/*-----------------------------------------------------------------------------------------*/


/* Main Navigation Bar Underline Color to Match the Hatchup Brand Guideline*/
.pxl-primary-menu > li > a:before {
  background: #0a1e34;
  background-image: linear-gradient(90deg, #0a1e34 0%, #4ea6a2 100%);
}



/*-----------------------------------------------------------------------------------------*/


/*FAQ Style 5 color to match the Gradient of Hatchup Brand Guideline*/
/* ================================
   Accordion Style5 Custom Styling (Fixed Icon Position)
   ================================ */

/* گرادیان عنوان‌ها */
.pxl-accordion.style5 .pxl-ac-title:not(.active):after,
.pxl-accordion.style5 .pxl-ac-title.active:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -20px;
  right: -20px;
  height: 100%;
  border-radius: 30px;
  background: #0a1e34 !important; /* fallback */
  background-image: linear-gradient(90deg, #0a1e34 0%, #4ea6a2 100%) !important;
  z-index: 0;
}

/* متن و شماره‌ها سفید */
.pxl-accordion.style5 .pxl-ac-title,
.pxl-accordion.style5 .pxl-ac-title.active,
.pxl-accordion.style5 .pxl-ac-title .pxl-ac-title-text {
  color: #fff !important;
  position: relative;
  z-index: 1; /* متن روی گرادیان بیاد */
}

/* آیکون + / - (سمت راست) */
.pxl-accordion.style5 .pxl-ac-title:before {
  color: #fff !important;
  position: absolute;
  right: 20px;   /* آیکون همیشه سمت راست */
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;    /* بیاد روی گرادیان */
}

/* اگر title-icon i یا svg استفاده شده باشه */
.pxl-accordion.style5 .pxl-ac-title .title-icon i,
.pxl-accordion.style5 .pxl-ac-title .title-icon svg {
  color: #fff !important;
  fill: #fff !important;
}


/*-----------------------------------------------------------------------------------------*/


/* Progress bar in the Journey Field to have the Hatchup Brand color*/
/* ----------- Progress Bar Custom Style ----------- */
/* فقط تغییر رنگ نوار پیشرفت */
.pxl-progressbar .pxl-progress-bar {
  background: linear-gradient(90deg, #0a1e34 0%, #4ea6a2 100%) !important;
}


/*-----------------------------------------------------------------------------------------*/


/* Circle tabs in the private equity part to have the correct Hatchup colors*/
/* Circle Tabs — background & icon color only (non-locking) */
/* Circle Tabs — رنگ‌ها + انیمیشن نرم */

/* حالت عادی */
.pxl-circle-tabs .tabs-icon .tab-icon{
  background-color: #0a1e34 !important;
  color: #4ea6a2; /* برای آیکون‌های فونتی و SVG */
  transition: background 0.3s ease;
}

.pxl-circle-tabs .tabs-icon .tab-icon svg *,
.pxl-circle-tabs .tabs-icon .tab-icon i {
  fill: currentColor !important;
  color: currentColor !important;
  transition: fill 0.3s ease, color 0.3s ease;
}

/* هاور و اکتیو */
.pxl-circle-tabs .tabs-icon .tab-icon:hover,
.pxl-circle-tabs .tabs-icon .tab-icon.active{
  background: linear-gradient(90deg, #0a1e34 0%, #4ea6a2 100%) !important;
  color: #ffffff;
}

/* خنثی کردن فیلتر پیش‌فرض قالب */
.pxl-circle-tabs .tabs-icon .tab-icon i,
.pxl-circle-tabs .tabs-icon .tab-icon svg,
.pxl-circle-tabs .tabs-icon .tab-icon.active i,
.pxl-circle-tabs .tabs-icon .tab-icon.active svg{
  filter: none !important;
}



/*-----------------------------------------------------------------------------------------*/


/*what you need to have section in the venture studio cards on hover gradient color to be Hatchup brand guideline*/
/* Fancy Box (layout-7) — برند شما: 
   حالت عادی = گرادیان برند + متن/آیکون سفید
   حالت هاور = فقط تغییر زاویه گرادیان (همچنان متن/آیکون سفید) */

/* حالت عادی: پس‌زمینه گرادیان برند */
.pxl-fancy-box.layout-7 .box-inner{
  background: linear-gradient(90deg, #0a1e34 0%, #4ea6a2 100%) !important;
}

/* متن‌ها در هر دو حالت سفید باشند (بدون دست‌زدن به زمان ترنزیشن‌ها) */
.pxl-fancy-box.layout-7 .box-inner .box-title,
.pxl-fancy-box.layout-7 .box-inner .box-description{
  color: #ffffff !important;
}

/* آیکون‌ها در هر دو حالت سفید (از همان مکانیزم فیلتر استفاده می‌کنیم تا آیکون‌های SVG/فونتی قفل نشوند) */
.pxl-fancy-box.layout-7 .box-inner .box-icon{
  filter: brightness(0) invert(1);
}

/* هاور: همان اوورلی موجود فقط با زاویه‌ی متفاوتِ گرادیان */
.pxl-fancy-box.layout-7 .box-inner:before{
  background: linear-gradient(270deg, #0a1e34 0%, #4ea6a2 100%) !important;
}


/*-----------------------------------------------------------------------------------------*/

/*blog posts in the home page had the orange color on meta dates that i wanted to change to our color palete*/
/* تغییر رنگ نارنجی تقویم تاریخ پست‌ها به گرادیان برند */
/* تاریخ پست‌ها – تغییر پس‌زمینه شماره از نارنجی به گرادیان برند */
.pxl-post-carousel.layout-post-3 .item-inner .meta-date h4 {
  background: #0a1e34 !important; /* fallback */
  background-image: linear-gradient(90deg, #0a1e34 0%, #4ea6a2 100%) !important;
  color: #fff !important; /* شماره سفید بماند */
}

/*-----------------------------------------------------------------------------------------*/

/*single underline colorful style change to our color palete*/

/* تغییر رنگ خط زیر عنوان‌ها به گرادیان برند */
/* 🎨 تغییر رنگ خط زیر عنوان‌ها به گرادیان طلایی-فیروزه‌ای */
.pxl-heading-layout-1 .heading-underline.solid .pxl-divider {
  background: linear-gradient(90deg, #e4b562 0%, #4ea6a2 100%) !important;
  width: 112px !important;
  height: 3px !important;
  border-radius: 3px !important;
  opacity: 1 !important;
}

/* در صورت وجود حالت before/after برای افکت */
.pxl-heading-layout-1 .heading-underline.solid .pxl-divider::before,
.pxl-heading-layout-1 .heading-underline.solid .pxl-divider::after {
  background: linear-gradient(90deg, #e4b562 0%, #4ea6a2 100%) !important;
}


/*-----------------------------------------------------------------------------------------*/

/*single underline colorful style in the header of somepages that exist to our color palete&/

/* تغییر رنگ خط زیر subtitle ها به گرادیان طلایی-فیروزه‌ای */
.pxl-pt-wrap .sub-title .pxl-divider {
  background: linear-gradient(90deg, #e4b562 0%, #4ea6a2 100%) !important;
  height: 3px !important;
  border-radius: 3px !important;
  opacity: 1 !important;
}

/* اگر نسخه‌های دیگری از subtitle در صفحه‌های خاص استفاده می‌کنی */
.elementor-widget-pxl_page_subtitle .pxl-divider::before,
.elementor-widget-pxl_page_subtitle .pxl-divider::after {
  background: linear-gradient(90deg, #e4b562 0%, #4ea6a2 100%) !important;
}

/*-----------------------------------------------------------------------------------------*/

/*single underline in the kpi and metrics widget in the adapt lab page*/

/* 🎨 تغییر رنگ تمام خطوط divider به گرادیان طلایی-فیروزه‌ای برند */
.pxl-divider {
  background: linear-gradient(90deg, #e4b562 0%, #4ea6a2 100%) !important;
  height: 3px !important;
  border-radius: 3px !important;
  opacity: 1 !important;
}

/* در صورت وجود افکت های اضافی مثل before/after */
.pxl-divider::before,
.pxl-divider::after {
  background: linear-gradient(90deg, #e4b562 0%, #4ea6a2 100%) !important;
}

/*-----------------------------------------------------------------------------------------*/

/*small triangle in boxes*/

/* Fancy Box layout-5 – مثلث گرادیانی */
.pxl-fancy-box.layout-5 .box-inner::before{
  content:"" !important;
  position:absolute !important;

  /* موقعیت مثلث؛ برابر با نسخه قبلی */
  left:45px !important;

  /* ارتفاع مثلث قبلی 18px بود ⇒ نوک آن باید ~18px بالاتر باشد */
  top:-18px !important;

  /* مرزهای مثلث قبلی را خاموش کن */
  border:0 !important;

  /* مستطیل کوچک با گرادیان که به مثلث برش می‌خورد */
  width:24px !important;      /* برابر با 12px+12px قبلی */
  height:18px !important;     /* برابر با border-bottom قبلی */

  background: linear-gradient(90deg,#e4b562 0%, #4ea6a2 100%) !important;
  clip-path: polygon(50% 0, 0 100%, 100% 100%) !important;
  z-index:2 !important;       /* روی کارت دیده شود */
}

/* اگر سایت RTL است، جای مثلث را سمت راست بگذار */
[dir="rtl"] .pxl-fancy-box.layout-5 .box-inner::before{
  left:auto !important;
  right:45px !important;
}
/*-----------------------------------------------------------------------------------------*/