.subscribe-free {
  padding: 1.5rem 2.2rem;
  border-radius: 51px;
}

.our-services {
  padding: 1.5rem 2.2rem;
  border-radius: 55px;
}

.video-overlay {
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.45) 22%,
      rgba(0, 0, 0, 0.7) 50%,
      rgba(0, 0, 0, 0.52) 78%,
      rgba(0, 0, 0, 0.62) 100%);
  z-index: 1;
}

/* The hero copy sits over moving video, so a flat 50% wash was not enough
   behind the headline band. The scrim is darkest through the middle third —
   where the title and buttons sit — and lighter at the edges so the footage
   still reads. */
.hero-title {
  text-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.55);
}

.subscribe-free,
.our-services {
  box-shadow: 0 0.2rem 1.6rem rgba(0, 0, 0, 0.28);
}

/* -------------------marquee------------------- */
.wrapper-partners {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.wrapper-partners .marquee {
  direction: ltr;
  display: flex;
  overflow: hidden;
  gap: 40px;
}

.wrapper-partners .marquee__group {
  flex-shrink: 0;
  display: flex;
  align-items: start;
  gap: 40px;
  min-width: 100%;
  /* Item 80: on a screen wider than the logos, the stretched group used to put
     all its spare width in one gap at the seam; spread it between the logos. */
  justify-content: space-around;
  animation: scroll-x 55s linear infinite;
}

/* Item 80: with eight partner logos one set was narrower than a large screen,
   and space-around spread the spare width into wide gaps (89px at 1920,
   169px at 2560). Each hero group now carries the set twice, so the logos
   keep the same 40px spacing up to about 3000px; a group twice as long takes
   twice as long per loop to keep the speed. The 40px .marquee gap makes the
   seam between groups match. */
header .wrapper-partners .marquee__group {
  animation-duration: 110s;
}

.wrapper-partners .marquee img {
  flex-shrink: 0;
  height: 8rem;
  max-height: 8rem;
  min-height: 8rem;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .wrapper-partners .marquee__group {
    animation-play-state: paused;
  }
}

/* Hold the strip still while it is being read. On the products strip this is
   not just a nicety: the caption only appears on hover, so without the pause
   the card slides out from under the pointer as soon as it opens. */
.wrapper-partners:hover .marquee__group,
.wrapper-partners:focus-within .marquee__group {
  animation-play-state: paused;
}

@keyframes scroll-x {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-100% - 40px))
      /* one group plus the 40px .marquee gap */
    ;
  }
}

/* ----------------------main who we are---------------------- */
.main-title {
  border-bottom: 1px solid var(--bs-custom-gray-dark);
}

.about-text p span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  will-change: transform, opacity;
  margin-left: 2px;
  transition:
    opacity 0.55s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

strong {
  font-weight: 500;
}

.about-text.is-visible span {
  opacity: 1;
  transform: translateY(0);
}

#about-text-animation-2 {
  max-width: 104.7rem;
}

.about-box {
  border-radius: 2.4rem;
  border: 1px solid var(--bs-custom-gray-dark);
}

/* Item 86: Vision, Mission and Values share the row equally instead of each
   taking the width of its own copy. */
@media (min-width: 992px) {
  .about-box {
    flex: 1 1 0;
    min-width: 0;
  }
}

.line {
  width: 90%;
  border-bottom: 1px solid var(--bs-purple-dark);
}

.about-card {
  border-radius: 2.4rem;
  overflow: hidden;
  width: 100%;
  height: 41rem;
  position: sticky;
  transform-origin: top center;
}

/* Feedback item 60: every render keeps its artwork in the left third and flat
   colour in the rest. Centred, a card narrower than the render (a Windows laptop
   at 125-150% scaling) was cropped on both sides and lost part of the artwork;
   anchored left, the crop only ever removes flat colour. */
.web-dev {
  background: url(../assets/images/devolop.webp) no-repeat;
  background-size: cover;
  background-position: left center;
  top: 0;
}

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

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

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

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

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

/* The stack order follows position, not the service: each card slides over the
   one before it, so the service order can change (item 77) without breaking it. */
a.about-card:not(.service-card):nth-of-type(1) {
  z-index: 1;
}

a.about-card:not(.service-card):nth-of-type(2) {
  z-index: 2;
}

a.about-card:not(.service-card):nth-of-type(3) {
  z-index: 3;
}

a.about-card:not(.service-card):nth-of-type(4) {
  z-index: 4;
}

a.about-card:not(.service-card):nth-of-type(5) {
  z-index: 5;
}

a.about-card:not(.service-card):nth-of-type(6) {
  z-index: 6;
}

/* Feedback item 40 — "service images do not show on mobile".
   The artwork is 2.6-3.3x wider than it is tall, with the product photo in its
   left third and flat brand colour filling the rest. background-size:cover
   scales it to fill the card's height, so on a card narrower than the image is
   wide the centre crop keeps only the flat colour and throws the photo away.
   Below 768px the artwork is placed as a band along the bottom at its own
   scale instead, with its colour painted behind it and the copy padded clear.
   The colours are sampled from the flat side of each file. */
