/* RTL adjustments and Arabic font */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;700&display=swap');

html[dir="rtl"], body {
  direction: rtl;
  unicode-bidi: embed;
  font-family: 'Tajawal', 'Arial', sans-serif;
  text-align: right;
}

/* Ensure headings also use the Arabic font for a consistent look */
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"] .section_title .title {
  font-family: 'Tajawal', sans-serif !important;
}

/* Flip common float/text utilities */
.text-left { text-align: right !important; }
.text-right { text-align: left !important; }

.float-left { float: right !important; }
.float-right { float: left !important; }

/* Navbar alignment */
.navbar-nav { margin-left: 0 !important; margin-right: 0 !important; }
.navbar-nav .ml-auto { margin-left: 0 !important; margin-right: auto !important; }

/* Form placeholders alignment */
input, textarea, button {
  text-align: right;
}

/* Footer links */
.footer_link .link { text-align: right; }

/* Small helpers for components that used justify-content-end
  Keep semantics but ensure RTL reverses content flow where appropriate */
.justify-content-end { justify-content: flex-end !important; }

/* Adjust icon placement in contact info */
.single_info .info_icon { margin-left: 0; margin-right: 15px; }

/* Ensure images that were positioned to the right now stay visually consistent */
.about_image { text-align: right; }

/* Defensive rules: prevent accidental hiding or layout collapse in RTL mode */
html[dir="rtl"] section { display: block !important; visibility: visible !important; }
html[dir="rtl"] .container, html[dir="rtl"] .container-fluid { display: block !important; }
html[dir="rtl"] .row { display: flex !important; flex-wrap: wrap !important; }
html[dir="rtl"] [class*="col-"] { display: block !important; }

/* Keep center-aligned sections centered */
.section_title.text-center { text-align: center; }

/* Specific RTL fix for section titles with padding-bottom utility (pb-25) */
html[dir="rtl"] .section_title.pb-25 {
  text-align: right !important;
  direction: rtl !important;
}

/* Strong enforcement for .section_title.pb-25 to avoid LTR artifacts */
html[dir="rtl"] .section_title.pb-25,
html[dir="rtl"] .section_title.pb-25 * {
  direction: rtl !important;
  unicode-bidi: embed !important;
  text-align: right !important;
}

/* Hide stray <br> in these section titles and ensure comfortable spacing */
html[dir="rtl"] .section_title.pb-25 br { display: none !important; }
html[dir="rtl"] .section_title.pb-25 .title {
  font-family: 'Tajawal', sans-serif !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
}

/* Slightly increase paragraph line-height under the title for readability */
html[dir="rtl"] .section_title.pb-25 p { line-height: 1.7 !important; margin-bottom: 0 !important; }

/* Ensure hero spacing preserved when using utility classes */
html[dir="rtl"] .header_hero_content.mt-45 {
  margin-top: 45px !important;
}

