/* BestTeacherOnline Persian RTL overrides */
html[dir="rtl"] {
  direction: rtl;
}

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
  font-family: "Vazirmatn", Tahoma, sans-serif;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .navmenu,
html[dir="rtl"] .btn,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
  font-family: "Vazirmatn", Tahoma, sans-serif;
}

/* Header */
html[dir="rtl"] .header .logo img {
  margin-right: 0;
  margin-left: 8px;
}

html[dir="rtl"] .header .logo span {
  padding-left: 0;
  padding-right: 2px;
}

html[dir="rtl"] .header .btn-getstarted {
  margin-left: 0;
  margin-right: 30px;
}

/* Desktop navigation */
@media (min-width: 1200px) {
  html[dir="rtl"] .navmenu a i,
  html[dir="rtl"] .navmenu a:focus i {
    margin-left: 0;
    margin-right: 5px;
  }

  html[dir="rtl"] .navmenu li:last-child a {
    padding-right: 15px;
    padding-left: 0;
  }

  html[dir="rtl"] .navmenu .dropdown ul {
    left: auto;
    right: 14px;
  }

  html[dir="rtl"] .navmenu .dropdown .dropdown ul {
    left: auto;
    right: 100%;
    top: 0;
  }

  html[dir="rtl"] .navmenu .dropdown .dropdown:hover > ul {
    left: auto;
    right: 100%;
    top: 0;
  }
}

/* Mobile navigation */
@media (max-width: 1199px) {
  html[dir="rtl"] .mobile-nav-toggle {
    margin-right: 0;
    margin-left: 10px;
  }

  html[dir="rtl"] .navmenu a i,
  html[dir="rtl"] .navmenu a:focus i {
    margin-left: 0;
    margin-right: 5px;
  }

  html[dir="rtl"] .mobile-nav-active .mobile-nav-toggle {
    right: auto;
    left: 15px;
    margin-left: 0;
    margin-right: 0;
  }

  html[dir="rtl"] .navmenu .active i,
  html[dir="rtl"] .navmenu .active:focus i {
    transform: none;
  }
}

/* Global RTL rule for arrows next to link text.
   The arrow always points left. Hover only moves it forward; it never rotates. */
html[dir="rtl"] a .bi-arrow-right,
html[dir="rtl"] button .bi-arrow-right,
html[dir="rtl"] .btn .bi-arrow-right,
html[dir="rtl"] .cta-button .bi-arrow-right,
html[dir="rtl"] .btn-primary-custom .bi-arrow-right,
html[dir="rtl"] .btn-read-more .bi-arrow-right {
  transform: rotate(180deg) !important;
  transition: transform 0.3s ease;
}

html[dir="rtl"] a:hover .bi-arrow-right,
html[dir="rtl"] button:hover .bi-arrow-right,
html[dir="rtl"] .btn:hover .bi-arrow-right,
html[dir="rtl"] .cta-button:hover .bi-arrow-right,
html[dir="rtl"] .btn-primary-custom:hover .bi-arrow-right,
html[dir="rtl"] .btn-read-more:hover .bi-arrow-right {
  transform: rotate(180deg) translateX(4px) !important;
}

/* Any standalone right-arrow also keeps the RTL direction. */
html[dir="rtl"] .bi-arrow-right {
  transform: rotate(180deg) !important;
}

html[dir="rtl"] .bi-arrow-left {
  transform: none;
}

/* Keep directional arrows vertically aligned with the text. */
html[dir="rtl"] .bi-arrow-right,
html[dir="rtl"] .bi-arrow-left {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* Buttons and inline directional icons */
html[dir="rtl"] .cta-button i,
html[dir="rtl"] .btn-primary-custom i,
html[dir="rtl"] .btn-read-more i {
  margin-left: 0;
  margin-right: 8px;
}

/* Footer */
html[dir="rtl"] .footer .footer-links ul li {
  justify-content: flex-start;
}

html[dir="rtl"] .footer .footer-links ul a:hover {
  transform: translateX(-5px);
}

html[dir="rtl"] .footer .footer-newsletter form .btn-subscribe {
  right: auto;
  left: 5px;
}

html[dir="rtl"] .footer .footer-bottom .legal-links {
  justify-content: flex-start;
}

/* Breadcrumbs */
html[dir="rtl"] .page-title .breadcrumbs .breadcrumb .breadcrumb-item a i {
  margin-right: 0;
  margin-left: 0.2rem;
}

html[dir="rtl"] .page-title .breadcrumbs .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  float: right;
}

/* Portfolio details */
html[dir="rtl"] .portfolio-details .hero-image-wrapper .floating-badge {
  left: auto;
  right: 24px;
}

html[dir="rtl"] .portfolio-details .hero-image-wrapper .portfolio-slider .swiper-button-prev {
  left: auto;
  right: 16px;
}

