/* =========================================
   HAM Sections — الشكل الافتراضي للأقسام
   أي حاجة هنا بتتغير من تاب Style في widget الـ Elementor
   (عشان كده مافيش !important على الخطوط والألوان)
   ========================================= */

.hamx {
  --hamx-navy: #00101C;
  --hamx-gold: #D4AF6A;
  --hamx-text: #5A6273;
  --hamx-line: #ECEEF2;
  --hamx-gap: 28px;
  --hamx-team-img-w: 420px;
  --hamx-team-radius: 24px;
  --hamx-team-align: start;
  --hamx-logo-h: 80px;
  --cols: var(--cols-d, 3);
  color: var(--hamx-navy);
}
.hamx *,
.hamx *::before,
.hamx *::after { box-sizing: border-box; }

/* الافتراضي لو مااتحددش من Elementor */
.hamx-team, .hamx-branches, .hamx-testimonials { --cols-d: 3; --cols-t: 2; --cols-m: 1; }
.hamx-logos { --cols-d: 5; --cols-t: 4; --cols-m: 2; }
@media (max-width: 1024px) { .hamx { --cols: var(--cols-t, 2); } }
@media (max-width: 767px)  { .hamx { --cols: var(--cols-m, 1); --hamx-gap: 16px; } }

/* العناوين: بتاخد خط العناوين بتاع الموقع لحد ما تغيريه من Typography */
.hamx .hamx-title {
  margin: 0;
  font-family: var(--e-global-typography-primary-font-family, inherit);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--hamx-navy);
}

.hamx-empty {
  padding: 16px 20px;
  border: 1px dashed var(--hamx-gold);
  border-radius: 12px;
  color: var(--hamx-text);
  text-align: center;
}

.hamx .hamx-card {
  background-color: #fff;
  border: 1px solid var(--hamx-line);
  border-radius: 20px;
  transition: box-shadow .3s;
}

.hamx-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF1F4;
  color: var(--hamx-navy);
  font-weight: 700;
}

.hamx-grid,
.hamx-team,
.hamx-logos {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--hamx-gap);
}

/* ---------- فريق العمل (الصورة كاملة من غير قص) ---------- */
.hamx-team { row-gap: calc(var(--hamx-gap) + 12px); }
.hamx-team-card {
  display: flex;
  flex-direction: column;
  align-items: var(--hamx-team-align);
  text-align: var(--hamx-team-align);
}
.hamx-team-photo {
  width: 100%;
  max-width: var(--hamx-team-img-w);
}
.hamx-team-photo img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  border-radius: var(--hamx-team-radius);
}
.hamx-team-photo .hamx-initial {
  aspect-ratio: 416 / 400;
  width: 100%;
  font-size: 64px;
  border-radius: var(--hamx-team-radius);
}
.hamx .hamx-team-body {
  width: 100%;
  max-width: var(--hamx-team-img-w);
  padding-top: 15px;
}
.hamx .hamx-team-job {
  margin: 0;
  font-size: 16px;
  color: var(--hamx-navy);
}

/* ---------- الفروع ---------- */
.hamx-branches { display: grid; gap: 48px; }
.hamx .hamx-country-title {
  margin-bottom: 20px;
  font-size: 24px;
  padding-inline-start: 14px;
  border-inline-start: 4px solid var(--hamx-gold);
}
.hamx .hamx-branch {
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 6px 24px -14px rgba(0, 16, 28, .15);
}
.hamx .hamx-num {
  align-self: flex-start;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--hamx-gold);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 40px;
}
.hamx .hamx-branch-addr {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--hamx-navy);
}
.hamx-branch-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hamx-line);
}
.hamx .hamx-branch-links a {
  font-size: 14px;
  color: var(--hamx-navy);
  font-weight: 600;
  text-decoration: none;
}
.hamx .hamx-branch-links a:hover { color: var(--hamx-gold); }

/* ---------- آراء العملاء (كروت بتتحرك يمين وشمال) ---------- */
.hamx-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--hamx-gap)) / var(--cols));
  gap: var(--hamx-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--hamx-gold) transparent;
}
.hamx .hamx-quote {
  margin: 0;
  padding: 28px 26px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hamx .hamx-quote-icon { color: var(--hamx-gold); width: 36px; height: 36px; }
.hamx .hamx-quote-text {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  font-style: normal;
  line-height: 1.9;
  color: var(--hamx-navy);
  flex-grow: 1;
}
.hamx-quote-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--hamx-line);
}
.hamx-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  font-size: 20px;
}
.hamx .hamx-quote-person .hamx-title { display: block; font-size: 17px; }
.hamx .hamx-quote-person small {
  display: block;
  font-size: 13px;
  color: var(--hamx-text);
}

/* ---------- اللوجوهات (الاعتمادات والعملاء) ---------- */
.hamx-logos { align-items: center; }
.hamx-logo { margin: 0; text-align: center; }
.hamx-logo a { text-decoration: none; display: block; }
.hamx .hamx-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--hamx-logo-h) + 40px);
  padding: 20px;
  background-color: #fff;
  border: 1px solid var(--hamx-line);
  border-radius: 20px;
  transition: box-shadow .3s;
}
.hamx-logo-box img {
  max-width: 100% !important;
  max-height: var(--hamx-logo-h) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .3s, opacity .3s;
}
.hamx-logo:hover .hamx-logo-box img,
.hamx-logos.no-gray .hamx-logo-box img { filter: none; opacity: 1; }
.hamx-logo-text { font-weight: 700; color: var(--hamx-navy); }
.hamx .hamx-logo-name {
  margin-top: 10px;
  font-size: 14px;
  color: var(--hamx-text);
  line-height: 1.6;
}
/* لوجوهات سادة (العملاء) */
.hamx .hamx-logos.is-plain .hamx-logo-box,
.hamx-logos.is-plain .hamx-logo-box {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0 8px;
  height: calc(var(--hamx-logo-h) + 10px);
}

@media (max-width: 767px) {
  .hamx .hamx-branch { padding: 20px; }
  .hamx .hamx-num { margin-bottom: 24px; }
  .hamx .hamx-quote { padding: 22px 20px; }
}