/* RTL Support for Arabic Language */

/* Support both html.lang-ar and body.lang-ar for early initialization */
html.lang-ar,
body.lang-ar {
  text-align: right;
  direction: rtl;
}

html.lang-ar body {
  text-align: right;
  direction: rtl;
}

/* Hero Section - Desktop: right aligned, Mobile: centered (see media query below) */
body.lang-ar .site-blocks-cover h1,
body.lang-ar .site-blocks-cover p {
  text-align: right;
}

/* Hero Section - Center everything on mobile for Arabic */
@media (max-width: 991.98px) {
  /* Make sure the column takes full width and centers content */
  body.lang-ar .site-blocks-cover .col-lg-6,
  html.lang-ar .site-blocks-cover .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.lang-ar .site-blocks-cover h1,
  body.lang-ar .site-blocks-cover p,
  body.lang-ar .site-blocks-cover .modern-badge,
  html.lang-ar .site-blocks-cover h1,
  html.lang-ar .site-blocks-cover p,
  html.lang-ar .site-blocks-cover .modern-badge {
    text-align: center !important;
  }

  /* Override Bootstrap mr-auto in RTL mobile */
  body.lang-ar .site-blocks-cover .mr-auto,
  html.lang-ar .site-blocks-cover .mr-auto {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* Force ALL divs in hero to be centered */
  body.lang-ar .site-blocks-cover .col-lg-6 > div,
  html.lang-ar .site-blocks-cover .col-lg-6 > div {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Buttons centered */
  body.lang-ar .site-blocks-cover .btn,
  html.lang-ar .site-blocks-cover .btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Remove mr-2 margin on buttons in RTL mobile */
  body.lang-ar .site-blocks-cover .btn.mr-2,
  html.lang-ar .site-blocks-cover .btn.mr-2 {
    margin-right: auto !important;
  }
}

/* Hero buttons - centered in Arabic on ALL screen sizes */
body.lang-ar .site-blocks-cover .btn,
html.lang-ar .site-blocks-cover .btn {
  float: none !important;
  display: inline-block !important;
  margin-left: 5px !important;
  margin-right: 5px !important;
}

/* Center the entire hero content area in Arabic */
body.lang-ar .site-blocks-cover .col-lg-6,
html.lang-ar .site-blocks-cover .col-lg-6 {
  text-align: center !important;
}

body.lang-ar .site-blocks-cover .col-lg-6 > div,
html.lang-ar .site-blocks-cover .col-lg-6 > div {
  text-align: center !important;
}

/* Section Titles and Leads */
body.lang-ar .section-title,
body.lang-ar .lead {
  text-align: center;
}

/* Feature Blocks */
body.lang-ar .unit-4 {
  text-align: center;
}

body.lang-ar .unit-4 h3,
body.lang-ar .unit-4 p {
  text-align: center;
}

/* Services Section - Text blocks */
body.lang-ar .feature-big h2,
body.lang-ar .feature-big p,
body.lang-ar #services-section h2,
body.lang-ar #services-section p {
  text-align: justify;
  text-align-last: right;
}

/* About Section */
body.lang-ar #about-section h2,
body.lang-ar #about-section p {
  text-align: justify;
  text-align-last: right;
}

/* Lists - ul-check */
body.lang-ar .ul-check {
  padding-left: 0;
  padding-right: 0;
}

body.lang-ar .ul-check li {
  padding-left: 0;
  padding-right: 35px;
  text-align: right;
}

body.lang-ar .ul-check li:before {
  left: auto;
  right: 0;
}

/* Contact Form */
body.lang-ar #contact-section .form-control,
body.lang-ar #contact-section label,
body.lang-ar #contact-section textarea {
  text-align: right;
}

body.lang-ar #contact-section h2 {
  text-align: right;
}

/* Testimonials */
body.lang-ar .testimonial blockquote p {
  text-align: center;
}

/* Footer */
body.lang-ar .footer,
html.lang-ar .footer {
  text-align: center;
}

/* Navigation - RTL order for Arabic */
body.lang-ar .site-navbar {
  direction: rtl;
}

body.lang-ar .site-navbar .container,
body.lang-ar .site-navbar .row {
  direction: rtl;
}

body.lang-ar .site-navigation {
  text-align: left;
  direction: rtl;
}

body.lang-ar .site-menu {
  direction: rtl;
}

body.lang-ar .site-menu > li > a {
  direction: rtl;
}

/* Language switcher at the end (left in RTL) */
body.lang-ar .language-menu-item {
  direction: ltr;
}

/* Mobile Menu - Slide from left in RTL */
body.lang-ar .site-mobile-menu {
  right: auto;
  left: 0;
  transform: translateX(-110%);
}