@media (max-width: 767px) {


  .about-card {
    background-size: auto 12rem;
    background-position: left bottom;
    background-repeat: no-repeat;
  }

  .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;
  }

  /* Item 97 (revised): the sticky stacking is now restored on mobile too,
     matching the desktop animation. The cards are given enough min-height
     so the background artwork band at the bottom doesn't overlap the copy. */
  .about-card:not(.service-card) {
    min-height: 44rem;
    padding-bottom: 13rem !important;
  }

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

/* Each card now opens its own service page. A shadow on hover gives it the
   affordance of a link; a transform would create a containing block and
   break the sticky stack the cards slide through. */
a.about-card {
  transition: box-shadow 0.3s ease;
}

a.about-card:hover,
a.about-card:focus-visible {
  box-shadow: 0 1.6rem 4rem rgba(46, 46, 110, 0.35);
}

@media (prefers-reduced-motion: reduce) {
  a.about-card {
    transition: none;
  }
}

.features-light span {
  border: 1px solid var(--bs-white);
  border-radius: 5rem;
  padding: 0.5rem 1rem;
}

.features-dark span {
  border: 1px solid var(--bs-custom-gray-dark);
  border-radius: 5rem;
  padding: 0.5rem 1rem;
}

.about-card-desc {
  max-width: clamp(50rem, 55vw, 74rem);
}

/* ----------------sec1 media center---------------- */
.media-tabs li {
  flex: 1;
}

.media-tabs li button {
  color: var(--bs-black);
  width: 100%;
  height: 4.8rem;
  background-color: var(--bs-gray-100);
}

.tab-content {
  border: 1px solid var(--bs-gray-500);
  border-radius: 2.4rem;
}

.img-tab {
  border-radius: 2.4rem;
  object-fit: cover;
}

.media-gallery .carousel-item img {
  border-radius: 2.4rem;
  width: 100%;
  height: 518px;
  object-fit: cover;
  display: block;
}

.tab-pane p,
.tab-pane ul li {
  color: var(--bs-gray-900);
  list-style: disc;
}

/* ------------------------sec2---------------------- */
.marquee-2 .marquee__group {
  gap: 31px;
  /* wider cards than the partner logos, so a longer cycle for the same pace */
  animation-duration: 75s;
}

.marquee-2 img {
  height: 9rem;
  max-height: 9rem;
  min-height: 9rem;
}

/* The اعتزاز logo is intrinsically much larger than the other product marks.
   object-fit:contain + padding renders the artwork smaller while the <img>
   element keeps the same 9rem height as its siblings, so the card size matches. */
.marquee-2 img.etizaz-img {
  width: 100%;
  object-fit: contain;
  object-position: center;
  padding: 2.4rem 0;
}

.marquee-box {
  border-radius: 1.2rem;
  border: 1px solid var(--bs-gray-700);
  overflow: hidden;
  cursor: pointer;
}

.marquee-box-desc {
  max-width: 20rem;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.4s ease,
    max-height 0.4s ease,
    transform 0.4s ease;
}

.marquee-box:hover .marquee-box-desc {
  opacity: 1;
  /* room for the longer approved descriptions (items 55, 100, 101) */
  max-height: 30rem;
  transform: translateY(0);
}

.digital-box {
  background: url(../assets/images/digital-bg.webp) no-repeat;
  background-size: cover;
  background-position: center;
  /* Item 64: the English copy runs to two lines; let the box grow and keep the
     wrapped lines centred like the Arabic single line. */
  min-height: 34.7rem;
  text-align: center;
  width: 100%;
  border-radius: 2.4rem;
  overflow: hidden;
}

.digital-box p {
  color: var(--bs-gray-400);
}

.nav-arrows button {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 50%;
}

/* ----------------scroll reveal fallback---------------- */
/* aos.min.css hides [data-aos] until its script reveals it. index.html and
   en.html raise .aos-pending before first paint and drop it again if AOS
   never initialises, so the content stays visible either way. */
html:not(.aos-pending) [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Same idea for the word-by-word About reveal: .about-text p span starts at
   opacity 0 and only the foot-of-page script clears it, so with scripting off
   both من نحن and لماذا نحن rendered blank. */
html:not(.reveal-pending) .about-text p span {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------------- content document, 14 Sep 2026 ---------------- */
.services-intro {
  max-width: 90rem;
}

/* The whole card is the link; this is its visible «للمزيد» button. */
.about-card-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.8rem;
  border: 1px solid currentColor;
  border-radius: 5rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.about-card-more.more-light {
  color: var(--bs-white);
}

.about-card-more.more-dark {
  color: var(--bs-custom-gray-dark);
}

.about-card-more img {
  width: 2rem;
  height: 2rem;
  transition: transform 0.3s ease;
}

a.about-card:hover .about-card-more img {
  transform: translateX(-4px);
}

[dir="ltr"] a.about-card:hover .about-card-more img {
  transform: translateX(4px);
}

.about-values strong {
  margin-inline-end: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .about-card-more img {
    transition: none;
  }
}