:root {
  --bg: #0F253B;
  --card: #ffffff;
  --text: #0e1b28;
  --muted: #5f7387;
  --accent: #183E63;
}

.hidden { display: none; }
html[dir="rtl"] body { text-align: right; }
#themes-ar ul { direction: rtl; }

* { box-sizing: border-box; }
body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#f5f7fa; color: var(--text); }

.site-header { display:flex; justify-content: space-between; align-items:center; gap:16px; padding: 18px 16px; background: var(--bg); color:#EAF3FA; }
.site-header {
  background: var(--bg);
  color: #EAF3FA;
}

/* New inner wrapper so header content matches the middle content width */
.site-header-inner {
  max-width: 980px;         /* same as .container and .foot-inner */
  margin: 0 auto;
  padding: 18px 14px;       /* horizontally matches .container/.foot-inner */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* RTL support for the new wrapper */
html.rtl .site-header-inner {
  flex-direction: row-reverse;
}



.brand { display:flex; align-items:center; gap:12px; }
.avatar { width:168px; height:168px; border-radius:16px; object-fit:cover; }
.title { margin:0; font-size: 24px; }
.subtitle { margin:4px 0 0; color:#cfe1f2; }

.lang-wrap { margin-left:auto; }
#lang-select { padding:8px 10px; border-radius:10px; border:1px solid #cfd8e3; background:#fff; font-weight:600; }

.container { max-width: 980px; margin: 24px auto; padding: 0 14px; display:grid; gap:20px; }
.card { background: var(--card); border-radius: 14px; padding: 18px; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.card > h2 { margin: 0 0 10px; font-size: 24px; color: var(--accent); }
.card .content p { line-height: 1.7; color: var(--text); }

blockquote { background:#f8fbff; border-left:4px solid #cfe1f2; margin:12px 0; padding:12px 14px; border-radius: 8px; }
blockquote footer { display:block; color:#5a6a7a; margin-top:6px; }

.footer { background:#fff; margin-top: 20px; }
.foot-inner { max-width:980px; margin:0 auto; padding:16px 14px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
@media (max-width: 640px) {

  /* Stack everything vertically in the footer */
  .foot-inner {
    flex-direction: column;
    align-items: stretch;      /* <— THIS is the key so children go full width */
    gap: 12px;
  }

  /* Make each block take the full content width */
  .footer .lang-en,
  .footer .lang-ar,
  .footer .payments,
  .footer .socials,
  .footer .legal-link {
    width: 100%;
  }

  /* Nice layout for the payment logos */
  .payments span {
    display: block;
    margin-bottom: 6px;
  }

  .pills {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pay-logo img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Social icons row stays full width but left-aligned */
  .footer .socials {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 4px;
  }
}

.pills { display:flex; gap:10px; margin-top:6px; flex-wrap:wrap; }
.pill { background:#eef4fa; padding:8px 12px; border-radius:10px; border:1px solid #dbe6f1; }

/* RTL */
html.rtl body { direction: rtl; }
html.rtl .site-header { flex-direction: row-reverse; }
html.rtl .brand { flex-direction: row-reverse; }
html.rtl .subtitle, html.rtl .title { text-align: right; }
html.rtl .foot-inner { flex-direction: row-reverse; }
html.rtl .card > h2, html.rtl .card .content p, html.rtl blockquote { text-align: right; }

/* Testimonial cards */
.tcard { display:flex; gap:14px; align-items:flex-start; margin:16px 0; padding:12px; background:#f8fbff; border:1px solid #e3edf7; border-radius:12px; }
.tphoto { width:72px; height:72px; border-radius:50%; object-fit:cover; flex:0 0 72px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.tcard blockquote { margin:0; background:transparent; border-left: none; padding:0; }
.tcard blockquote footer { margin-top:8px; color:#5a6a7a; }
html.rtl .tcard { flex-direction: row-reverse; }

#hmmh .content p { margin: 10px 0; }
#hmmh strong { color: var(--accent); }



/* lang swap rules */
.content .lang-en { display: block; }
.content .lang-ar { display: none; }
html.rtl .content .lang-en { display: none !important; }
html.rtl .content .lang-ar { display: block !important; }

/* CTA buttons */
.cta-row { display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.btn.cta { background:#183E63; color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.btn.cta:hover { opacity:.95; transform: translateY(-1px); }
.btn.cta.alt { background:#246; }

/* Payment logos */
.pills { gap:16px; }
.pay-logo { display:inline-flex; background:#eef2f7; border-radius:14px; padding:6px; border:1px solid #dbe6f1; box-shadow:0 6px 18px rgba(0,0,0,.05); }
.pay-logo img { display:block; height:64px; width:auto; border-radius:10px; }

/* Socials */
.socials {
  margin-top: 8px;
  display: flex;          /* put icons on the same line */
  align-items: center;
  gap: 12px;
}

.social-link { display: inline-flex; }

.footer .social-link img,
.footer .socials img {
  width: 44px;      /* try 44–48px if you want them bigger */
  height: 44px;
  display: block;
  border-radius: 10px;  /* optional: slightly rounder */
  object-fit: contain;  /* keeps logo from being cropped */
}

html.rtl .cta-row { flex-direction: row-reverse; }



/* Video */
/* Responsive video */
.video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;       /* optional: matches card style */
}

/* On small screens, keep it full width */
@media (max-width: 640px) {
  .video {
    width: 100%;
    height: auto;
  }
}



.section-body { padding-top: 8px; display: block; }
.section-body h3 { margin-top: 12px; }

.cert-section{ background: rgba(255,255,255,0.75); backdrop-filter:saturate(120%) blur(4px); border-radius:16px; padding:24px; margin:20px 0 24px; box-shadow:0 10px 30px rgba(0,0,0,.06); }
.cert-figure{ margin:0; display:flex; justify-content:center; }
.cert-img{ max-width:720px; width:100%; height:auto; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.08); }

.footer .socials{ display:flex; gap:12px; align-items:center; margin-top:8px; }
.footer .social-link img{ width:32px; height:32px; display:block; border-radius:6px; }
.footer .legal-link{ margin-top:6px; font-size:0.9rem; }
.footer .legal-link a{ text-decoration:underline; }
@media (max-width: 640px){ .avatar{width:120px; height:120px;} }


/* ---------- Global language visibility ---------- */
/* Default: English shown, Arabic hidden */
.lang-en { display: block; }
.lang-ar { display: none; }

/* When RTL (Arabic) is active */
html.rtl .lang-en { display: none !important; }
html.rtl .lang-ar { display: block !important; }

/* Containers that need flex, not block (so they don't appear empty) */
.cta-row .lang-en,
.cta-row .lang-ar { display: flex; }

html.rtl .cta-row .lang-en { display: none !important; }
html.rtl .cta-row .lang-ar { display: flex !important; }

/* Footer line should not collapse */
.footer .lang-en,
.footer .lang-ar { display: block; }
html.rtl .footer .lang-en { display: none !important; }
html.rtl .footer .lang-ar { display: block !important; }