body.lang-ar.offcanvas-menu .site-mobile-menu {
  transform: translateX(0%);
}

body.lang-ar .site-mobile-menu .site-nav-wrap {
  direction: rtl;
}

body.lang-ar .site-mobile-menu .site-nav-wrap li a {
  text-align: right;
  padding-left: 20px;
  padding-right: 20px;
}

body.lang-ar .site-mobile-menu-header {
  direction: rtl;
}

body.lang-ar .site-mobile-menu-close {
  float: left;
}

/* Mobile menu toggle button position */
body.lang-ar .js-menu-toggle {
  float: left;
}

/* Reorder columns for RTL in services section */
body.lang-ar .order-lg-1 {
  order: 2 !important;
}

body.lang-ar .order-lg-2 {
  order: 1 !important;
}

/* Ensure footer is visible and no extra space below */
body.lang-ar .footer,
html.lang-ar .footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Fix footer AOS elements visibility in Arabic */
body.lang-ar .footer [data-aos],
html.lang-ar .footer [data-aos],
body.lang-ar .footer .aos-init,
html.lang-ar .footer .aos-init {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}

body.lang-ar .site-wrap,
html.lang-ar .site-wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* RTL Mobile Menu Overlay Fix */
body.lang-ar.offcanvas-menu .site-wrap::before {
  opacity: 1;
  visibility: visible;
}

/* Mobile-specific RTL fixes */
@media (max-width: 991.98px) {
  /* Menu toggle button position for RTL */
  body.lang-ar .js-menu-toggle,
  html.lang-ar .js-menu-toggle {
    float: left !important;
  }

  /* Mobile menu close button */
  body.lang-ar .site-mobile-menu-close,
  html.lang-ar .site-mobile-menu-close {
    float: left !important;
  }

  /* Hero section RTL on mobile - center everything */
  body.lang-ar .site-blocks-cover .col-lg-6,
  html.lang-ar .site-blocks-cover .col-lg-6 {
    text-align: center !important;
  }

  body.lang-ar .site-blocks-cover h1,
  body.lang-ar .site-blocks-cover p,
  body.lang-ar .site-blocks-cover .modern-badge,
  html.lang-ar .site-blocks-cover h1,
  html.lang-ar .site-blocks-cover p,
  html.lang-ar .site-blocks-cover .modern-badge {
    text-align: center !important;
  }

  /* Hero buttons - center on mobile for Arabic */
  body.lang-ar .site-blocks-cover div[data-aos="fade-up"],
  html.lang-ar .site-blocks-cover div[data-aos="fade-up"] {
    text-align: center !important;
  }

  body.lang-ar .site-blocks-cover .btn,
  html.lang-ar .site-blocks-cover .btn {
    float: none !important;
    display: inline-block;
    margin: 5px;
  }

  /* Features section RTL */
  body.lang-ar .unit-4,
  html.lang-ar .unit-4 {
    text-align: center;
  }

  /* Services section RTL on mobile */
  body.lang-ar #services-section h2,
  body.lang-ar #services-section p,
  body.lang-ar .feature-big h2,
  body.lang-ar .feature-big p,
  html.lang-ar #services-section h2,
  html.lang-ar #services-section p,
  html.lang-ar .feature-big h2,
  html.lang-ar .feature-big p {
    text-align: center;
    text-align-last: center;
  }

  /* About section RTL on mobile */
  body.lang-ar #about-section h2,
  body.lang-ar #about-section p,
  html.lang-ar #about-section h2,
  html.lang-ar #about-section p {
    text-align: center;
    text-align-last: center;
  }

  /* Lists on mobile - center the container, right-align text */
  body.lang-ar .ul-check,
  html.lang-ar .ul-check {
    display: inline-block;
    text-align: right;
  }

  /* Contact form RTL on mobile */
  body.lang-ar #contact-section h2,
  body.lang-ar .contact-form-modern h2,
  html.lang-ar #contact-section h2,
  html.lang-ar .contact-form-modern h2 {
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  /* Extra small mobile RTL fixes - buttons stacked and centered */
  body.lang-ar .site-blocks-cover .btn,
  html.lang-ar .site-blocks-cover .btn {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto 10px !important;
    text-align: center !important;
  }

  /* Button container must also be centered */
  body.lang-ar .site-blocks-cover .col-lg-6 > div,
  html.lang-ar .site-blocks-cover .col-lg-6 > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Section titles center on small mobile */
  body.lang-ar .section-title,
  body.lang-ar .section-sub-title,
  html.lang-ar .section-title,
  html.lang-ar .section-sub-title {
    text-align: center !important;
  }
}