/* TrustUs — /contact/ ---------------------------------------------------------
   The page carries the form, so the footer's copy of it is suppressed by the
   template. What is here is the two-column head, the details beside it, the map
   and the closing band. */

.cnt-head {
  padding-bottom: clamp(var(--sp-7), 5vw, var(--sp-8));
  /* Ends on white, because the map section below is on white. */
  background:
    radial-gradient(130% 95% at 50% 0%,
      rgba(167, 0, 30, .085) 0%,
      rgba(167, 0, 30, .035) 42%,
      rgba(167, 0, 30, 0) 100%),
    var(--paper);
}
.cnt-head__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: start;
  text-align: start;
}
/* The shared head centres everything; this one is a column beside a form. */
.cnt-head .tst-eyebrow,
.cnt-head .tst-title { text-align: start; }
/* One line. The two spans keep the family's two shades of red, but "اتصل بنا"
   is two words, not two lines — the pages that break there are breaking a
   sentence. */
.cnt-head .tst-title span { display: inline; }
.cnt-head .tst-lede { margin-inline: 0; max-width: 46ch; }
.cnt-head .tst-crumb { margin-bottom: clamp(var(--sp-5), 3vw, var(--sp-6)); }

/* --- The details ----------------------------------------------------------- */
.cnt-reach { margin-top: clamp(var(--sp-6), 4vw, var(--sp-7)); }
.cnt-reach h2 {
  font-size: var(--fs-h4);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
/* Direct children: the accounts row lives inside this block too, and written
   as `.cnt-reach li` these three rules were laying its four icons out as
   contact rows as well. */
/* Latin text on an Arabic page: `direction: ltr` so the letters and digits run
   in their own order, and `text-align: right` so the block still starts where
   everything around it starts. Without the second half the characters were
   right but the line began at the far left of a box whose right edge was
   already in place — the address wrapped and its second line sat alone on the
   wrong side. `right`, not `end`: inside a direction:ltr box, `end` is the
   left. */
.cnt-reach__company,
.cnt-reach__value,
.cnt-map__copy p[dir="ltr"] {
  text-align: right;
}
.cnt-reach__company {
  margin: 0 0 var(--sp-5);
  color: var(--muted); font-size: var(--fs-small); line-height: 1.6;
}
.cnt-reach > ul { list-style: none; margin: 0; padding: 0; }
.cnt-reach > ul > li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.cnt-reach > ul > li + li { margin-top: var(--sp-5); }
.cnt-reach__icon {
  flex: none; display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--red-tint);
  color: var(--red);
  line-height: 0;
}
/* The icon carries the footer's class, which offsets it to sit on a line of
   text; centred in a disc it needs neither that nor the dimming. */
.cnt-reach__icon svg { margin-top: 0; opacity: 1; }
.cnt-reach__copy { display: grid; gap: 2px; min-width: 0; }
.cnt-reach__label { color: var(--muted); font-size: var(--fs-caption); }
.cnt-reach__value { color: var(--ink); font-weight: 700; font-size: var(--fs-small); line-height: 1.6; word-break: break-word; }
a.cnt-reach__value:hover { color: var(--red); }

/* --- The form -------------------------------------------------------------- */
.cnt-form {
  padding: clamp(var(--sp-5), 3vw, var(--sp-6));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
}
.cnt-form h2 { font-size: var(--fs-h3); margin: 0 0 var(--sp-3); }
.cnt-form > p { margin: 0 0 var(--sp-5); color: var(--muted); font-size: var(--fs-small); }
/* Zoho's own block paints itself white on a radius; inside a card that is
   already white it only needs its padding removed. */
.cnt-form .tu-ft__cta-form #form { padding: 0; background: transparent; }

/* And with that padding gone, the <form> box ends exactly where the fields end.
   site.css clips that box (overflow:hidden) so the footer's copy of this form
   keeps the card's radius — here it was cutting the focus ring off flush at the
   left and right of every field, leaving a ring visible above and below and
   nowhere else. Nothing needs clipping here: this form paints nothing. */
.cnt-form .tu-ft__cta-form > form { overflow: visible; border-radius: 0; }

/* --- The map --------------------------------------------------------------- */
.cnt-map__in {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
}
.cnt-map__copy h2 { font-size: clamp(24px, 2.6vw, 34px); margin: 0 0 var(--sp-4); }
.cnt-map__copy p { margin: 0 0 clamp(var(--sp-5), 3vw, var(--sp-6)); color: var(--muted); }
.cnt-map__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--wash);
}
.cnt-map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .cnt-head__in { grid-template-columns: minmax(0, 1fr); }
  .cnt-map__in { grid-template-columns: minmax(0, 1fr); }
}