/* Ensure .header_hero_content with mt-45 preserves spacing and aligns for RTL pages */
html[dir="rtl"] .header_hero_content.mt-45 {
  margin-top: 45px !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Make hero content sit above the decorative image so it doesn't get overlapped */
html[dir="rtl"] .header_hero_content { position: relative; z-index: 20; }
html[dir="rtl"] .header_image { position: relative; z-index: 1; }

/* Improve hero layout: control height, padding and image sizing to avoid overlap */
html[dir="rtl"] .header_hero {
  padding-top: 60px;
  padding-bottom: 60px;
  min-height: 520px;
  box-sizing: border-box;
}

/* Constrain hero content column but allow more width to avoid forced breaks */
html[dir="rtl"] .header_hero_content {
  max-width: 820px;
  margin-right: 60px;
  margin-left: auto;
}

/* Limit the header image size and ensure it scales responsively */
html[dir="rtl"] .header_image .image img {
  max-width: 680px;
  width: 100%;
  height: auto;
  display: block;
}

/* Reduce header shape size and shift slightly so it doesn't cover hero text */
html[dir="rtl"] .header_shape {
  width: 46%;
  left: 0 !important;
  top: 8% !important;
  transform: none !important;
}

/* On smaller screens move or hide the large decorative image to avoid overlap and crowded layout */
@media (max-width: 991px) {
  html[dir="rtl"] .header_shape { display: none !important; }
  /* Ensure hero text stays right-aligned and buttons stack nicely on small screens */
  html[dir="rtl"] .header_hero_content { text-align: right !important; }
  html[dir="rtl"] .header_hero_content .main-btn { float: none !important; display: inline-block !important; margin-right: 0 !important; }

  /* On medium screens adjust hero spacing so text remains readable */
  html[dir="rtl"] .header_hero { padding-top: 40px; padding-bottom: 40px; min-height: auto; }
  html[dir="rtl"] .header_hero_content { max-width: 100%; }
}

/* Desktop-specific: position header image absolutely so it doesn't push content and reserve space for it */
@media (min-width: 992px) {
  html[dir="rtl"] .header_hero { position: relative; }
  /* reserve left space for the image so the content column doesn't overlap */
  /* reserve space for the image, but leave more room for text so Arabic headings don't wrap */
  html[dir="rtl"] .header_hero { padding-left: 760px; }

  /* Expand the left column (visually right in RTL) so text has more horizontal room */
  html[dir="rtl"] .header_hero .container .row > .col-lg-6 {
    flex: 0 0 58% !important;
    max-width: 58% !important;
  }

  html[dir="rtl"] .header_image {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    width: 680px !important;
    z-index: 1 !important;
    pointer-events: none;
  }

  html[dir="rtl"] .header_image .image { width: 100%; }
  html[dir="rtl"] .header_shape { position: absolute; left: 0 !important; top: 4% !important; }
}

/* About section: position the illustrative image to the left (visually) and keep content readable */
html[dir="rtl"] .about_area { position: relative; }

@media (min-width: 992px) {
  html[dir="rtl"] .about_image {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 34%;
    max-width: 420px;
    z-index: 2;
    pointer-events: none;
  }

  html[dir="rtl"] .about_content {
    position: relative;
    z-index: 20;
    /* Reserve space on the right for the absolute image so the text won't overlap */
    margin-right: 44%;
    padding-right: 28px;
    max-width: 54%;
    text-align: right !important;
  }
}

  /* Strong RTL enforcement for About content and descendants to prevent any LTR overrides */
  html[dir="rtl"] .about_content,
  html[dir="rtl"] .about_content * {
    direction: rtl !important;
    unicode-bidi: embed !important;
    text-align: right !important;
  }

  /* Ensure utility classes inside About do not force LTR */
  html[dir="rtl"] .about_content .text-left { text-align: right !important; }
  html[dir="rtl"] .about_content .text-right { text-align: right !important; }

  /* Tweak paragraph spacing for readability */
  html[dir="rtl"] .about_content p { line-height: 1.7 !important; margin-bottom: 14px !important; }


/* Force proper RTL direction and alignment inside About section to avoid LTR rendering */
html[dir="rtl"] #about,
html[dir="rtl"] .about_area,
html[dir="rtl"] .about_content,
html[dir="rtl"] .about_content .section_title,
html[dir="rtl"] .about_content .section_title .title,
html[dir="rtl"] .about_content p,
html[dir="rtl"] .about_content a {
  direction: rtl !important;
  unicode-bidi: embed !important;
  text-align: right !important;
}

/* Ensure punctuation and numeric sequences don't force layout direction in headings */
html[dir="rtl"] .about_content .title,
html[dir="rtl"] .about_content p {
  unicode-bidi: isolate-override !important;
}

@media (max-width: 991px) {
  html[dir="rtl"] .about_image { position: relative; left: auto; top: auto; width: 100%; display: block; margin-bottom: 20px; }
  html[dir="rtl"] .about_content { margin-right: 0; }
}

/* Force hero text alignment to the right for RTL pages */
html[dir="rtl"] .header_hero_content, html[dir="rtl"] .header_hero_content .header_title, html[dir="rtl"] .header_hero_content p {
  text-align: right !important;
}

/* Make header title and paragraph visually match the section title styling used in .section_title.pb-25 */
html[dir="rtl"] .header_hero_content .header_title {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 44px !important;
  line-height: 1.35 !important;
  margin-bottom: 8px !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-align: right !important;
}

/* Prevent abnormal forced line-breaks between words in Arabic headers */
html[dir="rtl"] .header_hero_content .header_title,
html[dir="rtl"] .header_hero_content .header_title * {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  display: inline !important;
}

/* Ensure empty span does not force block behavior */
html[dir="rtl"] .header_hero_content .header_title span { display: inline !important; }

html[dir="rtl"] .header_hero_content p {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
  text-align: right !important;
}

@media (max-width: 991px) {
  html[dir="rtl"] .header_hero_content .header_title { font-size: 34px !important; }
  html[dir="rtl"] .header_hero_content p { font-size: 16px !important; }
}

/* Extra specificity: force entire first column in hero to behave RTL so nothing overrides alignment */
html[dir="rtl"] .header_hero .container .row > .col-lg-6,
html[dir="rtl"] .header_hero .container .row > .col-md-6 {
  direction: rtl !important;
  text-align: right !important;
}

/* Strong rule for title and CTA to avoid other rules forcing LTR/center */
html[dir="rtl"] .header_hero_content .header_title {
  text-align: right !important;
}

html[dir="rtl"] .header_hero_content .main-btn {
  float: right !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Flip header image/shape positioning for RTL so content isn't overlapped */
html[dir="rtl"] .header_image,
html[dir="rtl"] .header_shape {
  right: auto !important;
  left: 0 !important;
  background-position: right bottom !important;
}

/* Flip decorative dots position inside header image and limit its size so it doesn't overpower the hero */
html[dir="rtl"] .header_image .image { position: relative; }
html[dir="rtl"] .header_image .image .dots {
  left: auto !important;
  right: 17% !important;
  position: absolute !important;
  bottom: -8px !important;
  max-width: 140px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  z-index: 2 !important;
}

/* Slightly smaller dots on very large or very small screens */
@media (min-width: 1400px) {
  html[dir="rtl"] .header_image .image .dots { max-width: 180px !important; right: 16% !important; }
}
@media (max-width: 1200px) {
  html[dir="rtl"] .header_image .image .dots { max-width: 110px !important; right: 14% !important; }
}

/* Magnific Popup: align popup content and flip close button in RTL */
html[dir="rtl"] .mfp-content {
  text-align: right !important;
}
html[dir="rtl"] .mfp-container {
  direction: rtl !important;
}
html[dir="rtl"] button.mfp-close {
  right: auto !important;
  left: 10px !important;
}

/* Ensure iframe/scaler content reads RTL properly */
html[dir="rtl"] .mfp-iframe-scaler { direction: rtl !important; }

/* Mirror Magnific Popup arrows for RTL */
html[dir="rtl"] .mfp-arrow-left, html[dir="rtl"] .mfp-arrow-right { transform: scaleX(-1); }

/* Slick: ensure arrows/controls are mirrored for RTL */
html[dir="rtl"] .slick-prev {
  left: 10px !important;
  right: auto !important;
}
html[dir="rtl"] .slick-next {
  right: 10px !important;
  left: auto !important;
}

/* Center dots so they stay visually balanced in RTL */
html[dir="rtl"] .slick-dots { text-align: center !important; direction: ltr; }

/* Slightly reduce slide spacing on small screens to avoid overflow */
@media (max-width: 576px) {
  html[dir="rtl"] .gallery_active .single_gallery { padding: 8px 6px; }
}

/* Gallery: ensure content aligns right and buttons position naturally */
html[dir="rtl"] .single_gallery { text-align: right; }
html[dir="rtl"] .gallery_content { text-align: right; }
html[dir="rtl"] .gallery_image { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .gallery_btn { margin-right: 0; margin-left: 0; }

/* Fix gallery cards that use text-center utility so layout stays RTL-friendly */
html[dir="rtl"] .single_gallery.text-center {
  text-align: right !important;
}
html[dir="rtl"] .single_gallery.text-center .gallery_content {
  text-align: right !important;
}
html[dir="rtl"] .single_gallery.text-center .gallery_btn {
  text-align: right !important;
}
html[dir="rtl"] .single_gallery.text-center .gallery_image img { display: block; margin: 0 auto; }

/* Flip sticker positioning (discount/new tags) for RTL */
html[dir="rtl"] .single_gallery .gallery_sticker .discount { float: left !important; }
html[dir="rtl"] .single_gallery .gallery_sticker .new { float: right !important; }

/* Ensure images inside gallery are block-level and centered within their container */
html[dir="rtl"] .gallery_image img { display: block; margin: 0 auto; }

/* Client/testimonial: align text to right */
html[dir="rtl"] .single_client .client_content { text-align: right; }
html[dir="rtl"] .single_client .client_image { float: left; margin-left: 0; margin-right: 15px; }

/* If a client card uses center alignment, center the avatar and content */
html[dir="rtl"] .single_client.text-center .client_image {
  float: none !important;
  display: block;
  margin: 0 auto 15px !important;
}
html[dir="rtl"] .single_client.text-center .client_content {
  text-align: center !important;
}

/* Improve client image size and spacing for better balance */
html[dir="rtl"] .single_client .client_image img { max-width: 84px; height: auto; border-radius: 50%; }

/* Mirror chevron icons and other directional icons for RTL readability */
html[dir="rtl"] .lni-chevron-right, html[dir="rtl"] .lni-arrow-right { transform: scaleX(-1); }
html[dir="rtl"] .lni-chevron-left, html[dir="rtl"] .lni-arrow-left { transform: scaleX(-1); }

/* Misc helper: ensure navbar toggler and brand align nicely in RTL */
html[dir="rtl"] .navbar .navbar-brand { margin-right: 0; margin-left: 0; }
html[dir="rtl"] .navbar .navbar-toggler { margin-left: 0; margin-right: 0; }
html[dir="rtl"] .navbar .navbar-toggler { float: left; }
html[dir="rtl"] .navbar .navbar-brand { float: left; }

/* Blog cards: align number and main content to the right */
html[dir="rtl"] .single_blog .number { float: right; margin-left: 0; margin-right: 15px; }
html[dir="rtl"] .single_blog .main_content { text-align: right; }

/* Prevent unwanted visible <br> line breaks inside headings/titles in RTL
   and improve wrapping behavior for Arabic text. This hides stray <br>
   tags in common title elements and enforces sensible line-height/wrapping. */
html[dir="rtl"] .header_hero_content .header_title br,
html[dir="rtl"] .section_title .title br,
html[dir="rtl"] .single_gallery .gallery_title br,
html[dir="rtl"] .footer_title br {
  display: none !important;
}

/* Improve wrapping for Arabic text: avoid mid-word breaks and use comfortable line-height */
html[dir="rtl"] .header_hero_content .header_title,
html[dir="rtl"] .section_title .title,
html[dir="rtl"] .header_hero_content p,
html[dir="rtl"] .section_title p,
html[dir="rtl"] .single_features .title,
html[dir="rtl"] .single_blog .main_content h4,
html[dir="rtl"] .single_gallery .gallery_title,
html[dir="rtl"] .single_client .client_content,
html[dir="rtl"] .footer_about p {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  line-height: 1.45 !important;
}

/* If titles are long, allow natural wrapping but avoid breaking words awkwardly */
html[dir="rtl"] .header_hero_content .header_title {
  white-space: normal !important;
}

/* Ensure anchor text inside titles also keeps the same wrapping behavior */
html[dir="rtl"] .gallery_title a, html[dir="rtl"] .blog_title a {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}