/* ==========================================================================
   custom-overrides.css — loaded LAST, after theme-apexsci.css + theme-inner.css
   Holds the client's latest visual tweaks so they survive theme-file reverts.
   ========================================================================== */

/* ===== LOGIN PAGE (login.php) — centered white card matching the design ===== */
.login_pg{ }
.login_pg .login_card{ max-width:460px; margin:0 auto; padding:30px 28px;
  background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  box-shadow:0 14px 40px rgba(17,41,63,.10); }
.login_pg .login_card_title{ color:var(--navy-800); font-size:1.4rem; font-weight:800;
  text-align:center; margin:0 0 22px; }
.login_pg .row{ display:flex; flex-wrap:wrap; gap:14px 0; }
.login_pg .col-12{ flex:0 0 100%; max-width:100%; }
.login_pg .col-6{ flex:0 0 50%; max-width:50%; display:flex; align-items:center; }
.login_pg label{ display:block; color:var(--navy-800); font-weight:600; font-size:.9rem; margin:0 0 5px; }
.login_pg .form-control{ width:100%; height:46px; padding:8px 14px; border-radius:10px;
  border:1px solid var(--gray-200); background:#fff; color:var(--navy-900); font-size:.95rem; }
.login_pg .form-control:focus{ outline:none; border-color:var(--gold-400);
  box-shadow:0 0 0 3px rgba(210,171,87,.18); }
.login_pg .form-check{ display:flex; align-items:center; gap:7px; margin:4px 0; }
.login_pg .form-check-input{ width:16px; height:16px; margin:0; cursor:pointer; }
.login_pg .form-check-label{ margin:0; font-weight:500; color:var(--gray-700); font-size:.88rem; }
.login_pg .forgot_col{ justify-content:flex-start; }
.login_pg .forgot_col a{ color:var(--navy-700); font-size:.85rem; text-decoration:none; }
.login_pg .forgot_col a:hover{ color:var(--gold-600); }
.login_pg .login_actions{ display:flex; flex-direction:column; align-items:stretch; gap:14px; margin-top:18px; }
.login_pg .login_submit_btn{ width:100%; justify-content:center; padding:12px 0;
  font-size:1.05rem; font-weight:700; border-radius:10px; }
.login_pg .login_reg_line{ font-size:.9rem; color:var(--gray-700); margin:0; }
.login_pg .login_reg_line .reg_link{ color:#e02424; font-weight:700; text-decoration:none; }
.login_pg .login_reg_line .reg_link:hover{ text-decoration:underline; }
.login_pg .resetPassword_form{ padding-top:10px; }
@media (max-width:480px){
  .login_pg .col-6{ flex:0 0 100%; max-width:100%; }
  .login_pg .login_card{ padding:24px 18px; }
}

/* ===== X.com icon (CSS glyph, no Font Awesome dependency) — top bar + footer ===== */
.top_header_bx .social a.x_icon,
.fsocial a.x_icon{ display:inline-flex; align-items:center; justify-content:center; }
.top_header_bx .social a.x_icon .x_glyph,
.fsocial a.x_icon .x_glyph{ font-weight:700; line-height:1;
  font-size:1em; font-family:"Segoe UI Symbol","Arial",sans-serif; }

/* ===== footer social row: EXACTLY 6 icons per row, former (34px) button size =====
   Grid guarantees 6 columns regardless of the footer column width. */
footer .fsocial{ display:grid !important; grid-template-columns:repeat(6,34px) !important;
  gap:8px !important; margin-top:14px !important; justify-content:start; width:auto !important;
  max-width:none !important; }
footer .fsocial a{ width:34px !important; height:34px !important; border-radius:9px !important; }
@media (max-width:480px){
  footer .fsocial{ grid-template-columns:repeat(6,32px) !important; gap:7px !important; }
  footer .fsocial a{ width:32px !important; height:32px !important; }
}

/* ===== fixed RED "formerly" notice bar — on every page (client feedback p1) =====
   client: bar stays PINNED while scrolling on home + all inner pages, and sits
   BELOW the nav bar (between the navigation and the page content), not at the
   very top. Stack order (top->down): black utility bar, nav bar, red bar.
   js/stickybars.js measures its height into --fbh and positions it at
   top = black-bar height (--tbh) + nav height (--navH). */
.formerly_bar{
  background:#c0181f; color:#fff; text-align:center;
  font-weight:700; font-size:.9rem; line-height:1.2;
  padding:7px 12px; letter-spacing:.2px;
  position:fixed; top:calc(var(--tbh) + var(--navH)); left:0; right:0; width:100%; z-index:1180;
}
@media (max-width:576px){ .formerly_bar{ font-size:.78rem; padding:6px 10px; } }

/* ===== Theme based on the LOGO: institutional NAVY + antique GOLD ===== */
:root{
  --navy-900:#11293F !important; --navy-800:#173A5A !important;
  --navy-700:#1F4E78 !important; --navy-600:#356694 !important;
  --gold-600:#C19A42 !important; --gold-500:#D2AB57 !important; --gold-400:#E2C57E !important;
  --cream-100:#EFEbE0 !important; --cream-50:#F8F5EE !important; --sky-500:#356694 !important;
  --grad-navy:linear-gradient(135deg,#11293F 0%,#173A5A 55%,#1F4E78 100%) !important;
  --grad-gold:linear-gradient(90deg,#C19A42 0%,#E2C57E 50%,#C19A42 100%) !important;
}
/* client: country badge -> show ONLY the British royal crest (replaces the UK flag),
   hide the 'UK · LONDON' text. Crest sent by client: assets/uk-crest.png.
   The crest art is dark gray; the top bar is black, so we lighten it with a filter
   so it reads clearly on the black bar. */
.country_badge .en{ display:none !important; }
.country_badge{ background:transparent !important;border:none !important;padding:2px !important;gap:0 !important; }
.country_badge .uk-flag{
  width:38px !important;height:38px !important;border-radius:0 !important;border:none !important;
  box-shadow:none !important;   /* client: remove the box/border around the crest */
  background:url("../all_pic/uk-crest.png") center/contain no-repeat !important;
  background-size:contain !important;
  filter:brightness(0) invert(.92) !important;   /* dark crest -> near-white so it shows on black */
}
.country_badge .uk-flag svg{ display:none !important; }   /* hide any old inline flag SVG */

/* surfaces that use hardcoded colors */
/* client: top bar (الشريط الأول) + footer (الأخير) -> BLACK */
.top_header_bx{ background:#0A0A0A !important; }
.stats_bx{ background:linear-gradient(135deg,#11293F 0%,#173A5A 60%,#1F4E78 100%) !important; }
footer{ background:#0A0A0A !important; }
.copy_bx{ background:#000 !important; }

/* Site font-face -> Inter (client request: all pages use Inter).
   Cairo kept as the Arabic fallback because Inter has no Arabic glyphs, so
   RTL/Arabic text still shapes correctly while Latin text uses Inter. */
:root{ --font-main:"Inter","Cairo",system-ui,"Segoe UI",Tahoma,sans-serif; }
/* apply Inter to EVERYTHING (icon fonts excepted -> they set their own family) */
body,
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]):not([class*=" fa-"]){
  font-family:var(--font-main) !important; }
/* Arabic / RTL -> Cairo first so Arabic glyphs render, Inter for Latin */
html[dir="rtl"] body,
html[dir="rtl"] body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class^="fa-"]):not([class*=" fa-"]){
  font-family:"Cairo","Inter",system-ui,"Segoe UI",Tahoma,sans-serif !important; }
/* the .en helper (Latin-in-Arabic snippets) always Inter */
.en{ font-family:"Inter",sans-serif !important; }

/* "More about us" / المزيد عنّا  -> gold pill button (like the "Discover More" ref) */
a[data-more-gold]{
  background:var(--gold-500) !important;
  color:var(--navy-900) !important;
  border:none !important;
  border-radius:30px !important;
  padding:10px 24px !important;
  font-weight:600 !important;
}
a[data-more-gold] i,a[data-more-gold] span{ color:var(--navy-900) !important; }
a[data-more-gold]:hover{ background:var(--gold-400) !important;transform:translateY(-2px); }

/* Apply Now buttons -> EST.2018 badge mark style: outline pill, transparent bg,
   gold border + gold text, fully rounded. */
.nav-cta>a,
.cta_bx .btn-gold,.hero_actions .btn-gold{
  background:transparent !important;
  color:var(--gold-700) !important;
  border:2px solid var(--gold-500) !important;
  border-radius:50px !important;
}
.nav-cta>a i,.nav-cta>a span,
.cta_bx .btn-gold i,.cta_bx .btn-gold span,
.hero_actions .btn-gold i,.hero_actions .btn-gold span{ color:var(--gold-500) !important; }
.nav-cta>a{ padding:8px 18px !important;font-size:.9rem !important; }
/* hover: subtle fill like a badge press */
.nav-cta>a:hover,.cta_bx .btn-gold:hover,.hero_actions .btn-gold:hover{
  background:rgba(216,182,112,.15) !important; }

/* Accreditation cards: bold org name + light description below (client) */
.accred6 .accred_card h4{ font-weight:700 !important; }
.accred6 .accred_card p{ font-weight:300 !important;color:var(--gray-500) !important;
  font-size:.82rem !important;line-height:1.55 !important;margin-top:6px !important;text-align:center; }

/* Accreditations & Partnerships cards -> less high (shorter) */
.accred_bx .accred_card{ padding:14px 12px !important; }
.accred6 .accred_card{ padding:14px 12px !important;gap:10px !important; }
/* keep the gold badge a PERFECT circle (don't let flex squish it to an oval) */
.accred6 .accred_card .logo{
  width:46px !important;height:46px !important;min-height:46px !important;
  flex:0 0 46px !important;aspect-ratio:1/1 !important;border-radius:50% !important;
  font-size:1.2rem !important;
}
.accred6 .accred_card h4{ font-size:.9rem !important;line-height:1.3 !important; }

/* client: the accreditation icons must be replaceable with REAL organization
   logos uploaded from the control panel. The programmer just outputs an <img>
   inside .logo (instead of / in addition to the <i> icon) and it renders cleanly:
       <div class="logo"><img src="[admin-uploaded-logo.png]" alt="Org"></div>
   The circle becomes a white logo holder; the image fits inside without cropping. */
.accred6 .accred_card .logo:has(img),
.accred_card .logo:has(img){
  background:#fff !important;border:1px solid var(--gray-200) !important;
  overflow:hidden !important;padding:4px !important;
}
.accred6 .accred_card .logo img,
.accred_card .logo img{
  width:100% !important;height:100% !important;object-fit:contain !important;
  border-radius:50% !important;display:block !important;
}
/* if a logo img is present, hide the fallback font-icon next to it */
.accred_card .logo img ~ i,
.accred_card .logo:has(img) > i{ display:none !important; }

/* Quick action cards -> smaller height (height-less); icon + text CENTERED */
.quick_card{ padding:12px 14px !important; display:flex !important;
  flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.quick_card .ic{ width:40px !important;height:40px !important;font-size:1.5rem !important;margin:0 auto 6px !important; }
.quick_card h4{ font-size:.95rem !important;line-height:1.3 !important;min-height:2.4em !important;
  text-align:center; }

/* Accreditation concept cards -> EMPHASIZE icon + title (bolder/stronger) */
.accredC_card .ic i{ font-weight:900 !important; }
.accredC_card h4{ font-weight:800 !important; color:var(--navy-800) !important; }

/* "قدّم الآن" / Apply Now button icon -> GOLD */
.nav-cta > a i, .nav-cta > a svg{ color:var(--gold-500) !important; }

/* top bar middle mark (country/crest badge) -> NO border/box */
.top_header_bx .country_badge,
.top_header_bx .country_badge .uk-flag{
  border:0 !important; box-shadow:none !important; background-color:transparent !important; }

/* (home icon removed from nav per request — no chip styling) */

/* Hero: fixed cinematic banner height. Content anchored to the TOP (fixed
   padding) instead of vertical centering, so the buttons keep a STABLE position
   and don't jump top<->bottom when the viewport/text-wrap changes. */
.hero_bx{ padding-block:0 !important;min-height:620px !important;
  display:flex !important;align-items:flex-start !important; }
.hero_bx > .container{ width:100% !important; padding-top:120px !important; }
/* hero actions: fixed gap, never wrap to a new line unexpectedly */
.hero_actions{ display:flex !important; flex-wrap:wrap; gap:14px; margin-top:26px !important; }
@media (max-width:1200px){ .hero_bx{ min-height:540px !important; }
  .hero_bx > .container{ padding-top:96px !important; } }
@media (max-width:992px){ .hero_bx{ min-height:460px !important; }
  .hero_bx > .container{ padding-top:72px !important; } }
@media (max-width:768px){ .hero_bx{ min-height:400px !important;padding-block:32px !important; }
  .hero_bx > .container{ padding-top:24px !important; } }
@media (max-width:480px){ .hero_bx{ min-height:340px !important; } }

/* ===== Global overflow guard — nothing may exceed the viewport width =====
   IMPORTANT: do NOT put overflow-x:hidden on html/body — it silently disables
   position:sticky on the top bars (the sticky bars would scroll away).
   We clip horizontal overflow on a non-scroll-container instead, so sticky works. */
html,body{ max-width:100% !important;overflow-x:clip !important; }   /* clip ≠ hidden: keeps sticky working */
*{ min-width:0; }
/* belt-and-braces: if the browser ignores overflow-x:clip, at least body keeps width */

/* Top bar — wide screens: 3-column grid (tools | badge | tools), single line.
   The individual items don't wrap; the badge stays centered. */
@media (min-width:993px){
  .top_header_bx .container{ display:grid !important;grid-template-columns:auto 1fr auto !important;
    align-items:center !important;gap:10px !important;flex-wrap:nowrap !important; }
  .top_header_bx .right_tools{ justify-self:start !important; }
  .top_header_bx .left_tools{ justify-self:end !important; }
  .country_badge{ justify-self:center !important; }
  .top_header_bx .right_tools,.top_header_bx .left_tools{ flex-wrap:nowrap !important; }
}
.top_header_bx .date,.top_header_bx .coin,.top_header_bx .login-btn{ white-space:nowrap !important; }
/* the UK badge never sits on its own line — it's an inline-flex chip */
.country_badge{ display:inline-flex !important;align-items:center !important;flex:0 0 auto !important; }

/* (top bar / footer colors are set by the logo-theme block at the top) */

/* =========================================================================
   client: university logo must show FULLY (was cropped to a square).
   Let the crest-style logo keep its aspect ratio inside the box.
   ========================================================================= */
.logo_bx img{
  width:auto !important;height:54px !important;max-width:170px !important;
  object-fit:contain !important;object-position:center !important;
}
@media (max-width:768px){ .logo_bx img{ height:46px !important;max-width:140px !important; } }

/* =========================================================================
   client: KEEP THE TOP TWO BARS PINNED at the top — they must NEVER scroll away,
   on any page, at any width. position:sticky proved unreliable (broke when an
   ancestor had overflow), so we use position:FIXED — immune to ancestor issues.
   js/stickybars.js measures the real combined bar height and sets --barsH, then
   pads the body so page content starts BELOW the fixed bars (nothing hidden).
   ========================================================================= */
:root{ --fbh:32px; --tbh:44px; --navH:78px; --barsH:154px; }   /* js/stickybars.js keeps these exact */
/* black utility bar at very top; nav below it; red "formerly" bar below the nav. */
.top_header_bx{
  position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
  width:100% !important;z-index:1200 !important;
}
.center_header_bx{
  position:fixed !important;top:var(--tbh) !important;left:0 !important;right:0 !important;
  width:100% !important;z-index:1190 !important;
}
/* push ALL page content down by the combined bar height so nothing hides behind */
body{ padding-top:var(--barsH) !important; }
/* the open mobile nav drawer hangs below the fixed bars and scrolls internally */
.main-nav{ max-height:calc(100vh - var(--barsH) - 12px) !important; }

/* =========================================================================
   RESPONSIVE (revert-proof) — tablet & mobile
   ========================================================================= */
@media (max-width:992px){
  /* nav becomes a hamburger drawer */
  .nav-toggle{ display:inline-flex !important;align-items:center;justify-content:center; }
  .main-nav{ display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;
    background:var(--cream-50);border-top:1px solid var(--gray-200);box-shadow:var(--shadow-md);
    padding:8px;gap:2px;max-height:80vh;overflow:auto;z-index:90; }
  .main-nav.open{ display:flex !important; }
  .main-nav>li{ width:100%; }
  .main-nav>li>a{ width:100%;justify-content:space-between; }
  .main-nav .drop,.main-nav .drop .sub{ position:static !important;opacity:1 !important;visibility:visible !important;
    transform:none !important;box-shadow:none !important;border:none !important;background:transparent !important;
    padding-inline-start:14px;min-width:auto !important; }
  .main-nav .drop::before{ display:none !important; }
  .center_header_bx .container{ position:relative;flex-wrap:wrap; }
  /* grids collapse — but quick + accreditation stay 6-in-a-row */
  .quick_bx .grid{ grid-template-columns:repeat(6,1fr) !important; }
  .accred_bx .grid,.accred_bx .grid.accred6{ grid-template-columns:repeat(6,1fr) !important; }
  .stats_bx .grid{ grid-template-columns:repeat(2,1fr) !important; }
  .dyn_grid,.inner_grid,.people_grid{ grid-template-columns:repeat(2,1fr) !important; }
  .intro_bx .container,.about_bx .flx_bx{ grid-template-columns:1fr !important; }
  footer .cols{ grid-template-columns:repeat(2,1fr) !important; }
  .hero_txt h1{ font-size:2.4rem !important; }
}
/* tablet + phone (≤992px): top bar wraps + centers; UK badge stays inline */
@media (max-width:992px){
  .top_header_bx .container{ display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:center !important;gap:8px 12px;padding-block:8px; }
  .top_header_bx .right_tools,.top_header_bx .left_tools{ flex-wrap:wrap !important;justify-content:center !important; }
  .country_badge{ order:0 !important; }
}
@media (max-width:768px){
  .top_header_bx .right_tools,.top_header_bx .left_tools{ flex-wrap:wrap !important;justify-content:center; }
  /* client: 6 buttons in EXACTLY 2 ROWS on mobile -> 3 columns, equal heights */
  .quick_bx .grid{ grid-template-columns:repeat(3,1fr) !important;grid-auto-rows:1fr !important;gap:8px !important; }
  .accred_bx .grid,.accred_bx .grid.accred6{ grid-template-columns:repeat(3,1fr) !important;grid-auto-rows:1fr !important;gap:8px !important; }
  /* min-width:0 stops long labels from widening a column and breaking the 3-up grid */
  .quick_card,.accred6 .accred_card{ min-width:0 !important;height:100% !important;padding:12px 6px !important; }
  .quick_card .ic{ width:36px !important;height:36px !important;font-size:1.2rem !important;margin:0 auto 6px !important; }
  .quick_card h4{ font-size:.72rem !important;min-height:auto !important;line-height:1.25 !important;
    overflow-wrap:break-word !important;word-break:break-word !important; }
  .accred6 .accred_card .logo{ width:38px !important;height:38px !important;min-height:38px !important;flex:0 0 38px !important;font-size:1rem !important; }
  .accred6 .accred_card h4{ font-size:.7rem !important;line-height:1.25 !important;overflow-wrap:break-word !important; }
  .accred6 .accred_card p{ font-size:.62rem !important;line-height:1.4 !important; }
}

/* ==========================================================================
   HOMEPAGE — sections aligned to client spec (02_homepage_layout_spec.txt)
   ========================================================================== */
/* quick buttons: 6 per row (see .grid6 block below for the on-one-line rule) */

/* accreditations: logo + (title + text) beside it, 3 per row */
.accred_bx .grid.accred3{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:24px !important; }
.accred3 .accred_card{ display:flex !important; flex-direction:row !important; align-items:flex-start !important;
  gap:16px !important; text-align:start !important; background:#fff; border:1px solid var(--gray-200);
  border-radius:var(--radius-card); padding:20px; box-shadow:var(--shadow-sm); transition:.25s; }
.accred3 .accred_card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.accred3 .accred_card .logo{ flex:0 0 70px !important; width:70px !important; height:70px !important;
  border-radius:12px !important; background:#fff !important; border:1px solid var(--gray-200) !important;
  display:grid; place-items:center; overflow:hidden; padding:6px; }
.accred3 .accred_card .logo img{ width:100% !important; height:100% !important; object-fit:contain !important; }
.accred3 .accred_card .accred_txt{ flex:1; min-width:0; }
.accred3 .accred_card h4{ color:var(--navy-800); font-size:1.05rem; font-weight:700; margin:0 0 6px;
  line-height:1.4; overflow-wrap:break-word; }
.accred3 .accred_card p{ color:var(--gray-500); font-size:.88rem; line-height:1.6; margin:0; }

/* stats: two rows, each row a 4-col grid; small gap between rows */
.stats_bx .grid + .grid{ margin-top:24px; border-top:1px solid rgba(255,255,255,.18); padding-top:24px; }

@media (max-width:992px){
  .quick_bx .grid.grid6{ grid-template-columns:repeat(3,1fr) !important; }
  .accred_bx .grid.accred3{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px){
  .quick_bx .grid.grid6{ grid-template-columns:repeat(2,1fr) !important; }
  .accred_bx .grid.accred3{ grid-template-columns:1fr !important; }
}
@media (max-width:480px){
  .quick_bx .grid.grid6{ grid-template-columns:repeat(2,1fr) !important; }
  .dyn_grid,.inner_grid,.people_grid{ grid-template-columns:1fr !important; }
  .hero_txt h1{ font-size:2rem !important; }
  .hero_txt p{ font-size:1rem !important; }
  section{ padding-block:44px !important; }
  .table_wrap{ overflow-x:auto; }
}
@media (max-width:480px){
  .quick_bx .grid{ grid-template-columns:repeat(3,1fr) !important;gap:6px !important; }
  .accred_bx .grid,.accred_bx .grid.accred6{ grid-template-columns:repeat(3,1fr) !important;gap:6px !important; }
  .stats_bx .grid{ grid-template-columns:repeat(2,1fr) !important; }
  footer .cols{ grid-template-columns:1fr !important; }
  .logo_bx .uni-name b{ font-size:.95rem; }
  .logo_bx .uni-name .en{ font-size:.62rem; }
  .hero_txt h1{ font-size:1.65rem !important; }
}
/* images never overflow their containers */
img{ max-width:100%;height:auto; }

/* ==========================================================================
   TOP BAR 1 — rebuilt per client spec (lang switcher + currency on the left)
   ========================================================================== */
/* shared pill/icon look for every bar-1 tool */
.top_header_bx .t1tool{ display:inline-flex; align-items:center; gap:6px; color:#cfd6e4;
  background:rgba(255,255,255,.06); border:none; padding:5px 10px; border-radius:8px;
  font-size:.84rem; font-weight:600; cursor:pointer; line-height:1; white-space:nowrap; }
.top_header_bx .t1tool:hover{ background:var(--gold-500); color:var(--navy-900); }
.top_header_bx .t1tool.icon-only{ width:30px; height:30px; padding:0; justify-content:center; }
.top_header_bx .t1tool.is-embassy{ color:#2fd56f; }
.top_header_bx .t1tool.is-embassy:hover{ color:var(--navy-900); }
.top_header_bx .right_tools,.top_header_bx .left_tools{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* language switcher dropdown */
.lang-switcher{ position:relative; }
.lang-switcher .lang-menu{ position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:160px;
  background:#fff; border:1px solid var(--gray-200); border-radius:10px; box-shadow:var(--shadow-md);
  padding:6px; margin:0; list-style:none; z-index:200; display:none; }
.lang-switcher.open .lang-menu{ display:block; }
.lang-switcher .lang-menu li{ padding:0; border-radius:8px; color:var(--navy-800); font-weight:600;
  font-size:.9rem; cursor:pointer; text-align:start; overflow:hidden; }
/* the <a> fills the WHOLE row so clicks anywhere on the item navigate
   (previously only the text was clickable). */
.lang-switcher .lang-menu li a{ display:block; padding:9px 12px; color:inherit;
  text-decoration:none; width:100%; }
.lang-switcher .lang-menu li:hover{ background:var(--cream-50); color:var(--gold-600); }
.lang-switcher .lang-menu li:hover a{ color:var(--gold-600); }

/* currency switcher dropdown (mirror of language switcher, opens on the left) */
.coin-switcher{ position:relative; }
.coin-switcher .coin-menu{ position:absolute; top:calc(100% + 8px); inset-inline-start:0; min-width:160px;
  background:#fff; border:1px solid var(--gray-200); border-radius:10px; box-shadow:var(--shadow-md);
  padding:6px; margin:0; list-style:none; z-index:200; display:none; }
.coin-switcher.open .coin-menu{ display:block; }
.coin-switcher .coin-menu li a{ display:block; padding:9px 12px; border-radius:8px; color:var(--navy-800);
  font-weight:600; font-size:.9rem; text-align:start; }
.coin-switcher .coin-menu li a:hover{ background:var(--cream-50); color:var(--gold-600); }

/* home icon in nav */
.main-nav .nav-home{ font-size:1.1rem; }

/* bilingual labels (nav + footer headings): Arabic by default; when the page is
   translated (Google adds .translated-ltr/.translated-rtl to <html>) show the
   fixed English label instead — clean English (no "the", Title Case), Arabic base */
.lbl-en{ display:none; }
html.translated-ltr .lbl-ar,
html.translated-rtl .lbl-ar{ display:none; }
html.translated-ltr .lbl-en,
html.translated-rtl .lbl-en{ display:inline; }

/* hero per-slide caption: gentle fade-in when the slide (and its text) changes */
.hero_txt.cap-in h1, .hero_txt.cap-in p{ animation:capFade .8s ease both; }
@keyframes capFade{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }
/* keep the heading words from ever colliding (translation-safe) */
.hero_txt h1{ word-spacing:normal; }
.hero_txt h1 .gold{ margin-inline-start:.2em; }

/* ==========================================================================
   HERO TEXT — solid gold #d2ab57 (client). Buttons fixed; on hover -> "Apply
   Now" style (light cream fill + gold text + gold outline).
   ========================================================================== */
.hero_txt h1{
  font-weight:700 !important;
  letter-spacing:.3px !important;
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#d2ab57 !important;
  color:#d2ab57 !important;
  text-shadow:0 2px 12px rgba(0,0,0,.7) !important;
  filter:none !important;
  animation:none !important;
}
.hero_txt p{ color:#d2ab57 !important; font-weight:600 !important; text-shadow:0 2px 10px rgba(0,0,0,.7) !important; }
.hero_txt .hero_badge,
.hero_txt .hero_badge i{ color:#d2ab57 !important; border-color:#d2ab57 !important; }

/* buttons FIXED (uniform rest state): gold text + gold outline, transparent */
.hero_actions .btn-x,
.hero_actions .btn-x i,
.hero_actions .btn-x span{ color:#d2ab57 !important; font-weight:800 !important; }
.hero_actions .btn-x{ border:2px solid #d2ab57 !important; background:transparent !important;
  text-shadow:0 1px 6px rgba(0,0,0,.5); transition:.25s !important; }
/* HOVER both buttons -> NO background fill; keep gold text + gold outline + lift */
.hero_actions .btn-x:hover{ background:transparent !important; border-color:#d2ab57 !important;
  transform:translateY(-2px) !important; box-shadow:0 10px 24px rgba(0,0,0,.30) !important; }
.hero_actions .btn-x:hover,
.hero_actions .btn-x:hover i,
.hero_actions .btn-x:hover span{ color:#d2ab57 !important; }
@media (prefers-reduced-motion: reduce){ .hero_txt h1{ animation:none; } }

/* HERO size reduction (client): smaller heading/subtitle + smaller buttons. */
.hero_txt h1{ font-size:2.4rem !important; line-height:1.3 !important; margin-bottom:12px !important; }
.hero_txt p{ font-size:1rem !important; margin-bottom:20px !important; }
.hero_actions .btn-x.btn-lg{ padding:10px 20px !important; font-size:.92rem !important; }
.hero_actions .btn-x.btn-lg i{ font-size:.9em !important; }
@media (max-width:768px){
  .hero_txt h1{ font-size:1.9rem !important; }
  .hero_txt p{ font-size:.92rem !important; }
  .hero_actions .btn-x.btn-lg{ padding:9px 16px !important; font-size:.88rem !important; }
}

/* HERO buttons FIXED position: the slideshow swaps captions of different
   lengths, which used to push the buttons up/down. Reserve a fixed height
   for the heading + subtitle (tallest = 2 lines each) so the buttons always
   sit at the SAME vertical position regardless of the current caption. */
.hero_txt h1{ min-height:2.6em !important; }    /* 2 lines @ line-height 1.3 (em = h1 font-size) */
.hero_txt p{ min-height:2.8em !important; }      /* up to 2 lines of subtitle */
.hero_actions{ margin-top:8px !important; }      /* anchor right under the reserved text block */
@media (max-width:768px){
  .hero_txt h1{ min-height:2.6em !important; }
  .hero_txt p{ min-height:2.8em !important; }
}

/* ==========================================================================
   CTA STRIP ("Start your learning journey...") — content in gold #d2ab57
   ========================================================================== */
.cta_bx h2{ color:#d2ab57 !important; }
.cta_bx p{ color:#d2ab57 !important; }
.cta_bx .btn-x,
.cta_bx .btn-x i,
.cta_bx .btn-x span{ color:#d2ab57 !important; }
.cta_bx .btn-x{ background:transparent !important; border:2px solid #d2ab57 !important; }
.cta_bx .btn-x:hover{ background:transparent !important; border-color:#d2ab57 !important;
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.30); }
.cta_bx .btn-x:hover,
.cta_bx .btn-x:hover i,
.cta_bx .btn-x:hover span{ color:#d2ab57 !important; }

/* keep BAR2 nav compact so the 6 items + logo fit on one line */
.main-nav{ gap:0; }
.main-nav>li>a{ padding:12px 9px !important; font-size:.9rem !important; white-space:nowrap; }
.center_header_bx .container{ gap:10px; }
.logo_bx .uni-name b{ font-size:1rem; }
.logo_bx .uni-name .en{ font-size:.7rem; }
@media (max-width:1300px){
  .main-nav>li>a{ padding:12px 7px !important; font-size:.85rem !important; }
}

/* quick-action buttons: all 6 on ONE line + line below (client request) */
.quick_bx{ padding-bottom:36px; }
.quick_bx .container{ position:relative; }
.quick_bx .grid.grid6{ grid-template-columns:repeat(6,1fr) !important; gap:16px !important;
  padding-bottom:36px; border-bottom:2px solid var(--gold-500); }
.quick_bx .grid.grid6 .quick_card{ padding:20px 10px; }
.quick_bx .grid.grid6 .quick_card h4{ font-size:.92rem; min-height:2.8em; }

/* hide Google Translate's injected top banner/frame so it doesn't push layout */
.goog-te-banner-frame.skiptranslate,.goog-te-gadget-icon{ display:none !important; }
body{ top:0 !important; }
.goog-tooltip,.goog-text-highlight{ display:none !important; background:none !important; box-shadow:none !important; }

/* ==========================================================================
   ACCREDITATIONS — concept card (round badge on top + bold title + light text)
   Matches the approved concept: structure = icon-circle / bold title / text.
   Client: "شعار الجهة + اسم الجهة بالبونط العريض + تحته نص ببونط خفيف".
   ========================================================================== */
.accred_bx .grid.accredC{ display:grid !important; grid-template-columns:repeat(6,1fr) !important;
  gap:22px !important; align-items:stretch !important; }
.accredC_card{ display:flex !important; flex-direction:column !important; align-items:center !important;
  text-align:center !important; gap:14px !important; background:#fff; border:1px solid var(--gray-200);
  border-radius:16px; padding:30px 18px; box-shadow:var(--shadow-sm); transition:.25s; height:100%; }
.accredC_card:hover{ box-shadow:var(--shadow-md); transform:translateY(-6px); border-color:var(--gold-500); }
/* round badge holding the real org logo (concept = gold circle) */
.accredC_card .ic{ flex:0 0 auto; width:72px; height:72px; border-radius:50%;
  background:var(--grad-gold); display:grid; place-items:center; overflow:hidden; padding:12px;
  box-shadow:0 6px 16px rgba(176,138,62,.28); }
.accredC_card .ic img{ width:100%; height:100%; object-fit:contain; }
/* Font Awesome glyph inside the gold badge = navy (concept look) */
.accredC_card .ic i{ color:var(--navy-900); font-size:1.5rem; line-height:1; }
.accredC_card h4{ color:var(--navy-800); font-size:1.05rem; font-weight:700; line-height:1.4; margin:0; }
.accredC_card p{ color:var(--gray-500); font-size:.9rem; font-weight:300; line-height:1.65; margin:0; }

/* ==========================================================================
   GOALS (أهدافنا) — concept cards (gold icon circle + text)
   ========================================================================== */
.goals_bx{ background:var(--white); }
.goals_bx .grid.goalsC{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.goalC_card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  background:#fff; border:1px solid var(--gray-200); border-radius:16px; padding:30px 22px;
  box-shadow:var(--shadow-sm); transition:.25s; }
.goalC_card:hover{ box-shadow:var(--shadow-md); transform:translateY(-5px); }
.goalC_card .ic{ width:64px; height:64px; border-radius:50%; background:var(--grad-gold);
  display:grid; place-items:center; color:var(--navy-900); font-size:1.5rem;
  box-shadow:0 6px 16px rgba(176,138,62,.30); }
.goalC_card p{ color:var(--gray-700); font-size:.98rem; line-height:1.7; margin:0; }

@media (max-width:992px){
  .accred_bx .grid.accredC{ grid-template-columns:repeat(3,1fr) !important; }
  .goals_bx .grid.goalsC{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .accred_bx .grid.accredC{ grid-template-columns:repeat(2,1fr) !important; }
  .goals_bx .grid.goalsC{ grid-template-columns:1fr; }
}

/* ==========================================================================
   INNER PAGES — gold/concept polish (about_us + all pages using titleBread_bx)
   Upgrades the plain title strip into a navy+gold concept page-banner, gold
   headings, polished tabs/breadcrumb — matches the homepage look.
   ========================================================================== */
/* turn the old .titleBread_bx into a concept banner (navy gradient + campus img) */
.inner_pg .titleBread_bx{
  position:relative; overflow:hidden; border-radius:16px; margin-bottom:28px;
  padding:34px 28px; color:#fff; border:1px solid var(--gray-200);
  background:linear-gradient(120deg,#11293F 0%,#173A5A 60%,#1F4E78 100%);
  border-bottom:3px solid #d2ab57;
}
.inner_pg .titleBread_bx::before{ content:""; position:absolute; inset:0; opacity:.16;
  background:url('all_pic/rd_hero2.jpg') center/cover no-repeat; }
.inner_pg .titleBread_bx::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 88% 18%,rgba(210,171,87,.25),transparent 55%); }
.inner_pg .titleBread_bx > *{ position:relative; z-index:2; }
.inner_pg .titleBread_bx h1{ color:#d2ab57 !important; font-weight:800; font-size:2rem; margin-bottom:8px; }
.inner_pg .titleBread_bx .breadcrumb-item a{ color:#d2ab57; }
.inner_pg .titleBread_bx .breadcrumb-item a:hover{ color:#fff; }
.inner_pg .titleBread_bx .breadcrumb-item.active{ color:#eef2f9; }

/* WESSAM banner -> full-width navy bar at the top (client image #2 / news.php).
   wessam now uses a real <section class="page_banner"> (moved out of the layout
   in markup). Lay out its medal logo + title row inside the banner. */
.page_banner.wessam_banner .titleBread_bx{
  background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:0 !important; margin:0 !important; overflow:visible; }
.page_banner.wessam_banner .titleBread_bx::before,
.page_banner.wessam_banner .titleBread_bx::after{ display:none !important; }
.page_banner.wessam_banner .titleBread_bx .row{
  display:flex; align-items:center; gap:24px; margin:0; }
.page_banner.wessam_banner .titleBread_bx .col-12.col-md-8{
  display:flex; align-items:center; gap:24px; flex:1; width:auto; }
.page_banner.wessam_banner .titleBread_bx h1{
  color:var(--gold-500) !important; margin:0; }
.page_banner.wessam_banner .titleBread_bx img{ height:96px !important; width:auto; }
/* hide the share buttons that sat in the wessam banner */
.page_banner.wessam_banner .a2a_kit,
.page_banner.wessam_banner .col-md-4{ display:none !important; }
.inner_pg .titleBread_bx .breadcrumb-item+.breadcrumb-item::before{ color:#cfd6e4; }

/* ============================================================
   WESSAM candidates list (Medal of Excellence) -> client image:
   controls row with a line, and a 3-COLUMN card grid with round
   avatars + name + "the details" button. */
/* controls row (All paths select + Terms / Candidates buttons) -> aligned in
   one row with a divider line under it; dropdown = client input style. */
.partners_pg .layout .main_col > .row:first-of-type,
.partners_pg .main_col > .row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;
  gap:12px; margin:0 0 4px; padding-bottom:18px;
  border-bottom:1px solid var(--gray-200); }
.partners_pg .main_col > .row > .col-md-3{ flex:0 0 auto; width:auto !important;
  min-width:200px; padding:0; }
.partners_pg .main_col > .row > .col-md-9{ flex:0 0 auto; width:auto !important; padding:0; }
/* the "All paths" dropdown -> client form-control style */
.partners_pg .main_col > .row .form-select,
.partners_pg .main_col > .row select{
  width:100%; padding:10px 14px; height:44px; border:1px solid var(--gray-200);
  border-radius:10px; background:#fff; color:var(--navy-900);
  font-size:.95rem; font-family:inherit; }
.partners_pg .main_col > .row .form-select:focus,
.partners_pg .main_col > .row select:focus{
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,75,.18); }
/* Terms / Candidates buttons -> client gold-outline pills */
.partners_pg .rules_btn{ gap:8px; margin:0; }
.partners_pg .rules_btn .btn_th2{
  width:auto !important; background:transparent; color:var(--navy-800) !important;
  border:1.5px solid var(--gold-500); border-radius:10px; padding:9px 18px;
  font-weight:700; }
.partners_pg .rules_btn .btn_th2:hover{
  background:var(--gold-500); color:var(--navy-900) !important; }

/* wessam candidate detail: hide the empty accreditation-images box (the second
   .topStaffInfo_bx whose .row has no image columns) -> removes the empty bordered
   box at the bottom of the profile card. */
.partners_pg .allStaff2Details_bx .topStaffInfo_bx:not(:has(.news-image)){ display:none; }
.partners_pg .allStaff2Details_bx hr:has(+ .topStaffInfo_bx:not(:has(.news-image))){ display:none; }
/* candidate grid: 3 columns, uniform cards */
.partners_pg .allStaff2_bx > article > .row{
  display:grid !important; grid-template-columns:repeat(3,1fr); gap:24px; margin:0; }
.partners_pg .allStaff2_bx > article > .row > [class*="col-"]{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:0 !important; margin:0 !important; }
.partners_pg .allStaff2_bx figure{
  margin:0; background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  box-shadow:0 8px 24px rgba(17,41,63,.07); padding:24px 18px 20px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  height:100%; transition:transform .25s ease, box-shadow .25s ease; }
.partners_pg .allStaff2_bx figure:hover{ transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(17,41,63,.14); }
/* round avatar — uniform size for every candidate */
.partners_pg .allStaff2_bx figure > a:first-child{ display:block; margin:0 auto 16px; }
.partners_pg .allStaff2_bx figure > a:first-child img{
  width:130px !important; height:130px !important; object-fit:cover;
  border-radius:50% !important; border:3px solid var(--gold-400);
  box-shadow:0 6px 18px rgba(17,41,63,.12); }
/* figcaption fills remaining height so the "the details" button bottom-aligns
   across the whole row (same line) regardless of 1- or 2-line names. */
.partners_pg .allStaff2_bx figcaption{ display:flex; flex-direction:column;
  align-items:center; gap:12px; flex:1 1 auto; width:100%; }
.partners_pg .allStaff2_bx figcaption h1{
  color:var(--navy-800); font-size:1rem; font-weight:700; line-height:1.5; margin:0; }
.partners_pg .allStaff2_bx figcaption .btn_th2{
  background:#1460a5; color:#fff !important; border-radius:8px; padding:9px 22px;
  font-weight:600; text-decoration:none; width:auto; margin-top:auto; }
.partners_pg .allStaff2_bx figcaption .btn_th2:hover{ background:#6fb2e7; }
@media(max-width:880px){
  .partners_pg .allStaff2_bx > article > .row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){
  .partners_pg .allStaff2_bx > article > .row{ grid-template-columns:1fr; } }

/* .page_banner (design markup): point the faint hero overlay at a REAL server
   image (theme-inner references ../assets/hero-1.jpg which isn't on this host),
   and make the title gold to match the concept. */
.page_banner::before{ background:url('all_pic/rd_hero2.jpg') center/cover no-repeat !important; opacity:.16 !important; }
.page_banner h1{ color:#d2ab57 !important; font-weight:800; }
.page_banner .breadcrumb-item a{ color:#d2ab57; }
.page_banner .breadcrumb-item a:hover{ color:#fff; }
.page_banner .breadcrumb-item.active{ color:#eef2f9; }

/* Colleges page: department list inside each .dyn_card (real DB sub-departments,
   shown cleanly instead of the old inline-styled accordion). */
.dyn_card .dyn_sublist{ list-style:none; margin:14px 0 0; padding:14px 0 0;
  border-top:1px solid var(--gray-200); text-align:right; }
.dyn_card .dyn_sublist > li{ color:var(--gray-700); font-size:.9rem; line-height:2;
  display:block; }
/* department row (level 2) — flex header, click-to-expand when it has kids */
.dyn_card .dyn_sublist .dept_row{ display:flex; align-items:center; gap:8px; }
.dyn_card .dyn_sublist li.has_kids .dept_row{ cursor:pointer; }
.dyn_card .dyn_sublist .dept_row > i:first-child{ color:var(--gold-600); font-size:.8rem; }
.dyn_card .dyn_sublist .dept_row span{ flex:1; }
.dyn_card .dyn_sublist .dept_tog{ color:var(--navy-600); font-size:.85rem; transition:.15s; }
.dyn_card .dyn_sublist li.has_kids .dept_row:hover span{ color:var(--gold-600); }
.dyn_card .dyn_sublist li.has_kids .dept_row:hover .dept_tog{ color:var(--gold-600); }
/* specialization list (level 3) — hidden until toggled open */
.dyn_card .dyn_speclist{ list-style:none; margin:0; padding:0;
  max-height:0; overflow:hidden; transition:max-height .3s ease; }
.dyn_card .dyn_speclist.open{ max-height:600px; }
.dyn_card .dyn_speclist li{ color:var(--gray-500); font-size:.82rem; line-height:1.9;
  padding:2px 26px 2px 0; position:relative; }
.dyn_card .dyn_speclist li::before{ content:"–"; position:absolute; right:12px;
  color:var(--gold-600); }

/* News detail (show_all.php) — ported from design/news-detail.html inline styles. */
.article_cover{ width:100%; height:340px; object-fit:cover; border-radius:var(--radius-card); margin-bottom:20px; border:1px solid var(--gray-200); }
.article_meta{ display:flex; flex-wrap:wrap; gap:16px; color:var(--gray-500); font-size:.92rem; margin-bottom:16px;
  padding-bottom:16px; border-bottom:1px solid var(--gray-200); }
.article_meta span{ display:inline-flex; align-items:center; gap:6px; }
.article_meta i{ color:var(--gold-600); }
.news_body p{ color:var(--gray-700); line-height:1.95; margin-bottom:16px; }
.share_row{ display:flex; align-items:center; gap:10px; margin-top:22px; padding-top:18px; border-top:1px dashed var(--gray-200); }
.share_row b{ color:var(--navy-800); }
.share_row a{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--cream-50);
  border:1px solid var(--gray-200); color:var(--navy-800); }
.share_row a:hover{ background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); }

/* ============================================================
   CLIENT-DESIGN SHARE BUTTONS (AddToAny a2a_kit) — restyle the
   default colored squares into navy/gold rounded chips that match
   the site, with a gold divider line above the row. ============ */
.inner_pg .a2a_kit{ float:none !important;
  display:flex !important; flex-wrap:wrap; gap:8px; align-items:center; }
.inner_pg .a2a_kit a{ width:38px !important; height:38px !important;
  border-radius:10px !important; overflow:hidden; display:inline-flex !important;
  align-items:center; justify-content:center;
  border:1px solid var(--gray-200); background:var(--cream-50);
  transition:transform .2s ease, box-shadow .2s ease; }
.inner_pg .a2a_kit a:hover{ transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(17,41,63,.15); }
.inner_pg .a2a_kit a img,
.inner_pg .a2a_kit a svg,
.inner_pg .a2a_kit a span{ width:22px !important; height:22px !important; }
/* override AddToAny's brand-colored button backgrounds -> neutral client chip,
   with the icon glyph itself tinted navy (so it reads on the cream chip). */
.inner_pg .a2a_kit a .a2a_svg,
.inner_pg .a2a_kit a span.a2a_svg{
  background:transparent !important; background-color:transparent !important; }
.inner_pg .a2a_kit a .a2a_svg svg path,
.inner_pg .a2a_kit a .a2a_svg svg{ fill:var(--navy-800) !important; }
.inner_pg .a2a_kit a:hover{ background:var(--gold-500) !important;
  border-color:var(--gold-500) !important; }
.inner_pg .a2a_kit a:hover .a2a_svg svg path{ fill:var(--navy-900) !important; }

/* show_mag detail cover image — SMALLER, centered (client: image #4) */
.inner_pg .content_card .article_body .news-image img.thumImg_def{
  max-width:300px; width:auto; height:auto; margin:0 auto;
  display:block; border-radius:14px; }

/* council / wessam detail action buttons (Terms / About) -> client design
   gold-outline pill, like the program "التفاصيل" button (image #11). */
.inner_pg .rules_btn .btn_th2,
.inner_pg .content_card .rules_btn .btn_th2{
  background:transparent; color:var(--navy-800) !important;
  border:1.5px solid var(--gold-500); border-radius:10px;
  padding:9px 18px; font-weight:700; }
.inner_pg .rules_btn .btn_th2:hover{
  background:var(--gold-500); color:var(--navy-900) !important; }

/* membership tier selector (Silver/Golden/Platinum) -> each a button, in a
   row (memb_majles clnt_img_bx — client image #7). */
.inner_pg .clnt_img_bx{ list-style:none; display:flex; flex-wrap:wrap; gap:10px;
  margin:0 0 20px !important; padding:0; justify-content:center; }
.inner_pg .clnt_img_bx > a{ text-decoration:none; }
.inner_pg .clnt_img_bx li{ width:auto !important; margin:0;
  background:var(--cream-50); border:1.5px solid var(--gold-500);
  color:var(--navy-800); font-weight:700; border-radius:10px;
  padding:9px 22px; transition:.2s; }
.inner_pg .clnt_img_bx > a:hover li,
.inner_pg .clnt_img_bx li:hover{ background:var(--gold-500); color:var(--navy-900); }

/* people detail (showdata/commissions): center the social-icon + contact rows
   under the round avatar (client image #6). */
/* profile header (name + accreditation) aligns to the START side so it
   follows the language direction: right in RTL Arabic, left in LTR/English.
   !important + ol reset so nothing (incl. inline/translate) re-centers it. */
.inner_pg .content_card .topStaffInfo_bx .info_txtt{ text-align:start !important; }
.inner_pg .content_card .topStaffInfo_bx .info_txtt h1,
.inner_pg .content_card .topStaffInfo_bx .info_txtt h3{ text-align:start !important; }
.inner_pg .content_card .topStaffInfo_bx .info_txtt .persInfo{
  justify-content:flex-start !important; padding-inline-start:0; margin-inline-start:0; }

/* ============================================================
   BANK ACCOUNTS (accounts.php) -> client image #8 style: a card per
   bank, logos in a header row, every field a dashed-bordered box with
   a gold label above the value; red "submit receipt" link at bottom. */
.inner_pg .bank_bx > .row{ display:flex; flex-wrap:wrap; gap:24px; }
.inner_pg .bank_bx > .row > [class*="col-"]{ flex:1 1 420px; max-width:520px; }
.inner_pg .dataContent_bx{
  background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  box-shadow:0 10px 30px rgba(17,41,63,.06); padding:22px; }
.inner_pg .dataContent_bx > img{
  max-height:64px !important; width:auto !important; object-fit:contain; }
.inner_pg .dataContent_bx ul{ list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-direction:column; gap:12px; }
.inner_pg .dataContent_bx ul > li{
  border:1px dashed var(--gold-400); border-radius:10px; padding:10px 14px;
  text-align:center; }
.inner_pg .dataContent_bx ul > li > .row{ display:flex; gap:12px; }
.inner_pg .dataContent_bx ul > li > .row > [class*="col-"]{ flex:1; }
.inner_pg .dataContent_bx p{ color:var(--gold-600); font-size:.8rem;
  font-weight:700; margin:0 0 4px; }
.inner_pg .dataContent_bx span{ color:var(--navy-800); font-weight:700;
  font-size:.95rem; word-break:break-word; }
.inner_pg .dataContent_bx ul > li:last-child{ border:0; padding-top:6px; }
.inner_pg .dataContent_bx ul > li:last-child p{ color:#e23b3b; font-weight:600; }
.inner_pg .dataContent_bx ul > li:last-child a{ color:#1460a5; font-weight:700; }

/* ============================================================
   WESSAM (Medal of Excellence) candidate grid — client image #2:
   3-per-row cards, round avatar, name, blue "the details" button. */
.wessam_grid.row{ display:grid !important; grid-template-columns:repeat(3,1fr);
  gap:24px; margin:0; }
.wessam_grid.row > [class*="col-"]{ width:auto !important; max-width:none !important;
  flex:none !important; padding:0 !important; margin:0 !important; }
.wessam_grid .person_card{
  background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  box-shadow:0 8px 24px rgba(17,41,63,.07); padding:26px 18px 22px;
  text-align:center; display:flex; flex-direction:column; align-items:center;
  transition:transform .25s ease, box-shadow .25s ease; }
.wessam_grid .person_card:hover{ transform:translateY(-5px);
  box-shadow:0 16px 36px rgba(17,41,63,.14); }
.wessam_grid .person_card .ph{
  width:120px; height:120px; border-radius:50%; overflow:hidden; margin:0 auto 16px;
  border:3px solid var(--gold-400); box-shadow:0 6px 18px rgba(17,41,63,.12); }
.wessam_grid .person_card .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.wessam_grid .person_card h3{ color:var(--navy-800); font-size:1rem; font-weight:700;
  line-height:1.5; margin:0 0 16px; }
.wessam_grid .person_card .details_btn{
  background:#1460a5; color:#fff !important; border-radius:8px;
  padding:9px 22px; font-weight:600; text-decoration:none; margin-top:auto; }
.wessam_grid .person_card .details_btn:hover{ background:#6fb2e7; }
@media(max-width:880px){ .wessam_grid.row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .wessam_grid.row{ grid-template-columns:1fr; } }

/* hide the share buttons in the majalaa title banner (client image #1 red box) */
.inner_pg .titleBread_bx .a2a_kit,
.inner_pg .titleBread_bx .col-md-4:has(.a2a_kit){ display:none !important; }

/* majalaa "Periodic numbers" (do=num) issue cards -> 2 COLUMNS (client red box).
   Cards are .col-md-4 inside .allStaff2Details_bx > .staffInfosec_bx > .row.
   Scoped to the NON-content_card variant (the num grid) so the profile detail
   cards (.content_card.allStaff2Details_bx) are NOT affected. */
.inner_pg .allStaff2Details_bx:not(.content_card) .staffInfosec_bx > .row{
  display:grid !important; grid-template-columns:repeat(2,1fr); gap:22px; margin:0; }
.inner_pg .allStaff2Details_bx:not(.content_card) .staffInfosec_bx > .row > .col-md-4{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:0 !important; margin:0 !important; }
@media(max-width:680px){
  .inner_pg .allStaff2Details_bx:not(.content_card) .staffInfosec_bx > .row{ grid-template-columns:1fr; } }

/* MAJALAA banner -> full-width navy bar at the top; 2-col layout below it.
   .pannel_pg .layout is grid; the titleBread is the first child of main_col and
   the aside is the next grid item. Make the banner full-bleed and span the whole
   grid row; the aside is offset down so it starts below the banner.  */
/* MAJALAA: banner full-width at top; the 2-col row (content right, sidebar left)
   sits cleanly BELOW it. The titleBread is inside main_col, so we pull it OUT of
   the normal flow (absolute, full-bleed) and push the whole .layout down by the
   banner height so the sidebar never overlaps the banner. */
.inner_pg.pannel_pg{ padding-top:0 !important; }
.inner_pg.pannel_pg > .container{ position:relative; }
.inner_pg.pannel_pg .layout{
  display:grid; grid-template-columns:1fr 300px; gap:32px; align-items:start;
  padding-top:236px; }                              /* clearance = banner height */
.inner_pg.pannel_pg .main_col > .titleBread_bx{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:100vw; margin:0;
  border-radius:0; border:0; border-bottom:3px solid #d2ab57; padding:48px 0; }
.inner_pg.pannel_pg .main_col > .titleBread_bx > .row{
  width:100%; max-width:1180px; margin:0 auto; padding:0 24px;
  display:flex; align-items:center; }
@media(max-width:992px){
  .inner_pg.pannel_pg .layout{ grid-template-columns:1fr; padding-top:180px; } }
/* the single current-issue card sits at the START side of the content column,
   following language direction (right in RTL, left in LTR) — not centered. */
.inner_pg.pannel_pg .presSpeech_bx,
.inner_pg.pannel_pg .allStaff2Details_bx:not(.content_card){ text-align:start; }
.inner_pg.pannel_pg .allStaff2Details_bx:not(.content_card) .staffInfosec_bx > .row{
  justify-content:flex-start !important; }
.inner_pg.pannel_pg .allStaff2Details_bx:not(.content_card) .staffInfosec_bx > .row > .col-md-4{
  margin-inline-start:0 !important; }

/* footer contact items -> vertically center the icon with its text */
footer .fcontact li{ align-items:center !important; }
footer .fcontact i{ margin-top:0 !important; }

/* hide the share buttons in the courses_forms activity DETAIL view (red box) */
.detailsCourses_pg .a2a_kit,
.mainCourses_pg .a2a_kit{ display:none !important; }

/* ============================================================
   VALIDATION (certificate inquiry) form -> client input style:
   2-col rows, navy labels, rounded inputs, gold focus ring. */
.inner_pg .cert_form_inner form > .row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:0 0 18px; }
.inner_pg .cert_form_inner form > .row > [class*="col-"]{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:0 !important; margin:0 !important; }
.inner_pg .cert_form_inner label{
  display:block; color:var(--navy-800); font-weight:600; font-size:.92rem;
  margin:0 0 6px; text-align:start; }
.inner_pg .cert_form_inner .form-control{
  width:100%; padding:11px 14px; height:46px; border:1px solid var(--gray-200);
  border-radius:10px; background:#fff; color:var(--navy-900);
  font-size:.95rem; font-family:inherit; text-align:start; }
.inner_pg .cert_form_inner .form-control::placeholder{ color:var(--gray-400,#9aa4b2); }
.inner_pg .cert_form_inner .form-control:focus{
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,75,.18); }
.inner_pg .cert_form_inner .btn_bx{ display:flex; justify-content:flex-end; margin-top:4px; }
.inner_pg .cert_form_inner .btn_th2{ width:auto; padding:11px 28px; }
@media(max-width:680px){
  .inner_pg .cert_form_inner form > .row{ grid-template-columns:1fr; } }

/* ============================================================
   courses_forms ACTIVITY DETAIL (do=show) -> client style:
   info header card with a line, and a SMALLER poster image. */
.inner_pg .courseDet_3a{
  display:flex; flex-wrap:wrap; gap:24px; align-items:flex-start;
  background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  box-shadow:0 10px 30px rgba(17,41,63,.06); padding:24px; margin-bottom:24px; }
.inner_pg .courseDet_3a .data{ flex:1 1 320px; min-width:260px;
  border-inline-start:0; }
.inner_pg .courseDet_3a .data .title_3a{
  color:var(--navy-800); font-weight:800; margin:0 0 8px;
  padding-bottom:10px; border-bottom:1px solid var(--gray-200); }
.inner_pg .courseDet_3a .data .title_3a + .title_3a{ border-bottom:0; padding-bottom:0;
  color:var(--gray-700); font-weight:600; }
.inner_pg .courseDet_3a .data .date{
  color:var(--gray-700); font-size:.92rem; margin:8px 0; display:flex;
  align-items:center; gap:8px; }
.inner_pg .courseDet_3a .data .date i{ color:var(--gold-600); }
/* poster image -> SMALLER, framed, on the side (was huge full-width) */
.inner_pg .courseDet_3a > a.thumb_popup{
  float:none !important; flex:0 0 280px; max-width:280px; display:block;
  margin:0 !important; }
.inner_pg .courseDet_3a > a.thumb_popup img{
  width:100% !important; height:auto !important; float:none !important;
  border-radius:12px; border:1px solid var(--gray-200);
  box-shadow:0 8px 24px rgba(17,41,63,.10); }
@media(max-width:680px){
  .inner_pg .courseDet_3a > a.thumb_popup{ flex:1 1 100%; max-width:100%; } }

/* ============================================================
   COURSE DETAIL TABS (show_Course tabsMoreInfo_bx) -> client image #1:
   clean tab row, active = blue; content card; readable topics list. */
.inner_pg .tabsMoreInfo_bx{ margin-top:8px; }
.inner_pg .tabsMoreInfo_bx .nav-tabs{
  display:flex; flex-wrap:wrap; gap:8px; border:0; list-style:none;
  margin:0 0 0; padding:0; }
.inner_pg .tabsMoreInfo_bx .nav-tabs .nav-item{ margin:0; }
.inner_pg .tabsMoreInfo_bx .nav-tabs .nav-link{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--cream-50); border:1px solid var(--gray-200);
  border-radius:10px 10px 0 0; color:var(--navy-800); font-weight:700;
  font-size:.95rem; padding:11px 22px; transition:.2s; }
.inner_pg .tabsMoreInfo_bx .nav-tabs .nav-link p{ margin:0; }
.inner_pg .tabsMoreInfo_bx .nav-tabs .nav-link:hover{
  background:var(--cream-100); color:var(--gold-700); }
.inner_pg .tabsMoreInfo_bx .nav-tabs .nav-link.active{
  background:#1460a5; border-color:#1460a5; color:#fff; }
/* tab content panel */
.inner_pg .tabsMoreInfo_bx .tab-content{
  background:#fff; border:1px solid var(--gray-200); border-radius:0 14px 14px 14px;
  box-shadow:0 8px 24px rgba(17,41,63,.06); padding:24px; margin-top:-1px; }
.inner_pg .tabsMoreInfo_bx .tab-content .txt_bx{ color:var(--gray-700); line-height:2; }
.inner_pg .tabsMoreInfo_bx .tab-content .txt_bx p,
.inner_pg .tabsMoreInfo_bx .tab-content p{ color:var(--gray-700);
  line-height:1.95; margin:0 0 10px; }
.inner_pg .tabsMoreInfo_bx .tab-content h1,
.inner_pg .tabsMoreInfo_bx .tab-content h2,
.inner_pg .tabsMoreInfo_bx .tab-content h3{ color:var(--navy-800); }
/* show ONLY the active tab panel (Bootstrap JS not active in test1) */
.inner_pg .tabsMoreInfo_bx .tab-content > .tab-pane{ display:none; }
.inner_pg .tabsMoreInfo_bx .tab-content > .tab-pane.active,
.inner_pg .tabsMoreInfo_bx .tab-content > .tab-pane.show.active{ display:block; }

/* course thumbnail (green box) fills its box (black) properly */
.inner_pg .courseDet_3a .col-md-6 > a.thumb_popup,
.inner_pg .courseDet_3a .col-md-6 > a.thumb_popup img{
  float:none !important; display:block; width:100% !important; margin:0; }
.inner_pg .courseDet_3a .col-md-6 > a.thumb_popup img{
  height:auto; max-height:340px; object-fit:contain;
  border:1px solid var(--gray-200); border-radius:12px;
  background:var(--cream-50); }

/* "not registered" alert (red box) -> rounded border, centered content+text;
   10px margin above the border box. */
.inner_pg .alert.alert-warning{
  border:1px dashed var(--gold-500); border-radius:16px;
  background:var(--cream-50); padding:26px 24px; text-align:center;
  margin-top:10px;
  display:flex; flex-direction:column; align-items:center; gap:8px; }

/* page background -> client clean white (course detail and inner pages) */
.detailsCourses_pg, .detailsCourses_pg.inner_pg{ background:#fff; }
.inner_pg .alert.alert-warning > i{ font-size:1.8rem; color:var(--gold-600); margin:0; }
.inner_pg .alert.alert-warning .txt_bx{ text-align:center; }
.inner_pg .alert.alert-warning .txt_bx h1{
  color:var(--navy-800); font-size:1.15rem; font-weight:700; line-height:1.7; margin:0; }
.inner_pg .alert.alert-warning .txt_bx a,
.inner_pg .alert.alert-warning a{ display:inline-flex; margin:4px; }

/* ============================================================
   MAJALAA category list (majalaa_menu .stickyPanel_menu) -> client image #1:
   each item a button, the whole group framed with a line/border. */
.inner_pg .stickyPanel_menu{
  background:#fff; border:1px solid var(--gray-200); border-radius:14px;
  box-shadow:0 8px 24px rgba(17,41,63,.06); padding:10px; margin-bottom:22px; }
.inner_pg .stickyPanel_menu ul{ list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px; }
.inner_pg .stickyPanel_menu ul li{ margin:0; }
.inner_pg .stickyPanel_menu ul li a{
  display:inline-flex; align-items:center; text-decoration:none;
  background:var(--cream-50); border:1px solid var(--gray-200); border-radius:10px;
  padding:9px 16px; color:var(--navy-800); font-weight:600; font-size:.9rem;
  transition:.2s; }
.inner_pg .stickyPanel_menu ul li a:hover{
  background:var(--cream-100); border-color:var(--gold-400); color:var(--gold-700); }
.inner_pg .stickyPanel_menu ul li a.active{
  background:var(--gold-500); border-color:var(--gold-500); color:var(--navy-900); }

/* ============================================================
   LIBRARY author search (lib_search_bx) -> client image #2:
   client-design inputs, the whole group framed with a line. */
.inner_pg .lib_search_bx{
  background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  box-shadow:0 10px 30px rgba(17,41,63,.06); padding:18px 20px; margin-bottom:24px; }
.inner_pg .lib_search_bx .lib_search_top{
  width:15vw;
  display:flex; justify-content:flex-start; margin-bottom:14px;
  padding-bottom:14px; border-bottom:1px solid var(--gray-200); }
.inner_pg .lib_search_bx .lib_search_top .btn_th2{ width:auto; }
.inner_pg .lib_search_bx form > .row{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0; }
.inner_pg .lib_search_bx form > .row > [class*="col-"]{
  flex:1 1 0; min-width:150px; width:auto !important; max-width:none !important;
  padding:0 !important; margin:0 !important; }
.inner_pg .lib_search_bx form > .row > .col-md-1{ flex:0 0 auto; min-width:120px; }
.inner_pg .lib_search_bx .form-control,
.inner_pg .lib_search_bx .form-select,
.inner_pg .lib_search_bx select{
  width:100% !important; padding:11px 14px; border:1px solid var(--gray-200);
  border-radius:10px; background:#fff; color:var(--navy-900);
  font-size:.95rem; font-family:inherit; margin:0; height:44px; }
.inner_pg .lib_search_bx .form-select,
.inner_pg .lib_search_bx select{ padding:4px 14px; }
.inner_pg .lib_search_bx .form-control:focus,
.inner_pg .lib_search_bx .form-select:focus,
.inner_pg .lib_search_bx select:focus{
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,75,.18); }
.inner_pg .lib_search_bx .btn_th2{ width:100% !important; height:44px; text-align:center; border-radius:10px; }
@media(max-width:680px){
  .inner_pg .lib_search_bx form > .row > [class*="col-"]{ flex:1 1 100%; } }

.related_item{ display:flex; gap:12px; padding:10px; border-radius:10px; transition:.2s; }
.related_item:hover{ background:var(--cream-50); }
.related_item img{ width:74px; height:60px; object-fit:cover; border-radius:8px; flex:0 0 74px; }
.related_item h5{ color:var(--navy-800); font-size:.92rem; line-height:1.5; margin-bottom:4px; }
.related_item span{ color:var(--gold-600); font-size:.78rem; }

/* Generic content page body (design/page.html .article_body): readable prose,
   centered lead image, gold sign-off. Used by simple DB `pages` content. */
.content_card .article_body img{ max-width:100%; height:auto; border-radius:12px;
  margin:0 0 18px; border:1px solid var(--gray-200); }
.content_card .article_body p{ color:var(--gray-700); line-height:1.95; margin-bottom:16px; }
.content_card .article_body .lead{ font-size:1.08rem; color:var(--navy-800); font-weight:500; }
.content_card .article_body .signoff{ color:var(--gold-600); font-weight:700; margin-top:14px; }
/* sub-unit link chips (research deanship landing etc.) */
.unit_links{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.unit_links li a{ display:flex; align-items:center; gap:10px; padding:16px 18px;
  background:#fff; border:1px solid var(--gray-200); border-radius:12px;
  color:var(--navy-800); font-weight:600; text-decoration:none; transition:.2s; }
.unit_links li a::before{ content:"\f105"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--gold-600); }
.unit_links li a:hover{ border-color:var(--gold-400); background:var(--cream-50); transform:translateY(-3px); }

/* Partner / membership LOGO grid (real DB logos shown as clean white cards). */
.logo_grid{ list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; }
.logo_grid li{ margin:0; }
.logo_grid li a{ display:flex; align-items:center; justify-content:center; height:120px; padding:18px;
  background:#fff; border:1px solid var(--gray-200); border-radius:14px; transition:.2s; }
.logo_grid li a:hover{ border-color:var(--gold-400); box-shadow:var(--shadow-md); transform:translateY(-4px); }
.logo_grid li img{ max-width:100%; max-height:100%; object-fit:contain; }

/* ---------- People grid (council / members / faculty) — from design ---------- */
.people_grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.person_card{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm); padding:22px; text-align:center; transition:.25s; }
.person_card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--gold-400); }
.person_card .ph{ width:104px; height:104px; border-radius:50%; overflow:hidden; margin:0 auto 14px;
  border:3px solid var(--gold-400); background:var(--cream-50); }
.person_card .ph img{ width:100%; height:100%; object-fit:cover; }
.person_card h3{ color:var(--navy-800); font-size:1.05rem; margin-bottom:4px; }
.person_card .role{ color:var(--gold-600); font-weight:600; font-size:.9rem; }
@media(max-width:992px){ .people_grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){ .people_grid{ grid-template-columns:repeat(2,1fr); } }

/* faculty (data_mem.php?do=mohader): rank filter tabs + college select, styled
   to the design system (navy/gold) and laid out above the people_grid. */
.staffFilter_bx{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  margin:0 0 22px; padding:0 0 18px; border-bottom:1px solid var(--gray-200); }
.staffFilter_bx .rank_tabs{ display:flex; flex-wrap:wrap; gap:8px; }
.staffFilter_bx .rank_tab{ display:inline-flex; align-items:center; justify-content:center;
  padding:8px 16px; border-radius:999px; font-size:.9rem; font-weight:600;
  color:var(--navy-800); background:var(--cream-50); border:1px solid var(--gray-200);
  text-decoration:none; transition:.2s; white-space:nowrap; }
.staffFilter_bx .rank_tab:hover{ border-color:var(--gold-400); color:var(--navy-900); }
.staffFilter_bx .rank_tab.is-active{ background:var(--gold-500); border-color:var(--gold-500);
  color:var(--navy-900); }
.staffFilter_bx .college_sel{ margin-inline-start:auto; min-width:200px; height:42px;
  padding:6px 14px; border-radius:10px; border:1px solid var(--gray-200);
  background:#fff; color:var(--navy-800); font-size:.9rem; cursor:pointer; }
.staffFilter_bx .college_sel:focus{ outline:none; border-color:var(--gold-400);
  box-shadow:0 0 0 3px rgba(210,171,87,.18); }
@media(max-width:680px){
  .staffFilter_bx{ flex-direction:column; align-items:stretch; }
  .staffFilter_bx .rank_tabs{ justify-content:center; }
  .staffFilter_bx .college_sel{ margin-inline-start:0; width:100%; }
}

/* ---------- Data table (journal / library) — from design ---------- */
.table_wrap{ overflow-x:auto; border:1px solid var(--gray-200); border-radius:var(--radius-card); box-shadow:var(--shadow-sm); }
.data_table{ width:100%; border-collapse:collapse; background:#fff; min-width:560px; }
.data_table th{ background:var(--navy-800); color:#fff; font-weight:700; padding:14px 16px; text-align:center;
  font-size:.95rem; white-space:nowrap; border-bottom:3px solid var(--gold-500); }

/* ----- per-page tweaks (client requests) ----------------------------------- */
/* wessam showpage: "Register now" button -> 15px above */
.partners_pg a.btn_th2[href*="do=reg"]{ margin-top:15px; }
/* library: Add-author row -> button sized like the framed area (not full width
   with an empty gap); split the top row into the blue button + a sized slot. */
.inner_pg .lib_search_bx .lib_search_top{ justify-content:space-between; gap:12px; }
.inner_pg .lib_search_bx .lib_search_top .btn_th2{
  flex:1 1 auto; width:auto !important; height:48px; text-align:center; }
/* majalaa single current-issue card -> centered, sensible width (was 1/3 / half) */
.inner_pg .allStaff2Details_bx:not(.content_card) .staffInfosec_bx > .row:has(> .col-md-4:only-child){
  display:flex !important; justify-content:center; }
.inner_pg .allStaff2Details_bx:not(.content_card) .staffInfosec_bx > .row > .col-md-4:only-child{
  flex:0 0 360px; max-width:360px; }
.data_table td{ padding:13px 16px; border-bottom:1px solid var(--gray-200); color:var(--gray-700); font-size:.93rem; }
.data_table tbody tr:nth-child(even){ background:var(--cream-50); }
.data_table tbody tr:hover{ background:rgba(201,162,75,.08); }

/* ---------- Stats grid (الراصد / Observer) — from design ---------- */
.stats_grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.stat_card{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm); padding:26px 18px; text-align:center; transition:.25s; }
.stat_card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold-400); }
.stat_card .ic{ width:52px; height:52px; border-radius:13px; display:grid; place-items:center; margin:0 auto 12px;
  background:var(--cream-50); color:var(--gold-600); font-size:1.35rem; }
.stat_card .num{ color:var(--navy-800); font-size:1.9rem; font-weight:700; line-height:1.2; }
.stat_card .lbl{ color:var(--gray-500); font-size:.92rem; margin-top:4px; }
@media(max-width:992px){ .stats_grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:768px){ .stats_grid{ grid-template-columns:1fr; } }

/* inner section headings -> navy with gold underline (concept) */
.inner_pg h1:not(.titleBread_bx h1),
.inner_pg .about_bx article h2{ color:var(--navy-800); }

/* about tabs: active = gold (concept accent) instead of plain navy */
.about_bx .nav-tabs .nav-link.active{ background:#d2ab57 !important; color:var(--navy-900) !important;
  border-color:#d2ab57 !important; }
.about_bx .nav-tabs .nav-link.active i,
.about_bx .nav-tabs .nav-link.active p{ color:var(--navy-900) !important; }
.about_bx .nav-tabs .nav-link:hover{ border-color:#d2ab57 !important; color:#C19A42 !important; }

/* aside sidebar active -> gold */
.asideMenu_bx .nav-item .nav-link.active{ background:#d2ab57 !important; color:var(--navy-900) !important; }
.asideMenu_bx .nav-item .nav-link.active i{ color:var(--navy-900) !important; }

/* ==========================================================================
   COURSE / PROGRAM LISTING — concept cards (matches client's "Academic
   Programs" mockup: white intro card, navy+gold program cards 3-per-row,
   gold-outline Details buttons, navy "Categories" sidebar + gold CTA card,
   navy pagination). Targets the existing courses_education.php markup so the
   PHP/data is untouched — DB content flows straight into the new look.
   ========================================================================== */

/* --- search bar: client-design card, fields aligned in one row ------------ */
.mainCourses_pg .search_bx{
  background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  box-shadow:0 10px 30px rgba(17,41,63,.06); padding:18px 20px; margin-bottom:22px; }
.mainCourses_pg .search_bx form > .row{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:0; }
.mainCourses_pg .search_bx form > .row > [class*="col-"]{
  flex:1 1 0; min-width:160px; padding:0; margin:0; max-width:none; }
.mainCourses_pg .search_bx form > .row > .col-md-2{ flex:0 0 auto; min-width:120px; }
.mainCourses_pg .search_bx .form-control,
.mainCourses_pg .search_bx .form-select,
.mainCourses_pg .search_bx select{
  width:100%; padding:11px 14px; border:1px solid var(--gray-200);
  border-radius:10px; background:#fff; color:var(--navy-900);
  font-size:.95rem; font-family:inherit; margin:0; height:44px; }
.mainCourses_pg .search_bx .form-select,
.mainCourses_pg .search_bx select{ padding:4px 14px; }
.mainCourses_pg .search_bx .form-control:focus,
.mainCourses_pg .search_bx .form-select:focus,
.mainCourses_pg .search_bx select:focus{
  outline:none; border-color:var(--gold-500); box-shadow:0 0 0 3px rgba(201,162,75,.18); }
.mainCourses_pg .search_bx .btn_bx{ margin:0 !important; }
.mainCourses_pg .search_bx .btn_bx .btn_th2{
  width:100%; height:44px; text-align:center; border-radius:10px; }
.mainCourses_pg .search_bx hr{ display:none !important; }
@media(max-width:680px){
  .mainCourses_pg .search_bx form > .row > [class*="col-"]{ flex:1 1 100%; }
}

/* result count */
.mainCourses_pg .result_bx{ margin-top:8px; margin-bottom:18px; }
.mainCourses_pg .result_bx h4{
  font-size:16px; font-weight:600; color:var(--navy-800); margin:0; }
.mainCourses_pg .result_bx h4 span{ margin-inline-start:6px; color:#1460a5 !important; }

/* --- theme buttons btn_th1/2/3: ported from the LIVE SITE (solid blue) -----
   These had NO styling in test1, so the "تحقيق" search button and other
   btn_th2 links rendered plain. Restore the live look. */
.btn_th1,.btn_th2,.btn_th3{
  background:#1460a5; color:#fff !important; min-height:36px; line-height:1.4;
  font-size:15px; font-weight:600; padding:8px 18px; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; border:0; cursor:pointer;
  transition:background .25s ease, color .25s ease; }
.btn_th1 i,.btn_th2 i,.btn_th3 i,
.btn_th1 svg,.btn_th2 svg,.btn_th3 svg{ color:#cfe3f6; }
.btn_th1:hover,.btn_th2:hover,.btn_th3:hover{ background:#6fb2e7; color:#fff !important; }
.btn_th1:hover i,.btn_th2:hover i,.btn_th3:hover i,
.btn_th1:hover svg,.btn_th2:hover svg,.btn_th3:hover svg{ color:#fff; }
/* search-row submit fills its column like the live site */
.mainCourses_pg .search_bx .btn_bx .btn_th2{ width:100%; text-align:center; }

/* --- program cards: match the LIVE SITE course-card styling --------------
   (ported verbatim from the live styles.min.css: simple image + blue title +
   blue body text, no card frame / hover-lift / details button). */
/* 3-per-row card grid (image 2 goal) — robust regardless of Bootstrap grid. */
.mainCourses_pg .coursess_list .row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; row-gap:24px; }
.mainCourses_pg .coursess_list .row > [class*="col-"]{
  width:auto !important; max-width:none !important; flex:none !important;
  padding:0 !important; margin:0 !important; }
@media(max-width:880px){ .mainCourses_pg .coursess_list .row{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .mainCourses_pg .coursess_list .row{ grid-template-columns:1fr; } }
.mainCourses_pg .coursess_list figure{ margin:0; }
.mainCourses_pg .coursess_list figure img{
  width:100%; height:144px; border-radius:12px; margin-bottom:10px;
  object-fit:cover;
}
.mainCourses_pg .coursess_list figure figcaption{ padding:5px; text-align:right; }
.mainCourses_pg .coursess_list figure figcaption a{
  font-size:18px; font-weight:600; color:#1460a5; display:block;
  text-decoration:none; transition:all .3s ease-in-out;
}
.mainCourses_pg .coursess_list figure figcaption a:hover{ color:#6fb2e7; }
.mainCourses_pg .coursess_list figure figcaption p{
  font-size:14px; font-weight:500; line-height:22px; color:#484848;
}

/* --- pagination: navy active page, soft chevrons -------------------------- */
.mainCourses_pg .pagging_bx{ margin-top:30px; }
.mainCourses_pg .pagging_bx .pagination{ justify-content:center; gap:8px; flex-wrap:wrap; }
.mainCourses_pg .pagging_bx .pagination li a,
.mainCourses_pg .pagging_bx .pagination li span,
.mainCourses_pg .pagging_bx .pagination li{
  border:none !important; background:transparent !important;
}
.mainCourses_pg .pagging_bx .pagination a,
.mainCourses_pg .pagging_bx .pagination span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px; border-radius:10px;
  border:1px solid #e3e3e3 !important; background:#fff !important;
  color:var(--navy-800) !important; font-weight:700; text-decoration:none;
  transition:all .2s ease;
}
.mainCourses_pg .pagging_bx .pagination a:hover{
  border-color:#d2ab57 !important; color:#C19A42 !important;
}
.mainCourses_pg .pagging_bx .pagination .active a,
.mainCourses_pg .pagging_bx .pagination .active span,
.mainCourses_pg .pagging_bx .pagination a.active{
  background:var(--navy-800) !important; color:#fff !important;
  border-color:var(--navy-800) !important;
}

/* --- "Categories" sidebar: navy header + gold arrows + CTA card ----------- */
/* On course pages the aside menu becomes a navy "Categories" panel.          */
.mainCourses_pg .asideMenu_bx{
  background:#fff !important; border:1px solid #ececec; border-radius:16px;
  overflow:hidden; box-shadow:0 10px 28px rgba(17,41,63,.07);
}
.mainCourses_pg .asideMenu_bx > .navbar{
  display:block !important; padding:0 !important; background:transparent !important;
}
/* gold-arrow list items */
.mainCourses_pg .asideMenu_bx .nav-item .nav-link{
  display:flex !important; align-items:center; gap:10px; flex-direction:row;
  padding:13px 18px !important; color:var(--navy-800) !important; font-weight:600;
  border-bottom:1px solid #f1eee7;
}
.mainCourses_pg .asideMenu_bx .nav-item .nav-link i{ color:#d2ab57 !important; }
.mainCourses_pg .asideMenu_bx .nav-item .nav-link:hover{
  background:#faf7f0 !important; color:#C19A42 !important;
}

/* gold "Ready to enroll?" CTA card (markup added in left_menu.php) */
.asideCta_bx{
  margin-top:22px; border-radius:16px; padding:26px 22px; text-align:center;
  background:var(--grad-navy); color:#fff;
  box-shadow:0 12px 30px rgba(17,41,63,.18);
}
.asideCta_bx i{ font-size:1.9rem; color:#d2ab57; margin-bottom:10px; display:block; }
.asideCta_bx h4{ color:#fff; font-weight:800; margin:0 0 6px; font-size:1.15rem; }
.asideCta_bx p{ color:#d7deea; font-size:.9rem; margin:0 0 16px; }
.asideCta_bx .btn-cta{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--grad-gold); color:var(--navy-900); font-weight:800;
  border-radius:10px; padding:11px 26px; transition:transform .2s ease,filter .2s ease;
}
.asideCta_bx .btn-cta:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* ============================================================
   PERSON / ENTITY PROFILE DETAIL  (council / chairs / exp_houses
   "do=show" member pages, showdata commission profile).
   Legacy markup (.topStaffInfo_bx / .news-image / .info_txtt /
   .persInfo) had NO styling -> image rendered at native size and
   text broke out of the card. This contains it as a compact card:
   small logo + name/accreditation header row, then contained body.
   Matches the client-approved "framed card" reference. ============ */
.content_card.allStaff2Details_bx{ overflow:hidden; }
.content_card .staffInfosec_bx{ width:100%; }
.content_card .topStaffInfo_bx{
  display:flex; align-items:flex-start; gap:22px; flex-wrap:wrap;
  padding-bottom:20px; margin-bottom:4px;
  border-bottom:1px solid var(--gray-200); }
/* small constrained logo / portrait (was full-bleed centered) */
.content_card .topStaffInfo_bx .news-image{
  flex:0 0 180px; width:180px; margin:0; text-align:center; }
.content_card .topStaffInfo_bx .news-image img{
  width:180px; height:180px; object-fit:cover;
  background:#fff; border:3px solid var(--gold-400);
  border-radius:50%; padding:0;
  box-shadow:0 8px 24px rgba(17,41,63,.12); }
/* name + accreditation block beside the logo */
.content_card .info_txtt{ flex:1 1 320px; min-width:260px; text-align:start; }
.content_card .info_txtt h1{
  font-size:1.35rem; color:var(--navy-800); font-weight:800; margin:0 0 8px; }
.content_card .info_txtt h3{
  font-size:.95rem; color:var(--gray-700); font-weight:600;
  line-height:1.9; margin:0 0 12px; }
/* social + contact icon rows */
.content_card .persInfo{
  list-style:none; margin:0 0 8px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.content_card .persInfo .btn_th3{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  background:var(--cream-50); border:1px solid var(--gray-200);
  border-radius:10px; padding:8px 12px; color:var(--navy-800);
  font-size:.85rem; font-weight:600; transition:.2s; }
.content_card .persInfo .btn_th3:hover{
  background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); }
.content_card .persInfo .btn_th3.btn_icn{ width:40px; height:40px; padding:0;
  justify-content:center; }
.content_card .persInfo .btn_th3 p{ margin:0; }
.content_card .persInfo .btn_th3 i{ color:var(--gold-600); }
.content_card .persInfo .btn_th3:hover i{ color:var(--navy-900); }
/* profile body text (DB subject) — contained, readable */
.content_card.allStaff2Details_bx > .staffInfosec_bx p{
  color:var(--gray-700); line-height:1.95; margin:0px 0px 0px; text-align:right; }
.content_card.allStaff2Details_bx hr{
  border:0; border-top:1px solid var(--gray-200); margin:18px 0; }
@media(max-width:560px){
  .content_card .topStaffInfo_bx{ flex-direction:column; align-items:center; }
  .content_card .info_txtt{ text-align:center; }
  .content_card .persInfo{ justify-content:center; }
}

/* ============================================================
   FULL-WIDTH content pages (inc_content_page.php: pages.php word
   pages, near/jobs/laws/policy/research_studies/3madet/links).
   Client goal: the article content must occupy the FULL content
   width (not be squeezed into a narrow column beside a sidebar).
   .main_col_full is a plain full-width block; .rich_txt holds the
   admin's raw HTML (which itself contains <p>/<table>) so we must
   NOT wrap it in <p> (invalid nesting collapses the text). ====== */
.main_col_full{ width:100%; min-width:0; }
.content_card .article_body .rich_txt{ color:var(--gray-700); line-height:1.95; }
.content_card .article_body .rich_txt p{ color:var(--gray-700); line-height:1.95;
  margin-bottom:16px; }
.content_card .article_body .rich_txt b,
.content_card .article_body .rich_txt strong{ color:var(--navy-800); }
.content_card .article_body .rich_txt img{ max-width:100%; height:auto;
  border-radius:12px; border:1px solid var(--gray-200); }
.content_card .article_body .rich_txt table{ max-width:100%; }
/* cover image: float beside the prose like the client reference
   (text wraps around it instead of pushing the whole article narrow) */
/* content cover image floats to the START side so it follows text direction
   (right in RTL Arabic, left in LTR/translated view) — client image #3 */
.content_card .article_body > .highslide{ display:block; float:right;
  width:300px; max-width:42%; margin:0 0 16px 22px; }
html[dir="ltr"] .content_card .article_body > .highslide,
[dir="ltr"] .content_card .article_body > .highslide{ float:left; margin:0 22px 16px 0; }
.content_card .article_body > .highslide img{ width:100%; height:auto;
  border-radius:12px; border:1px solid var(--gray-200); }
.content_card .article_body::after{ content:""; display:block; clear:both; }
@media(max-width:680px){
  .content_card .article_body > .highslide{ float:none; width:100%; max-width:100%;
    margin:0 0 16px; }
}

/* ============================================================
   CLIENT-DESIGN FORMS  — registration / application / join forms
   (register, be_lecturer, be_student, courses_forms, council reg,
   wessam reg, etc.). These used plain unstyled Bootstrap inputs;
   restyle to the client design system (white card, navy labels,
   rounded inputs, gold focus ring, navy section headers).
   Scoped to inner_pg so the header login modal is untouched. ===== */
.inner_pg .signup_form_bx,
.inner_pg .joinUs_form_bx{
  background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  box-shadow:0 10px 30px rgba(17,41,63,.06); padding:30px 28px; margin-top:6px; }
/* 3 COLUMNS (client request): 3 input fields per row. FLEXBOX (not grid) so it
   survives Google-Translate wrapper insertion. Each field column = ~1/3 width;
   section headers + the agree/submit rows span the full width.
   Selector uses descendant (not >) so Translate <font> wrappers don't break it. */
.inner_pg .signup_form_bx .row,
.inner_pg .joinUs_form_bx .row{
  display:flex !important; flex-wrap:wrap; gap:14px 18px; align-items:flex-start;
  margin:0 !important; }
/* FIELD columns (they carry col-md-2/3/4/5/6) -> ~1/3 width = 3 per row.
   align-items:flex-start above keeps every field on the SAME line even when one
   has helper text (e.g. e-mail "junk mail" note) or a 2-line label. */
.inner_pg .signup_form_bx .row [class*="col-md-"],
.inner_pg .joinUs_form_bx .row [class*="col-md-"]{
  flex:0 0 calc(33.333% - 12px) !important; max-width:calc(33.333% - 12px) !important;
  width:auto !important; padding:0 !important; margin:0 !important;
  display:flex; flex-direction:column; }
/* label sits at a fixed height so inputs line up across the row */
.inner_pg .signup_form_bx .row [class*="col-md-"] > label,
.inner_pg .joinUs_form_bx .row [class*="col-md-"] > label{
  min-height:1.4em; display:block; }
/* FULL-WIDTH items: ONLY the bare col-12 rows (section titles, the agree /
   submit row, mrg-tp15) — i.e. col-12 with NO col-md-* -> span the whole row. */
.inner_pg .signup_form_bx .row > .col-12:not([class*="col-md-"]),
.inner_pg .joinUs_form_bx .row > .col-12:not([class*="col-md-"]),
.inner_pg .signup_form_bx .row > .signup_form_bx,
.inner_pg .signup_form_bx .row > .mrg-tp15{
  flex:0 0 100% !important; max-width:100% !important; width:100% !important;
  padding:0 !important; margin:0 !important; }
.inner_pg .signup_form_bx .row [class*="col-"] label{ text-align:start; }
@media(max-width:880px){
  .inner_pg .signup_form_bx .row [class*="col-"],
  .inner_pg .joinUs_form_bx .row [class*="col-"]{
    flex:0 0 calc(50% - 9px) !important; max-width:calc(50% - 9px) !important; } }
@media(max-width:560px){
  .inner_pg .signup_form_bx .row [class*="col-"],
  .inner_pg .joinUs_form_bx .row [class*="col-"]{
    flex:0 0 100% !important; max-width:100% !important; } }
/* section header strip (البيانات الأساسية / روابط التواصل ...) */
.inner_pg .signup_form_bx .title_txt,
.inner_pg .joinUs_form_bx .title_txt,
.inner_pg .joinUs_bx .signup_form_bx .title_txt{
  display:flex; align-items:center; gap:10px;
  color:var(--navy-800); font-size:1.05rem; font-weight:800;
  margin:18px 0 14px; padding-bottom:10px;
  border-bottom:1px solid var(--gray-200); }
.inner_pg .signup_form_bx .title_txt i,
.inner_pg .joinUs_form_bx .title_txt i{ color:var(--gold-600); }
.inner_pg .signup_form_bx .title_txt:first-child,
.inner_pg .joinUs_form_bx .title_txt:first-child{ margin-top:0; }
/* labels */
.inner_pg .signup_form_bx label,
.inner_pg .joinUs_form_bx label,
.inner_pg .joinUs_bx label{
  display:block; color:var(--navy-800); font-weight:600;
  font-size:.92rem; margin:0 0 6px; }
/* text / select / file inputs */
.inner_pg .signup_form_bx .form-control,
.inner_pg .signup_form_bx .form-select,
.inner_pg .signup_form_bx select,
.inner_pg .joinUs_form_bx .form-control,
.inner_pg .joinUs_form_bx .form-select,
.inner_pg .joinUs_form_bx select,
.inner_pg .joinUs_bx .form-control{
  width:100% !important; box-sizing:border-box; padding:11px 14px !important; border:1px solid var(--gray-200);
  border-radius:10px; background:#fff; color:var(--navy-900);
  font-size:.95rem; font-family:inherit; margin-bottom:14px;
  transition:border-color .2s ease, box-shadow .2s ease; }
.inner_pg .signup_form_bx .form-control:focus,
.inner_pg .signup_form_bx .form-select:focus,
.inner_pg .signup_form_bx select:focus,
.inner_pg .joinUs_form_bx .form-control:focus,
.inner_pg .joinUs_form_bx .form-select:focus,
.inner_pg .joinUs_form_bx select:focus{
  outline:none; border-color:var(--gold-500);
  box-shadow:0 0 0 3px rgba(201,162,75,.18); }
/* file upload fields read as soft buttons */
.inner_pg .signup_form_bx input[type=file],
.inner_pg .joinUs_form_bx input[type=file]{
  width:100%; padding:9px 12px; border:1px dashed var(--gray-300,#cbd2dc);
  border-radius:10px; background:var(--cream-50); margin-bottom:14px;
  font-size:.9rem; color:var(--gray-700); cursor:pointer; }
.inner_pg .signup_form_bx input[type=file]::file-selector-button,
.inner_pg .joinUs_form_bx input[type=file]::file-selector-button{
  border:0; background:var(--navy-800); color:#fff; font-weight:600;
  padding:7px 14px; border-radius:8px; margin-inline-end:12px; cursor:pointer; }
/* agree checkbox row */
.inner_pg .form-check{ display:flex; align-items:center; gap:8px; margin:8px 0 16px; }
.inner_pg .form-check .form-check-input{ width:18px; height:18px; accent-color:var(--gold-600); }
/* submit row */
.inner_pg .btn_bx{ margin-top:10px; }
.inner_pg .btn_bx.btn_flxend{ display:flex; justify-content:flex-start; }
.inner_pg .joinUs_bx > article p{ color:var(--gray-700); line-height:1.95; }

/* ============================================================
   CLIENT-DESIGN CONTENT IMAGES + CAPTIONS  (image style + description)
   Centered content images (news-image), magazine/report covers,
   and their captions, in the client card style. ============ */
.inner_pg .news-image{ text-align:center; margin:0 0 16px; }
.inner_pg .news-image img,
.inner_pg img.thumImg_def{
  max-width:100%; height:auto; border-radius:14px;
  border:1px solid var(--gray-200); box-shadow:0 8px 24px rgba(17,41,63,.08); }
.inner_pg .news-image figcaption,
.inner_pg figure figcaption.cap,
.inner_pg .img_caption{
  color:var(--gray-500); font-size:.85rem; margin-top:8px; text-align:center; }

/* ============================================================
   LIVE-SITE CONTENT SIDEBAR in CLIENT style (inc_live_aside.php):
   featured-program cards + latest-news items + CTA. Layout mirrors the
   live site (asideCourses_bx / asideNews_bx); visuals = client navy/gold. */
.asideLive_bx{ display:flex; flex-direction:column; }
.asideLive_bx .aside_head{
  background:var(--navy-800); color:#fff; padding:13px 16px; font-weight:700;
  display:flex; align-items:center; gap:8px; border-radius:12px 12px 0 0;
  border-bottom:3px solid var(--gold-500); margin-top:18px; }
.asideLive_bx .aside_head:first-child{ margin-top:0; }
.asideLive_bx .aside_head i{ color:var(--gold-400); }
/* featured program cards */
.asideLive_bx .asideCourses_bx{
  display:block; text-decoration:none; background:#fff;
  border:1px solid var(--gray-200); border-top:0; overflow:hidden; }
.asideLive_bx .asideCourses_bx:last-of-type{ border-radius:0 0 12px 12px; }
.asideLive_bx .asideCourses_bx img{
  width:100%; height:130px; object-fit:cover; display:block; }
.asideLive_bx .asideCourses_bx h4{
  color:var(--navy-800); font-size:.92rem; font-weight:700; line-height:1.5;
  padding:10px 12px; margin:0; transition:.2s; }
.asideLive_bx .asideCourses_bx:hover h4{ color:var(--gold-600); }
/* latest-news items: thumbnail + date badge + title */
.asideLive_bx .asideNews_item{
  display:flex; gap:10px; align-items:center; text-decoration:none;
  background:#fff; border:1px solid var(--gray-200); border-top:0; padding:10px; }
.asideLive_bx .asideNews_item:last-of-type{ border-radius:0 0 12px 12px; }
.asideLive_bx .asideNews_item .thumb{ position:relative; flex:0 0 74px; }
.asideLive_bx .asideNews_item .thumb img{
  width:74px; height:60px; object-fit:cover; border-radius:8px; display:block; }
.asideLive_bx .asideNews_item .thumb .d{
  position:absolute; bottom:-6px; inset-inline-start:-6px;
  background:var(--gold-500); color:var(--navy-900); border-radius:8px;
  padding:2px 6px; text-align:center; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.asideLive_bx .asideNews_item .thumb .d b{ font-size:.85rem; display:block; }
.asideLive_bx .asideNews_item .thumb .d i{ font-size:.6rem; font-style:normal; }
.asideLive_bx .asideNews_item .t{
  color:var(--navy-800); font-size:.85rem; font-weight:600; line-height:1.55;
  transition:.2s; }
.asideLive_bx .asideNews_item:hover .t{ color:var(--gold-600); }
.asideLive_bx .aside_promo{ margin-top:18px; }

/* GLOBAL: all select form fields use padding 4px 14px (client request) */
.inner_pg select,
.inner_pg .form-select{ padding:4px 14px !important; }

/* wessam showpage: "Register now" (?do=reg) button -> margin-top 15px */
.partners_pg .main_col .row .flx_end > a[href*="do=reg"],
.partners_pg .main_col a.btn_th2[href*="do=reg"]{ margin-top:15px; }

/* majalaa Current issue (do=""): the single issue card rendered HALF width with
   an empty right side -> center the card and give it a sensible fixed width.
   The card wrapper is a bare .col-md-4 holding a navy-bordered .col-md-12. */
.inner_pg.pannel_pg .main_col .col-md-4:has(> .row > .col-md-12[style*="border-radius: 25px"]){
  width:100% !important; max-width:360px; margin:18px auto 0 !important; float:none !important; }
.inner_pg.pannel_pg .col-md-12[style*="border-radius: 25px"]{
  width:100% !important; }

/* =====================================================================
   LTR LAYER — applied ONLY when the chosen language is NOT Arabic.
   The site is authored RTL; setting <html dir="ltr"> auto-flips most of
   the flexbox/grid/logical-property layout. This layer fixes the few
   places that use HARD physical directions (float, text-align:right,
   left-pointing carets, breadcrumb separators) so non-Arabic languages
   read naturally left-to-right.
   IMPORTANT: this changes DIRECTION only — colours, cards, fonts,
   spacing and the whole visual style stay 100% identical to the RTL site.
   Fully responsive: inherits every existing @media breakpoint because it
   only overrides directional properties, not sizes/layout.
   ===================================================================== */
html[dir="ltr"]{ }

/* --- global text flows left for Latin/Cyrillic/CJK languages --- */
html[dir="ltr"] body{ text-align:left; }

/* --- hard text-align:right spots -> left --- */
html[dir="ltr"] .dyn_card .dyn_sublist,
html[dir="ltr"] .mainCourses_pg .coursess_list figure figcaption,
html[dir="ltr"] .content_card .article_body p,
html[dir="ltr"] .content_card .article_body{ text-align:left; }

/* --- article floated figure flips to the left (rule already present above
   for .highslide; cover generic floated media too) --- */
html[dir="ltr"] .content_card .article_body img[style*="float: right"],
html[dir="ltr"] .content_card .article_body img[align="right"]{
  float:left !important; margin:0 22px 16px 0 !important; }

/* --- nav carets point the OTHER way in LTR (fa-angle-left -> visually right) --- */
html[dir="ltr"] .main-nav .caret,
html[dir="ltr"] .main-nav .sub > li > a .caret{ transform:scaleX(-1); }

/* --- "read more" arrows (fa-long-arrow-alt-left) point right in LTR --- */
html[dir="ltr"] .title_bx .more i,
html[dir="ltr"] .btn-x i.fa-long-arrow-alt-left,
html[dir="ltr"] .more i.fa-long-arrow-alt-left{ transform:scaleX(-1); }

/* --- breadcrumb: separator + flow read left-to-right --- */
html[dir="ltr"] .breadcrumb{ flex-direction:row; }
html[dir="ltr"] .breadcrumb-item+.breadcrumb-item{ padding-left:.5rem; padding-right:0; }
html[dir="ltr"] .breadcrumb-item+.breadcrumb-item::before{
  float:left; padding-right:.5rem; padding-left:0; }

/* --- desktop dropdown menus open aligned to their item's left edge --- */
@media(min-width:993px){
  html[dir="ltr"] .main-nav .drop{ left:0; right:auto; }
  html[dir="ltr"] .main-nav .sub{ left:100%; right:auto; }
}

/* --- TEXT ALIGNMENT: identical to the Arabic design. ---
   We do NOT force text-align in LTR. The site is authored with the design's
   natural alignment (mostly text-align:start / center); setting dir="ltr"
   flips `start` automatically, so every block reads the SAME way it does in
   Arabic — centered designs stay centered, start-aligned copy mirrors
   naturally. (No html[dir="ltr"] text-align overrides on purpose.) */

/* ---------------------------------------------------------------
   RESPONSIVE PARITY for LTR across S/M/L mobile, tablet, laptop, 4K.
   These mirror the existing RTL breakpoints so direction stays correct
   at every width without altering sizes.
   --------------------------------------------------------------- */
/* small / medium / large mobile (<=576px): top-bar centers, nav stacks */
@media(max-width:576px){
  html[dir="ltr"] .top_header_bx .right_tools,
  html[dir="ltr"] .top_header_bx .left_tools{ justify-content:center !important; }
  html[dir="ltr"] .main-nav>li>a{ justify-content:space-between; }
}
/* tablet (577–992px): mobile nav drawer flows left */
@media(min-width:577px) and (max-width:992px){
  html[dir="ltr"] .main-nav .drop,
  html[dir="ltr"] .main-nav .sub{ left:0; right:auto; }
}
/* laptop / desktop (993–1599px): handled by the min-width:993px block above */
/* large desktop & 4K (>=1600px / 2560px): container stays centered;
   nothing physical to flip beyond the rules already applied. */
@media(min-width:1600px){
  html[dir="ltr"] .container{ margin-left:auto; margin-right:auto; }
}

/* =====================================================================
   UI POLISH FIXES (client feedback)
   1) hero "Get to know us" button bottom spacing
   2) clean & beautiful quick-action button group on mobile
   3) header logo / hamburger tight spacing -> 5px 0
   4) faculty filter tabs + college select on one tidy line
   5) person_card role aligned to a consistent baseline
   ===================================================================== */

/* 1) breathing room under the hero buttons (esp. the 2nd "Get to know us") */
.hero_actions{ margin-bottom:18px !important; }
.hero_actions .hero-about-btn{ margin-bottom:6px; }
@media(max-width:768px){
  .hero_actions{ margin-bottom:22px !important; gap:12px !important; }
  /* stack hero buttons full-width so they read cleanly on phones */
  .hero_actions .btn-x{ width:100%; justify-content:center; }
}

/* 2) quick-action cards: clean, roomy grid on phones (was 6 cramped strips).
   3 across on small tablets, 2 across on phones — tall enough to read. */
@media(max-width:768px){
  .quick_bx .grid,
  .quick_bx .grid.grid6{ grid-template-columns:repeat(3,1fr) !important;
    gap:12px !important; grid-auto-rows:1fr !important; }
  .quick_bx .quick_card{ padding:16px 10px !important; border-radius:14px !important;
    box-shadow:var(--shadow-sm) !important; }
  .quick_bx .quick_card .ic{ width:42px !important; height:42px !important;
    font-size:1.35rem !important; margin:0 auto 8px !important; }
  .quick_bx .quick_card h4{ font-size:.78rem !important; line-height:1.3 !important;
    min-height:auto !important; }
}
@media(max-width:560px){
  .quick_bx .grid,
  .quick_bx .grid.grid6{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .quick_bx .quick_card h4{ font-size:.85rem !important; }
}

/* 3) header logo + hamburger: tighten the vertical gap to 5px top/bottom */
@media(max-width:992px){
  .center_header_bx .container{ padding-block:5px !important; }
  .center_header_bx .logo_bx{ margin:5px 0 !important; }
  .center_header_bx .nav-toggle{ margin:5px 0 !important; }
}

/* 4) faculty filter: keep rank tabs + select on ONE clean line (no stray break);
   wrap gracefully only when there is truly no room. */
.staffFilter_bx{ row-gap:10px; }
.staffFilter_bx .rank_tabs{ flex:1 1 auto; }
.staffFilter_bx .college_sel{ flex:0 0 auto; }
@media(min-width:769px){
  .staffFilter_bx{ flex-wrap:nowrap; }
}

/* 5) person_card: reserve a FIXED name height that fits the tallest name
   (up to 3 lines) and align the name to the TOP, so the "role" line below
   always starts on the SAME baseline across every card in the row. */
.person_card h3{ min-height:3.9em; display:flex; align-items:flex-start;
  justify-content:center; line-height:1.3; margin-bottom:6px; }
.person_card .role{ display:block; margin-top:0; }
/* on narrower cards (3/2/1-up) the same alignment holds */
@media(max-width:992px){ .person_card h3{ min-height:3.9em; } }

/* ============================================================
   BRIDGING / course-info pages (tagesier.php & courses_education.php)
   client: redesign the content area to match the theme. The content
   sits in .coursess_list with a section .head + Word-pasted tables.
   Give it a clean white card, themed headings, and a navy/gold table.
   ============================================================ */
.inner_pg .coursess_list{
  background:#fff; border:1px solid var(--gray-200); border-radius:16px;
  box-shadow:var(--shadow-sm); padding:26px 28px; margin-bottom:24px;
  line-height:1.95; color:var(--navy-900);
}
.inner_pg .coursess_list .head{ margin-bottom:14px; }
.inner_pg .coursess_list .head .title_3a,
.inner_pg .coursess_list h3{
  color:var(--navy-800); font-weight:800; font-size:1.5rem;
  padding-bottom:12px; margin:0 0 16px; position:relative;
}
.inner_pg .coursess_list .head .title_3a::after,
.inner_pg .coursess_list h3::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:64px; height:3px; background:var(--gold-500); border-radius:2px;
}
.inner_pg .coursess_list p{ margin:0 0 14px; }
.inner_pg .coursess_list strong{ color:#c0181f; }

/* Word-pasted condition tables -> clean themed table */
.inner_pg .coursess_list table{
  width:100% !important; border-collapse:collapse !important;
  margin:18px 0 8px; border:1px solid var(--gray-200) !important;
  border-radius:12px; overflow:hidden; font-size:.96rem;
}
.inner_pg .coursess_list table td,
.inner_pg .coursess_list table th{
  border:1px solid var(--gray-200) !important; padding:12px 14px !important;
  vertical-align:middle; color:var(--navy-900);
}
/* first row = header (navy/gold) */
.inner_pg .coursess_list table tr:first-child td,
.inner_pg .coursess_list table tr:first-child th{
  background:linear-gradient(120deg,#11293F,#1F4E78) !important;
  color:#fff !important; font-weight:700; text-align:center;
}
.inner_pg .coursess_list table tr:nth-child(even){ background:var(--cream-50); }
.inner_pg .coursess_list table tr:hover{ background:rgba(210,171,87,.10); }

/* RTL / LTR — the DB table has a hard-coded dir="rtl" + align="right".
   Make it FOLLOW THE PAGE DIRECTION instead: RTL in Arabic, LTR in English.
   Override the inline attributes via CSS (inherit from <html dir>). */
.inner_pg .coursess_list table[dir]{ direction:inherit !important; }
html[dir="ltr"] .inner_pg .coursess_list table{ direction:ltr !important; }
html[dir="rtl"] .inner_pg .coursess_list table{ direction:rtl !important; }
/* align="right"/"left" on cells -> follow text direction (start) */
html[dir="ltr"] .inner_pg .coursess_list table td,
html[dir="ltr"] .inner_pg .coursess_list table th{ text-align:left !important; }
html[dir="rtl"] .inner_pg .coursess_list table td,
html[dir="rtl"] .inner_pg .coursess_list table th{ text-align:right !important; }
/* keep the header row centered regardless of direction */
.inner_pg .coursess_list table tr:first-child td,
.inner_pg .coursess_list table tr:first-child th{ text-align:center !important; }
/* the table's own align="right" must not pin it to one side */
.inner_pg .coursess_list table[align]{ margin-inline:0 !important; }

/* the share-buttons row above the content -> tidy spacing */
.inner_pg .search_bx{ margin-bottom:14px; }

/* bridging default view: title / content / Next each on its OWN full-width row
   (client: "each blue selection has a row inside their area"). Block layout,
   not the 3-column .row grid used for course-card listings. */
/* accreditation cards are NOT links (client) — same look, no pointer/hover-jump */
.accredC_card.no_link{ cursor:default; }

/* magazine / reports cards (show_mag.php): the watch + download buttons were
   overflowing the card. Stack them full-width inside the card body, contained. */
.inner_card .body .flx_bx{
  display:flex; flex-direction:column; gap:8px; width:100%; margin-top:auto;
}
.inner_card .body .flx_bx .btn_th2{
  flex:none !important; width:100% !important; min-width:0 !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; box-sizing:border-box; white-space:nowrap;
}
.inner_card .body > .btn-x.btn-outline{ width:100%; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; }

/* placeholder note on not-yet-filled pages (admin content replaces it) */
.inner_pg .content_card .ph_note{
  text-align:center; padding:30px 18px; color:var(--navy-700);
  font-size:1.08rem; line-height:1.9; background:var(--cream-50);
  border:1px dashed var(--gray-200); border-radius:14px;
}

/* form views (step2 etc.): drop the card frame — no border/shadow/bg
   (client: "remove the border"), keep the form itself. */
.inner_pg .coursess_list.no_card{
  background:transparent !important; border:0 !important;
  box-shadow:none !important; padding:0 !important;
}

.inner_pg .coursess_list .bridge_rows{ display:block; }
.inner_pg .coursess_list .bridge_rows > *{ display:block; width:100%; margin-bottom:18px; }
.inner_pg .coursess_list .bridge_rows > *:last-child{ margin-bottom:0; }
.inner_pg .coursess_list .btn_flxstart{ display:flex; justify-content:flex-start; }

/* "Next" button row sits to the start, with breathing room */
.inner_pg .coursess_list .btn_bx{ margin-top:18px; }
@media(max-width:768px){
  .inner_pg .coursess_list{ padding:18px 16px; }
  .inner_pg .coursess_list table td,
  .inner_pg .coursess_list table th{ padding:8px 9px !important; }
}