/* RTL Component Specific Fixes - Fine-tuning for all page sections
   This file contains detailed component-level adjustments for perfect RTL alignment
   MAJOR FIXES:
   - Headline areas: Remove background, keep text only
   - What We Do: Arrow positioning in hover state
   - Services: Card positioning and hover effects
   - Gallery/Slider: Arrow directions and button positioning
   - Team: Plus button hover centering
   - Blog: Details button proper positioning
   - All margins/padding: Mirror LTR to RTL
*/

/* ==================== COUNTER ITEMS ==================== */
html[dir="rtl"] .counter-item-two {
  text-align: center;
  padding: 0;
}

html[dir="rtl"] .counter-item-two .count-text {
  display: block;
  font-size: 48px;
  font-weight: 700;
  color: var(--wispaar-primary-color);
  margin-bottom: 10px;
}

html[dir="rtl"] .counter-item-two .count-text.percent:after {
  content: "%";
  margin-left: 0;
}

html[dir="rtl"] .counter-item-two .count-text.plus:after {
  content: "+";
  margin-left: 0;
}

html[dir="rtl"] .counter-item-two .counter-title {
  display: block;
  font-size: 16px;
  color: var(--wispaar-body-color);
}

/* ==================== IMAGE BORDERS & SHAPES ==================== */






/* ==================== WHAT WE DO CONTENT ==================== */
/* ==================== WHAT WE DO CONTENT ==================== */
html[dir="rtl"] .what-we-do-content {
  text-align: right;
}

html[dir="rtl"] .what-we-do-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
  flex-direction: row-reverse; /* عدد در سمت راست، محتوا در سمت چپ */
}

html[dir="rtl"] .what-we-do-item .number {
  min-width: 50px;
  margin-left: 20px;
  margin-right: 0;
  text-align: center;
  font-weight: 700;
  color: var(--wispaar-primary-color);
  font-size: 24px;
}

html[dir="rtl"] .what-we-do-item .content {
  flex: 1;
  text-align: right;
}

html[dir="rtl"] .what-we-do-item .content h5 {
  font-size: 22px;
  margin-bottom: 10px;
  color: var(--wispaar-headline-color);
  text-align: right;
}

html[dir="rtl"] .what-we-do-item .content p {
  text-align: right;
  color: var(--wispaar-body-color);
  margin-bottom: 15px;
}

html[dir="rtl"] .what-we-do-image {
  text-align: center;
}
/* ==================== SERVICE THREE ITEM DETAILED ==================== */
html[dir="rtl"] .service-three-item {
  text-align: left;
  direction: rtl;
}

/* تنظیم بخش عنوان و آیکون */
html[dir="rtl"] .service-three-item .title-icon {
}

html[dir="rtl"] .service-three-item .title-icon h5 {
  max-width: 60%;
  text-align: right;
}

html[dir="rtl"] .service-three-item .title-icon img {
  margin-left: 0;
  margin-right: 15px; /* حفظ فاصله مناسب از عنوان */
}

/* متن داخل کارت */
html[dir="rtl"] .service-three-item .content p {
  text-align: right;
}

/* لینک "بیشتر بخوانید" */
html[dir="rtl"] .service-three-item .read-more.style-two {
  position: relative;
  display: inline-flex;
  align-items:flex-start;
  color: var(--wispaar-secondary-color);
  direction: rtl;
  overflow: hidden; /* جلوگیری از بیرون‌زدگی آیکون هنگام انیمیشن */
  flex-direction: row-reverse;
  align-content: center;
  justify-content: flex-end;
}

/* آیکون فلش */
html[dir="rtl"] .service-three-item .read-more.style-two i {
  display: inline-block;
  margin-left: 0;
  margin-right: 0.6rem;
  transition: transform 0.35s ease;
  transform: rotateY(360deg); /* برگرداندن جهت فلش */
}

html[dir="rtl"] .service-three-item .read-more.style-two:hover i {
  right:110px;
}

/* هاور — آیکون به سمت چپ (در راست‌چین یعنی به "داخل" حرکت کند) */
html[dir="rtl"] .service-three-item:hover .read-more.style-two i {
  transform: rotateY(180deg) translateX(-6px);
}

/* نسخه واکنش‌گرا */
@media only screen and (max-width: 575px) {
  html[dir="rtl"] .service-three-item .title-icon {
    flex-direction: row-reverse;
    align-items: right;
  }
  html[dir="rtl"] .service-three-item .title-icon img {
    width: 0px;
    margin-right: 10px;
  }
}

/* ==================== TEAM MEMBER DETAILED ==================== */
html[dir="rtl"] .service-three-item {
  direction: rtl;
  text-align: right;
}

/* عنوان و آیکون */
html[dir="rtl"] .service-three-item .title-icon {
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
}