html[dir="rtl"] .portfolio-details .hero-image-wrapper .portfolio-slider .swiper-button-next {
  right: auto;
  left: 16px;
}

/* Service details */
html[dir="rtl"] .service-details .service-hero .service-badge {
  left: auto;
  right: 24px;
}

html[dir="rtl"] .service-details .service-process .process-timeline::before {
  left: auto;
  right: 28px;
}

html[dir="rtl"] .service-details .service-process .process-step {
  padding-left: 0;
  padding-right: 72px;
}

/* Forms */
html[dir="rtl"] .php-email-form .error-message,
html[dir="rtl"] .php-email-form .sent-message,
html[dir="rtl"] .php-email-form .loading {
  text-align: right;
}

html[dir="rtl"] .footer .footer-newsletter form input[type="email"] {
  text-align: right;
}

/* Legal and content pages */
html[dir="rtl"] .privacy,
html[dir="rtl"] .terms {
  text-align: right;
}

/* Keep media and code-like values visually stable */
html[dir="rtl"] img {
  direction: ltr;
}

/* Scroll controls */
html[dir="rtl"] .scroll-top {
  right: auto;
  left: 15px;
}


/* RTL navigation arrows: keep chevrons in their natural direction on hover/active. */
html[dir="rtl"] .navmenu .toggle-dropdown,
html[dir="rtl"] .navmenu .toggle-dropdown:hover,
html[dir="rtl"] .navmenu .toggle-dropdown:focus,
html[dir="rtl"] .navmenu .dropdown:hover > a .toggle-dropdown,
html[dir="rtl"] .navmenu .dropdown > a:focus .toggle-dropdown,
html[dir="rtl"] .navmenu .dropdown > a.active .toggle-dropdown {
  transform: none !important;
}

/* Portfolio: Isotope calculates positions from the right in RTL. */
html[dir="rtl"] .portfolio .isotope-container {
  direction: rtl;
}

/* Why us: move the highlighted ribbon from the right corner to the left corner in RTL. */
html[dir="rtl"] .why-us .features-grid .feature-box.highlight .feature-ribbon {
  right: auto;
  left: -32px;
  transform: rotate(-45deg);
}


/* Services: keep the "محبوب" badge on the left side of the card. */
html[dir="rtl"] .services .popular,
html[dir="rtl"] .services .popular-badge,
html[dir="rtl"] .services .service-card .popular,
html[dir="rtl"] .services .service-card .popular-badge {
  right: auto;
  left: 0;
}

/* RTL alignment for why-us statistics and footer heading accents. */
html[dir="rtl"] .why-us .sidebar-content .stat-cards .stat-card {
  border-left: 0;
  border-right: 4px solid var(--accent-color);
}

html[dir="rtl"] .footer h4:after {
  left: auto;
  right: 0;
}

/* Featured service badge: keep the badge anchored to the top-left corner in RTL. */
html[dir="rtl"] .services .service-card .featured-badge {
  right: auto;
  left: 16px;
}



/* Play-circle icons: keep the play arrow pointing right in RTL, including on hover. */
html[dir="rtl"] .bi-play-circle,
html[dir="rtl"] a:hover .bi-play-circle,
html[dir="rtl"] button:hover .bi-play-circle {
  transform: none !important;
}


/* About image composition: mirror the visual arrangement for RTL. */
html[dir="rtl"] .about .about-images-wrapper {
  padding-right: 0;
  padding-left: 60px;
}

html[dir="rtl"] .about .image-offset {
  right: auto;
  left: 0;
}

html[dir="rtl"] .about .experience-badge {
  left: auto;
  right: -30px;
}

html[dir="rtl"] .about .shape-pattern {
  right: auto;
  left: 20px;
}

@media (max-width: 992px) {
  html[dir="rtl"] .about .about-images-wrapper {
    padding-left: 0;
  }
}

@media (max-width: 768px) {
  html[dir="rtl"] .about .experience-badge {
    right: 20px;
  }
}
/* Terms service panel bullets: keep the bullet on the right in RTL. */
html[dir="rtl"] .terms-of-service .disclaimer-panel .panel-list li {
  padding-left: 0;
  padding-right: 20px;
  text-align: right;
}

html[dir="rtl"] .terms-of-service .disclaimer-panel .panel-list li::before {
  left: auto;
  right: 0;
}

/* Privacy page: move accent borders and list bullets to the right in RTL. */
html[dir="rtl"] .privacy .policy-intro-card {
  border-left: 0;
  border-right: 4px solid var(--accent-color);
}

html[dir="rtl"] .privacy .sharing-block {
  border-left: 0;
  border-right: 3px solid var(--accent-color);
}

html[dir="rtl"] .privacy .policy-section .section-content ul li {
  padding-left: 0;
  padding-right: 24px;
}

html[dir="rtl"] .privacy .policy-section .section-content ul li::before {
  left: auto;
  right: 0;
}