/* ------------------------------------------------------------------
   LTR-only overrides.
   Loaded after main.css / home.css by the English page (en.html).
   Everything else in the design is direction-agnostic and shared.
   ------------------------------------------------------------------ */

/* home.css sets margin-left on the animated words, which is the
   inline-end side in RTL. Mirror it for LTR. */
.about-text p span {
  margin-left: 0;
  margin-right: 2px;
}

/* The Arabic headings are elongated with tatweel (الخدمـــــات).
   Latin script has no equivalent, so the same visual width is
   reproduced with letter-spacing. */
.title-stretch {
  letter-spacing: 0.22em;
}

@media (max-width: 575px) {
  .title-stretch {
    letter-spacing: 0.1em;
  }
}

/* The service-card artwork is baked into the left-hand side of each
   background image, so it cannot be mirrored without mirroring the
   lettering inside those renders. Instead the copy column is mirrored
   onto the free half of the card, reproducing the composition of the
   Arabic layout (artwork one side, copy the other) while the copy
   itself still reads left-to-right.
   Below md the background crops to its centre and the artwork is no
   longer beside the copy, so the natural LTR alignment applies. */
@media (min-width: 768px) {
  .about-card {
    align-items: flex-end;
  }

  .about-card>* {
    max-width: 100%;
  }

  .about-card .features-light,
  .about-card .features-dark {
    justify-content: flex-end;
  }

  .about-card .about-card-desc {
    margin-left: auto;
  }
}

/* Item 79: in English the logo strips travel left-to-right, with the reading
   direction. */
.wrapper-partners .marquee__group {
  animation-direction: reverse;
}

/* The mirrored copy column keeps the card's «Learn More» button with it. */
@media (min-width: 768px) {
  .about-card .about-card-more {
    align-self: flex-end;
  }
}

a.about-card {
  align-items: flex-start;
  direction: ltr;
}

/* Service detail pages use a <div>, not an <a>, so the rule above does not
   reach them. The EN renders place the artwork on the right (background-
   position: right center), so the copy must sit on the left. */
@media (min-width: 768px) {
  .service-card {
    align-items: flex-start;
  }

  .service-card .features-light,
  .service-card .features-dark {
    justify-content: flex-start;
  }

  .service-card .about-card-desc {
    margin-left: 0;
    margin-right: auto;
  }
}


.web-dev {
  background: url(../assets/images/en/devolop.png) no-repeat;
  background-size: cover;
  background-position: right center;
  top: 0;
}

.analytics-tech {
  background: url(../assets/images/en/tech.png) no-repeat;
  background-size: cover;
  background-position: right center;
  top: 0;
}

.infrastructure-tech {
  background: url(../assets/images/en/infra.png) no-repeat;
  background-size: cover;
  background-position: right center;
  top: 0;
}

.cloud-tech {
  background: url(../assets/images/en/cloud.png) no-repeat;
  background-size: cover;
  background-position: right center;
  top: 0;
}

.sys-dev {
  background: url(../assets/images/en/systems.png) no-repeat;
  background-size: cover;
  background-position: right center;
  top: 0;
}

.mobile-dev {
  background: url(../assets/images/en/mobile-app.png) no-repeat;
  background-size: cover;
  background-position: right center;
  top: 0;
}

@media (min-width: 768px) {
  .about-card .about-card-desc {
    margin-right: auto;
  }
}

@media (min-width: 768px) {
  .about-card .about-card-more {
    align-self: flex-start;
  }
}


@media (max-width: 767px) {
  .about-card {
    background-size: auto 12rem;
    background-position: left bottom;
    background-repeat: no-repeat;
  }

  .features-light,
  .features-dark {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .web-dev {
    background-color: #0b757c;
  }

  .analytics-tech {
    background-color: #5fd4e8;
  }

  .infrastructure-tech {
    background-color: #393939;
  }

  .cloud-tech {
    background-color: #7fe0ef;
  }

  .sys-dev {
    background-color: #2e2f6e;
  }

  .mobile-dev {
    background-color: #5fd4e8;
  }
}