html[dir="rtl"] .service-three-item .title-icon h5 {
  text-align: right;
}

html[dir="rtl"] .service-three-item .title-icon img {
  margin-right: 15px;
  margin-left: 0;
}

/* لینک "بیشتر بخوانید" */
html[dir="rtl"] .service-three-item .read-more.style-two {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--wispaar-secondary-color);
  gap: 0.6rem;
  direction: rtl;
  overflow: hidden; /* جلوگیری از بیرون‌زدگی آیکون هنگام انیمیشن */
}

/* متن و آیکون فلش: حالت عادی - فلش در سمت راست قرار می‌گیرد و جهت آن به سمت چپ نمایش داده می‌شود */
html[dir="rtl"] .service-three-item .read-more.style-two i {
  position: absolute;
  right: 0px; /* فلش در سمت راست دکمه */
  top: 50%;
  transform: translateY(-50%) rotateY(180deg); /* نمایش فلش به سمت چپ */
  transition: transform 0.35s ease; /* انیمیشن نرم هنگام هاور */
  font-size: 0.9rem;
  /* فاصله کوچک از لبه تا متن */
  margin-left: 0.4rem;
}

/* هنگام هاور — فلش به سمت چپ حرکت کرده و کمی داخل متن قرار می‌گیرد */
html[dir="rtl"] .service-three-item:hover .read-more.style-two i {
  transform: translateY(-50%) translateX(-6px) rotateY(180deg);
}

/* بهبود واکنش‌گرایی */
@media only screen and (max-width: 575px) {
  html[dir="rtl"] .service-three-item .title-icon img {
    width: 40px;
    margin-right: 10px;
  }
}
/* ==================== PRICING CARD DETAILED ==================== */
html[dir="rtl"] .pricing-plan-item {
  padding: 35px;
  background: #f8fafd;
  border-radius: 8px;
  text-align: right;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.5s ease;
}

html[dir="rtl"] .pricing-plan-item.wow {
  animation: fadeInUp 0.6s ease-out;
}

html[dir="rtl"] .pricing-plan-item .badge {
  position: absolute;
  right: 0px;
  background: var(--wispaar-primary-color);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
 
}

html[dir="rtl"] .pricing-plan-item .icon {
  font-size: 60px;
  color: var(--wispaar-primary-color);
  margin-bottom: 20px;
  text-align: center;
}

html[dir="rtl"] .pricing-plan-item h5 {
  font-size: 22px;
  font-weight: 600;
  color: var(--wispaar-headline-color);
  margin-bottom: 15px;
  text-align: right;
}

html[dir="rtl"] .pricing-plan-item .price-text {
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

html[dir="rtl"] .pricing-plan-item .price-text .before {
  margin-left: 0;
  margin-right: 5px;
}

html[dir="rtl"] .pricing-plan-item .price-text .after {
  font-size: 14px;
  margin-left: 0;
  margin-right: 5px;
}

html[dir="rtl"] .pricing-plan-item ul {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
  flex: 1;
}

html[dir="rtl"] .pricing-plan-item ul li {
  text-align: right;
  padding-right: 20px;
  padding-left: 0;
  margin-bottom: 10px;
  color: var(--wispaar-body-color);
  position: relative;
}

html[dir="rtl"] .pricing-plan-item ul li:before {
  content: "✓";
  position: absolute;
  right: 0;
  color: var(--wispaar-primary-color);
  font-weight: 700;
}

html[dir="rtl"] .pricing-plan-item .theme-btn {
  width: 100%;
  text-align: center;
  margin-top: auto;
}

html[dir="rtl"] .pricing-plan-item:hover {
  box-shadow: 0 10px 40px rgba(209, 157, 30, 0.2);
  transform: translateY(-10px);
}

/* ==================== WHY CHOOSE US DETAILED ==================== */
html[dir="rtl"] .why-choose-us-content {
  text-align: right;
}

html[dir="rtl"] .why-choose-item {
  padding: 20px;
  background: #f8fafd;
  border-radius: 8px;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

html[dir="rtl"] .why-choose-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

html[dir="rtl"] .why-choose-header i {
  font-size: 20px;
  color: var(--wispaar-primary-color);
  margin-left: 0;
  margin-left: 12px;
  transform: rotateY(180deg);
}

html[dir="rtl"] .why-choose-header h5 {
  font-size: 18px;
  font-weight: 600;
  color: var(--wispaar-headline-color);
  text-align: right;
  margin: 0;
}

html[dir="rtl"] .why-choose-item p {
  text-align: right;
  color: var(--wispaar-body-color);
  margin: 0;
  line-height: 1.6;
  font-size: 14px;
}

html[dir="rtl"] .why-choose-item:hover {
  background: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

html[dir="rtl"] .why-choose-right {
  text-align: center;
  margin-right: 115px;
}

/* ==================== BLOG ITEM DETAILED ==================== */
html[dir="rtl"] .blog-item {
  text-align: right;
  padding: 0;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.5s ease;
}

html[dir="rtl"] .blog-item h4 {
  font-size: 20px;
  font-weight: 600;
  color: var(--wispaar-headline-color);
  text-align: right;
  margin: 20px 20px 10px;
  line-height: 1.4;
}

html[dir="rtl"] .blog-item h4 a:hover {
  color: var(--wispaar-primary-color);
}

html[dir="rtl"] .blog-item hr {
  margin: 15px 20px;
  border: none;
  border-top: 1px solid #e5e5e5;
}

html[dir="rtl"] .blog-item .blog-meta {
  list-style: none;
  padding: 0 20px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 15px;
}

html[dir="rtl"] .blog-item .blog-meta li {
  font-size: 14px;
  color: var(--wispaar-body-color);
}

html[dir="rtl"] .blog-item .blog-meta i {
  margin-left: 5px;
  margin-right: 0;
}

html[dir="rtl"] .blog-item .image {
  position: relative;
  overflow: hidden;
  margin: 15px 20px 20px;
  border-radius: 6px;
}

html[dir="rtl"] .blog-item .image img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

html[dir="rtl"] .blog-item .image .details-btn {
  position: absolute;
  left: auto;
  right: 20px;
  bottom: 20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: var(--wispaar-primary-color);
  color: white;
  font-size: 18px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

html[dir="rtl"] .blog-item:hover .image img {
  transform: scale(1.1);
}

html[dir="rtl"] .blog-item:hover .details-btn {
  opacity: 1;
  visibility: visible;
}

/* ==================== CLIENT LOGO AREA ==================== */
html[dir="rtl"] .client-logo-wrap-two {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

html[dir="rtl"] .client-logo-item {
  flex: 0 0 calc(25% - 22.5px);
  text-align: center;
}

html[dir="rtl"] .client-logo-item img {
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

html[dir="rtl"] .client-logo-item:hover img {
  opacity: 1;
}

/* ==================== END COMPONENT SPECIFIC FIXES ==================== */

/* ==================== GALLERY/SLIDER ARROW FIXES FOR RTL ==================== */
/* Ensure arrows are mirrored, spaced, and centered inside circular buttons for RTL */
html[dir="rtl"] .slider-arrow-btns {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* فاصله بین دکمه‌ها */
  flex-direction: row-reverse; /* ترتیب دکمه‌ها را معکوس می‌کند تا جهت مناسب RTL باشد */
}

html[dir="rtl"] .slider-arrow-btns .slick-arrow {
  width: 56px;
  height: 56px;
  padding: 0; /* آیکون به صورت مرکزی قرار می‌گیرد */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px; /* اندازه آیکون داخل دایره */
  border-radius: 50%;
  background: var(--wispaar-border-color);
  color: var(--wispaar-secondary-color);
  box-shadow: -3px 0 60px rgba(209, 157, 30, 0.2); /* معکوس افکت سایه برای RTL */
  transition: background 0.35s ease, color 0.35s ease, transform 0.25s ease;
}

html[dir="rtl"] .slider-arrow-btns .slick-arrow:focus,
html[dir="rtl"] .slider-arrow-btns .slick-arrow:hover {
  color: var(--wispaar-dark-color);
  background: var(--wispaar-primary-color);
}

/* اگر در CSS اصلی rule ای برای first-child وجود دارد با اشتباه نگارش (margin-]left)
   اینجا برای RTL مقدار مناسب را می‌دهیم */
html[dir="rtl"] .slider-arrow-btns .slick-arrow:first-child {
  margin-right: 10px;
  margin-left: 0;
  transform: none; /* جلوگیری از چرخش کلی دکمه که ممکن است در فایل اصلی باشد */
}

/* آیکون‌ها را آینه کن تا جهت‌ها در فارسی درست نمایش داده شوند */
html[dir="rtl"] .slider-arrow-btns .slick-arrow i {
  display: inline-block;
  transform: rotateY(30deg); /* معکوس کردن جهت آیکون فونت‌آیکون */
  transition: transform 0.25s ease;
}

/* در حالت هاور کمی بزرگ‌تر یا جابه‌جا شود (اختیاری، ظاهر بهتر) */
html[dir="rtl"] .slider-arrow-btns .slick-arrow:hover i {
  transform: rotateY(0deg) translateX(-2px);
}

/* نسخه واکنش‌گرا: دایره‌ها کمی کوچکتر روی موبایل */
@media only screen and (max-width: 575px) {
  html[dir="rtl"] .slider-arrow-btns .slick-arrow {
    width: 48px;
    height: 48px;
    font-size: 16px;
  }
}

/* ==================== END GALLERY/SLIDER ARROW FIXES FOR RTL ==================== */