/**
 * ThakaaBeyond LTR Overrides (FULL)
 * Applies only when English is active (html[dir="ltr"])
 */

/* ============================================
   GLOBAL
============================================ */
html[dir="ltr"] {
  direction: ltr;
}

html[dir="ltr"] body {
  direction: ltr;
  text-align: left;
}

/* reset common rtl text alignment */
html[dir="ltr"] * {
  text-align: inherit;
}

/* ============================================
   HEADER & NAV
============================================ */
html[dir="ltr"] .topbar-row {
  flex-direction: row; /* normal LTR */
}

html[dir="ltr"] .nav {
  text-align: left;
}

html[dir="ltr"] .hamburger {
  right: auto;
  left: 1rem;
}

html[dir="ltr"] .brand {
  margin-right: 0;
  margin-left: auto;
}

/* ============================================
   FOOTER
============================================ */
html[dir="ltr"] .footer,
html[dir="ltr"] .footer * {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .footer-inner {
  direction: ltr;
}

html[dir="ltr"] .footer-links {
  padding-left: 0;
  padding-right: 0;
}

html[dir="ltr"] .footer-contact li {
  text-align: left;
}

html[dir="ltr"] .footer-icon {
  margin-right: 0;
  margin-left: 0.75rem;
}

/* ============================================
   HERO & GENERAL SECTIONS
============================================ */
html[dir="ltr"] .hero,
html[dir="ltr"] .hero-content,
html[dir="ltr"] .programs-hero,
html[dir="ltr"] .programs-hero-text {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .hero-content {
  margin-left: 0;
  margin-right: auto;
}

/* ============================================
   CARDS & GRIDS
============================================ */
html[dir="ltr"] .card,
html[dir="ltr"] .program-card,
html[dir="ltr"] .news-card,
html[dir="ltr"] .member-card {
  direction: center;
  text-align: center;
}

html[dir="ltr"] .card-content {
  text-align: left;
}

/* ============================================
   FORMS
============================================ */
html[dir="ltr"] .form-group label {
  text-align: left;
}

html[dir="ltr"] .form-group input,
html[dir="ltr"] .form-group textarea {
  text-align: left;
  direction: ltr;
}

/* ============================================
   LISTS
============================================ */
html[dir="ltr"] ul,
html[dir="ltr"] ol {
  padding-right: 0;
  padding-left: 2rem;
}

html[dir="ltr"] .course-details-block ul {
  padding-right: 0;
  padding-left: 20px;
}

html[dir="ltr"] .course-details-block ul li::before {
  right: auto;
  left: 0;
}

/* ============================================
   MODALS
============================================ */
html[dir="ltr"] .episode-modal-content,
html[dir="ltr"] .ai-modal-shell {
  direction: ltr;
  text-align: left;
}

/* ============================================
   WHO WE ARE
============================================ */
html[dir="ltr"] .team-grid {
  direction: ltr;
}

html[dir="ltr"] .member-card {
  text-align: left;
}

/* ============================================
   AI TOOLS LIBRARY
============================================ */
html[dir="ltr"] .filters {
  direction: ltr;
  justify-content: flex-start;
  text-align: left;
}

html[dir="ltr"] .grid .card {
  direction: ltr;
  text-align: left;
}

/* ============================================
   CONTACT PAGE
============================================ */
html[dir="ltr"] .contact-container {
  direction: ltr;
  text-align: left;
}

/* ============================================
   INDEX PAGE FIXES
============================================ */

/* ✅ 1) MBS Quote section: make text truly LTR + left aligned */
html[dir="ltr"] .vision-quote {
  direction: ltr;
}

html[dir="ltr"] .vision-text,
html[dir="ltr"] .vision-text h2,
html[dir="ltr"] .vision-author,
html[dir="ltr"] .vision-author .sidi {
  direction: ltr !important;
  text-align: left !important;
  margin: 0 0 10px 0 !important;
}

/* keep layout (text left, image right), but remove RTL max-width behavior */
html[dir="ltr"] .vision-text {
  max-width: 58%;
}

/* ✅ 2) Latest News section: START LEFT (not centered) */
html[dir="ltr"] .news-section {
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .news-section .section-title,
html[dir="ltr"] .news-section .section-title h2 {
  text-align: center !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}



html[dir="ltr"] .news-card {
  text-align: left;
}

html[dir="ltr"] .news-date {
  margin-left: 0;
  margin-right: auto;
}

/* if your layout uses grid sometimes */
html[dir="ltr"] .news-grid,
html[dir="ltr"] .news-container {
  justify-content: flex-start !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ============================================
   ICON FLIPS (ARROWS)
============================================ */
html[dir="ltr"] .fa-arrow-right::before {
  content: "\f060"; /* fa-arrow-left */
}

html[dir="ltr"] .fa-arrow-left::before {
  content: "\f061"; /* fa-arrow-right */
}

/* ============================================
   IMAGE / DECOR FLIPS (SAFE + CONTROLLED)
   - Only flips what you explicitly mark
============================================ */

/* mirror ONLY elements you mark */
html[dir="ltr"] .flip-on-ltr {
  transform: scaleX(-1);
}

/* swap pinned right/left for absolutely-positioned decorations */
html[dir="ltr"] .pos-rtl-right {
  right: auto !important;
  left: 0 !important;
}

html[dir="ltr"] .pos-rtl-left {
  left: auto !important;
  right: 0 !important;
}

/* background-image sections: swap background position */
html[dir="ltr"] .bg-rtl-right {
  background-position: left center !important;
}

html[dir="ltr"] .bg-rtl-left {
  background-position: right center !important;
}

/* ============================================
   INLINE RTL OVERRIDES
============================================ */
html[dir="ltr"] [style*="text-align:right"],
html[dir="ltr"] [style*="text-align: right"] {
  text-align: left !important;
}


/* =========================================================
   LTR FIXES — Specific sections (Index)
   Works only when English is active (html[dir="ltr"])
========================================================= */

/* ---------- 1) Latest News title centered (and stays centered) ---------- */
html[dir="ltr"] .latest-news-title,
html[dir="ltr"] .news-title,
html[dir="ltr"] .section-title h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If your Latest News wrapper is flex and pushing things weird */
html[dir="ltr"] .latest-news,
html[dir="ltr"] .news-section,
html[dir="ltr"] .latest-news-section {
  direction: ltr;
  text-align: left;
}


/* ---------- 2) "About the Center" section: text aligned LEFT in English ---------- */
html[dir="ltr"] .center-section {
  direction: ltr;
}

html[dir="ltr"] .center-content {
  direction: ltr;
  /* If RTL layout depends on order, flip it in LTR */
  flex-direction: row-reverse; /* logo right, text left (common English layout) */
}

html[dir="ltr"] .center-text {
  text-align: left !important;
}

html[dir="ltr"] .center-text h2,
html[dir="ltr"] .center-text p {
  text-align: left !important;
}

/* Make link arrow look correct in LTR */
html[dir="ltr"] .center-bottom-link {
  direction: ltr;
}
html[dir="ltr"] .center-bottom-link span {
  display: inline-block;
  transform: scaleX(-1); /* flips ↗/arrow feel if you want */
}

/* ---------- 3) Results section: MUST stay centered in Arabic & English ---------- */
html[dir="ltr"] .results-section,
html[dir="ltr"] .results-inner,
html[dir="ltr"] .results-title,
html[dir="ltr"] .results-desc {
  text-align: center !important;
}

html[dir="ltr"] .results-grid {
  direction: ltr;
  justify-content: center !important;
}

/* ---------- 4) Success Partners title centered in English ---------- */
html[dir="ltr"] .affiliated .section-title,
html[dir="ltr"] .affiliated .section-title h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Carousel should flow LTR but still centered container */
html[dir="ltr"] .sponsor-carousel,
html[dir="ltr"] .carousel-container {
  direction: ltr;
}

/* ---------- Extra: flip ONLY specific decorative images when English ---------- */
/* Use this ONLY if an image looks mirrored or "on the wrong side" visually */
html[dir="ltr"] .flip-on-ltr {
  transform: scaleX(-1);
  transform-origin: center;
}
/* =========================================================
   HERO (Index) — make EN paragraph wider (less lines)
========================================================= */

html[dir="ltr"] .hero,
html[dir="ltr"] .hero-content,
html[dir="ltr"] .hero-text,
html[dir="ltr"] .hero-desc,
html[dir="ltr"] .hero p {
  direction: ltr !important;
  text-align: left !important;
}

/* The REAL fix: allow the paragraph container to be wider */
html[dir="ltr"] .hero-content p,
html[dir="ltr"] .hero p {
  max-width: 720px !important;   /* adjust: 680–820 if you want */
  width: min(720px, 70vw) !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  line-height: 1.7 !important;
}
/* =========================================================
   LATEST NEWS — center cards in EN
========================================================= */

html[dir="ltr"] .news-cards,
html[dir="ltr"] .news-grid,
html[dir="ltr"] .latest-news-cards,
html[dir="ltr"] .latest-news-grid {
  direction: ltr !important;
  justify-content: center !important;
  text-align: left; /* text inside card stays left unless you want centered */
}

/* Keep card text left (optional) */
html[dir="ltr"] .news-card,
html[dir="ltr"] .news-card * {
  direction: ltr !important;
  text-align: left !important;
}
/**
 * ThakaaBeyond LTR Overrides (EN mode)
 * Apply ONLY when html[dir="ltr"]
 */

/* =========================
   GLOBAL
========================= */
html[dir="ltr"] body{
  direction: ltr;
}

/* Prevent any accidental mirroring from affecting text */
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] p,
html[dir="ltr"] a,
html[dir="ltr"] span{
  transform: none !important;
}

/* =========================
   HEADER
========================= */
html[dir="ltr"] .topbar-row{
  flex-direction: row-reverse;
}
html[dir="ltr"] .nav{ text-align:left; }
html[dir="ltr"] .hamburger{ right:auto; left:1rem; }
html[dir="ltr"] .brand{ margin-right:auto; margin-left:0; }

/* =========================
   FOOTER
========================= */
html[dir="ltr"] .footer,
html[dir="ltr"] .footer-col,
html[dir="ltr"] .footer-inner{
  direction:ltr;
  text-align:left;
}
html[dir="ltr"] .footer-links{
  padding-left:0;
  padding-right:0;
}
html[dir="ltr"] .footer-icon{
  margin-right:0;
  margin-left:.75rem;
}

/* =========================
   INDEX: HERO
   (fix paragraph to fill space like Arabic)
========================= */
html[dir="ltr"] .hero,
html[dir="ltr"] .hero-content{
  text-align:left;
}
html[dir="ltr"] .hero-content p,
html[dir="ltr"] .hero-desc,
html[dir="ltr"] .hero-subtitle{
  max-width: 720px;   /* widen so it becomes 2 lines not 4 */
  line-height: 1.7;
}

/* =========================
   INDEX: LATEST NEWS (center)
========================= */
html[dir="ltr"] .news-title,
html[dir="ltr"] #latest-news-title,
html[dir="ltr"] .latest-news-title{
  text-align:center !important;
  margin-left:auto;
  margin-right:auto;
}

/* cards container: center them */
html[dir="ltr"] .news-cards,
html[dir="ltr"] .latest-news-grid,
html[dir="ltr"] .news-grid{
  justify-content:center !important;
  align-items:stretch;
}

/* if you are using CSS grid */
html[dir="ltr"] .news-cards{
  justify-items:center;
}

/* =========================
   INDEX: CENTER SECTION (نبذة عن المركز)
   - English: title + paragraph left aligned
========================= */
html[dir="ltr"] .center-section{ direction:ltr; }
html[dir="ltr"] .center-text{
  text-align:left !important;
}
html[dir="ltr"] .center-text h2,
html[dir="ltr"] .center-text p{
  text-align:left !important;
}

/* Keep the link looking normal in LTR */
html[dir="ltr"] .center-bottom-link{
  display:inline-flex;
  gap:.4rem;
  align-items:center;
}
html[dir="ltr"] .center-bottom-link span{
  transform:none !important;
}

/* =========================
   INDEX: RESULTS + PARTNERS (center headings)
========================= */
html[dir="ltr"] .results-title,
html[dir="ltr"] .results-desc,
html[dir="ltr"] .affiliated .section-title h2{
  text-align:center !important;
  margin-left:auto;
  margin-right:auto;
}

/* =========================
   INITIATIVE PROGRAMS PAGE
========================= */

/* Upcoming title + grid centered in EN */
html[dir="ltr"] #upcoming-programs .section-main-heading{
  text-align:center !important;
}
html[dir="ltr"] #upcoming-programs .upcoming-grid{
  justify-items:center; /* grid items centered */
}

/* Previous Programs heading centered (both languages is okay, but EN must be centered) */
html[dir="ltr"] #previous-programs .section-main-heading{
  text-align:center !important;
}

/* Program card content alignment:
   - EN: left
   - AR: stays right because dir=rtl */
html[dir="ltr"] .program-card,
html[dir="ltr"] .program-card-body{
  direction:ltr;
  text-align:left !important;
}
html[dir="ltr"] .program-title,
html[dir="ltr"] .program-text,
html[dir="ltr"] .program-tag{
  text-align:left !important;
}

/* Make program tag look like a real tag (works both languages) */
.program-tag{
  display:inline-flex;
  align-items:center;
  padding:.35rem .75rem;
  border-radius:999px;
  border:1px solid rgba(30,64,175,.18);
  background:rgba(255,255,255,.55);
  backdrop-filter: blur(8px);
  font-size:.85rem;
  font-weight:600;
}

/* Previous Programs responsiveness (both AR & EN) */
@media (max-width: 980px){
  #previous-programs .programs-grid{
    display:flex !important;
    gap: 1rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding: 0 1rem 1rem;
  }
  #previous-programs .program-card{
    min-width: 86vw;
    scroll-snap-align:center;
  }
}

/* =========================
   WEEKLY SECTION (title centered + 1 line feel)
========================= */
html[dir="ltr"] .weekly-section{
  direction:ltr;
}
html[dir="ltr"] .weekly-title{
  text-align:center !important;
  max-width: 1100px;      /* gives it space */
  margin: 0 auto 1rem;
  white-space: normal;    /* allow wrap if needed */
}
html[dir="ltr"] .weekly-subtitle{
  text-align:center !important;
  max-width: 980px;
  margin: 0 auto;
}

/* =========================
   AI+ MAJOR SECTION (center heading)
========================= */
html[dir="ltr"] .ai-major-heading,
html[dir="ltr"] .section-main-heading,
html[dir="ltr"] .section-subtitle{
  text-align:center !important;
  margin-left:auto;
  margin-right:auto;
}

/* Ensure AI+ cards stay centered */
html[dir="ltr"] .ai-segment-grid{
  justify-content:center;
}

/* =========================
   IMAGINE IF (fix mirrored text + layout)
========================= */
html[dir="ltr"] .imagine-hero-section,
html[dir="ltr"] .imagine-cases-section{
  direction:ltr;
}

/* If any container is accidentally mirrored, force reset */
html[dir="ltr"] .imagine-hero-container,
html[dir="ltr"] .imagine-hero-text,
html[dir="ltr"] .imagine-hero-title,
html[dir="ltr"] .imagine-hero-body{
  transform:none !important;
  text-align:center;
}

/* Put the imagine title centered and normal */
html[dir="ltr"] .imagine-hero-title{
  text-align:center !important;
  margin: 0 auto 1rem;
}

/* Body in EN should be left (you asked “in the actual left”) */
html[dir="ltr"] .imagine-hero-body,
html[dir="ltr"] .imagine-scenario-body{
  text-align:left !important;
  max-width: 900px;
  margin-left:auto;
  margin-right:auto;
}

/* Tabs centered */
html[dir="ltr"] .imagine-tabs{
  justify-content:center;
}

/* =========================
   SAFE IMAGE / DECOR FLIPS
   (only images you mark)
========================= */
html[dir="ltr"] .flip-on-ltr{ transform: scaleX(-1); }

/* Background image sections swap position */
html[dir="ltr"] .bg-rtl-right{ background-position:left center !important; }
html[dir="ltr"] .bg-rtl-left{ background-position:right center !important; }
/**
 * ThakaaBeyond LTR Overrides (FULL)
 * Apply ONLY when English is active => html[dir="ltr"]
 */


/* ============================================
   HOME: RESULTS (center in Arabic & English)
   - You asked: title + desc centered ALWAYS
   ============================================ */

.results-section .results-title,
.results-section .results-desc{
  text-align: center !important;
}

.results-section .results-inner{
  text-align: center;
}

/* keep cards content nice in both */
.results-section .results-grid{
  justify-content: center;
}

/* ============================================
   HOME: SUCCESS PARTNERS (center title in EN)
   ============================================ */

html[dir="ltr"] .affiliated .section-title{
  text-align: center;
}

html[dir="ltr"] .affiliated .section-title h2{
  text-align: center;
}

/* ============================================
   PROGRAMS PAGE: HERO
   ============================================ */

html[dir="ltr"] .programs-hero{
  text-align: left;
}

html[dir="ltr"] .programs-hero-content{
  text-align: left;
}

html[dir="ltr"] .programs-hero-title{
  text-align: left;
}

/* Paragraph should fill space (less lines) */
html[dir="ltr"] .programs-hero-text{
  text-align: left;
  max-width: 860px;
  margin-left: 0;
  margin-right: auto;
}

/* ============================================
   PROGRAMS PAGE: UPCOMING (center)
   - You asked: upcoming section in the middle
   ============================================ */

html[dir="ltr"] #upcoming-programs .section-main-heading{
  text-align: center;
}

html[dir="ltr"] #upcoming-programs .upcoming-grid{
  justify-content: center;
}

/* ============================================
   PROGRAMS PAGE: PREVIOUS PROGRAMS
   - You asked:
     1) Tag style should match your pill style (like Medicine)
     2) EN: tag/title/desc aligned left
     3) AR stays right naturally
     4) Responsive in both
   ============================================ */

/* Tag pill (applies for both, but looks consistent) */
.program-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border: 1px solid rgba(39, 90, 177, .25);
  background: rgba(255,255,255,.55);
  box-shadow: 0 10px 26px rgba(20, 60, 140, .10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: fit-content;
  max-width: 100%;
}

/* English alignment inside previous program cards */
html[dir="ltr"] #previous-programs .program-card-body{
  text-align: left;
  direction: ltr;
}

html[dir="ltr"] #previous-programs .program-title,
html[dir="ltr"] #previous-programs .program-text{
  text-align: left;
}

/* Put the tag at the top-left in EN */
html[dir="ltr"] #previous-programs .program-tag{
  margin-left: 0;
  margin-right: auto;
}

/* Better readable text width in EN */
html[dir="ltr"] #previous-programs .program-text{
  max-width: 66ch;
}

/* Responsive: cards should not overflow on smaller screens (both languages) */
@media (max-width: 1100px){
  #previous-programs .programs-grid{
    gap: 18px;
  }
  #previous-programs .program-card{
    width: min(92vw, 760px) !important;
  }
}

@media (max-width: 720px){
  #previous-programs .program-card{
    width: 92vw !important;
  }
  .program-tag{
    font-size: 13px;
    padding: 9px 14px;
  }
}

/* ============================================
   WEEKLY SECTION (center + 1 line feel)
   - You asked: "Your weekly space..." centered and 1 line
   ============================================ */

html[dir="ltr"] .weekly-section{
  direction: ltr;
}

html[dir="ltr"] .weekly-text{
  text-align: center;
}

html[dir="ltr"] .weekly-title{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  /* helps keep it as close to 1 line as possible */
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.15;
}

html[dir="ltr"] .weekly-subtitle{
  text-align: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   AI+ SECTION headings (center)
   - You asked: When AI Opens New Horizons... + subtitle center
   ============================================ */

html[dir="ltr"] .ai-segment-section .section-main-heading,
html[dir="ltr"] .ai-segment-section .section-subtitle{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Also keep AI Major paragraph readable in EN */
html[dir="ltr"] .ai-major-text{
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .ai-major-heading{
  text-align: left;
}

html[dir="ltr"] .ai-major-description{
  text-align: left;
  max-width: 70ch;
}

/* ============================================
   IMAGINE IF (fix reversed " ?...fi enigmaI ")
   Reason: RTL inheritance / bidi issues
   ============================================ */

html[dir="ltr"] .imagine-hero-section,
html[dir="ltr"] .imagine-hero-container,
html[dir="ltr"] .imagine-hero-text{
  direction: ltr;
}

html[dir="ltr"] .imagine-hero-text{
  text-align: center;
}

html[dir="ltr"] .imagine-typed{
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: center;
  transform: none !important; /* if any transform existed */
}

/* "Imagine if" body should be centered and readable */
html[dir="ltr"] .imagine-hero-body{
  direction: ltr;
  text-align: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   LISTS
   ============================================ */

html[dir="ltr"] ul,
html[dir="ltr"] ol{
  padding-right: 0;
  padding-left: 2rem;
}

html[dir="ltr"] .course-details-block ul{
  padding-right: 0;
  padding-left: 20px;
}

html[dir="ltr"] .course-details-block ul li::before{
  right: auto;
  left: 0;
}

/* ============================================
   MODALS & OVERLAYS
   ============================================ */

html[dir="ltr"] .episode-modal-content{
  direction: ltr;
  text-align: left;
}

html[dir="ltr"] .ai-modal-shell{
  direction: ltr;
}

/* ============================================
   AI Tools Library filters (keep LTR)
   ============================================ */

html[dir="ltr"] .filters{
  direction: ltr;
  justify-content: flex-start;
}

html[dir="ltr"] .grid .card{
  direction: ltr;
  text-align: left;
}

/* ============================================
   Contact Page
   ============================================ */

html[dir="ltr"] .contact-container{
  direction: ltr;
  text-align: left;
}

/* ============================================
   ICON & ARROW FLIPS
   ============================================ */

html[dir="ltr"] .fa-arrow-right::before{
  content: "\f060"; /* fa-arrow-left */
}

html[dir="ltr"] .fa-arrow-left::before{
  content: "\f061"; /* fa-arrow-right */
}

/* ============================================
   Utility: kill inline RTL alignments in EN
   ============================================ */

html[dir="ltr"] [style*="text-align:right"]{
  text-align: left !important;
}
html[dir="ltr"] [style*="text-align: right"]{
  text-align: left !important;
}
/* ================================
   Previous Programs – Card Layout
================================ */

/* Card body spacing baseline */
.program-card-body {
  display: flex;
  flex-direction: column;
  gap: 0; /* we will control spacing manually */
}

/* ---------- TAG ---------- */
.program-tag {
  align-self: flex-start; /* works for EN & AR */
  padding: 8px 18px;
  margin-bottom: 18px; /* space before title */

  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2px;

  color: #fff;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  border-radius: 999px;

  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.25);
}

/* RTL fix */
html[dir="rtl"] .program-tag {
  align-self: flex-end;
}

/* ---------- TITLE ---------- */
.program-title {
  margin-bottom: 14px; /* space before description */

  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;

  color: #1e293b;
}

/* ---------- DESCRIPTION ---------- */
.program-text {
  margin-bottom: 26px;

  font-size: 0.95rem;
  line-height: 1.75;
  color: #475569;
  max-width: 95%;
}

/* ---------- STATS SEPARATOR ---------- */
.program-stats-row {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(37, 99, 235, 0.12);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .program-tag {
    margin-bottom: 14px;
    font-size: 0.8rem;
  }

  .program-title {
    font-size: 1.05rem;
  }

  .program-text {
    font-size: 0.9rem;
    max-width: 100%;
  }
}
/* ===== Previous Programs Card Text Layout ===== */

.program-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px; /* global spacing control */
}

/* ===== Program Tag ===== */
.program-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;

  padding: 6px 16px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;

  color: #fff;
  background: linear-gradient(135deg, #2563eb, #38bdf8);

  margin-bottom: 6px; /* space before title */
}

/* ===== Program Title ===== */
.program-title {
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;

  margin-bottom: 4px;
}

/* ===== Program Description ===== */
.program-text {
  font-size: 15px;
  line-height: 1.8;
  color: #475569;

  margin-top: 2px;
}
/* English layout */
html[lang="en"] .program-card-body {
  text-align: left;
}

/* Arabic layout */
html[lang="ar"] .program-card-body {
  text-align: right;
}
.weekly-title {
  text-align: center;
  max-width: 100%;
  margin-inline: auto;

  font-size: 34px; /* reduce if needed */
  line-height: 1.25;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .weekly-title {
    white-space: normal;
    font-size: 26px;
  }
}
.weekly-subtitle {
  text-align: center;
  max-width: 820px;
  margin: 16px auto 0;

  font-size: 15px;
  line-height: 1.9;
  color: #475569;
}
.imagine-hero-container {
  align-items: center;
  gap: 64px;
}

.imagine-hero-text {
  max-width: 520px;
}

.imagine-hero-title {
  margin-bottom: 12px;
}

.imagine-hero-body {
  line-height: 1.9;
  color: #475569;
}
@media (max-width: 1024px) {
  .program-card {
    min-width: 85%;
  }
}

@media (max-width: 768px) {
  .program-card {
    min-width: 92%;
  }

  .program-title {
    font-size: 18px;
  }

  .program-text {
    font-size: 14px;
  }
}

/* Weekly section main title (EN) */
html[dir="ltr"] .weekly-title {
  font-size: 32px;            /* smaller */
  line-height: 1.25;
  max-width: 1000px;          /* control line length */
  margin: 0 auto 2px;
  text-align: center;
  white-space: nowrap;        /* FORCE single line */
}
@media (max-width: 900px) {
  html[dir="ltr"] .weekly-title {
    white-space: normal;
    font-size: 26px;
  }
}


/* Space BEFORE AI major section */
.ai-major-section {
  margin-top: 140px;
}
.weekly-section {
  margin-bottom: 180px;
}

.ai-major-section {
  margin-top: 180px;
}
/* Weekly section heading (EN) */
.weekly-title,
.weekly-heading,
.weekly-main-title {
  font-size: clamp(20px, 2.2vw, 28px); /* smaller but responsive */
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;      /* force one line */
  overflow: hidden;
  text-overflow: ellipsis;  /* safe fallback on small screens */
  margin-top: 200px;         /* 👈 pushes text DOWN */
  margin-bottom: 70px;
}
/* Space AFTER weekly section */
.weekly-section {
  padding-bottom: 80px;
}

/* Space BEFORE next section */
.ai-segment-section,
.ai-major-section {
  margin-top: 150px;
}
.weekly-subtitle,
.weekly-description {
  margin-top: 40px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  line-height: 1.7;
}
@media (max-width: 768px) {
  .weekly-title,
  .weekly-heading,
  .weekly-main-title {
    white-space: normal;
    font-size: 22px;
    margin-top: 32px;
  }
}
/* === FIX TITLE TRUNCATION (English Weekly Section) === */
 /* === MOVE TEXT BLOCK DOWN === */
 /* === FIX TITLE TRUNCATION (English Weekly Section) === */
.imagine-hero-title,
.weekly-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  max-width: 120% !important;
}

.imagine-hero-text,
.weekly-text {
  margin-top: 150px; /* adjust: 40–80px if needed */
}


/* =========================================================
   BEYOND AI – BILINGUAL LAYOUT PATCH (CSS ONLY)
   - Previous Programs: tag gradient + spacing + alignment
   - Latest News: center cards
   - Weekly section: title one-line + smaller + more spacing
   - Episode modal: center titles + headings
========================================================= */

/* ---------- Helpers (logical alignment) ---------- */
:root { --blueA: #1a5cff; --blueB: #00b3ff; }

html[dir="ltr"] body { direction: ltr; }
html[dir="rtl"] body { direction: rtl; }

/* Make text align follow direction automatically */
.program-card,
.program-card * ,
.weekly-section,
.weekly-section * ,
.center-section,
.center-section * ,
.results-section,
.results-section * ,
.affiliated,
.affiliated * {
  text-align: start; /* becomes left in LTR, right in RTL */
}

/* =========================================================
   1) LATEST NEWS – cards centered
   (targets common possible wrappers)
========================================================= */
.latest-news,
.news-section,
#latest-news,
.section-latest-news {
  text-align: center;
}

.latest-news .news-grid,
.latest-news .cards,
.news-section .news-grid,
.news-section .cards,
#latest-news .news-grid,
#latest-news .cards,
.section-latest-news .news-grid,
.section-latest-news .cards {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

/* If your cards container uses a single wrapper */
.latest-news .news-container,
.news-section .news-container,
#latest-news .news-container {
  display: flex;
  justify-content: center;
}

/* =========================================================
   2) CENTER SECTION (نبذة عن المركز) – EN left / AR right
========================================================= */
.center-section .center-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.center-section .center-text { text-align: start; }
.center-section .center-text h2 { margin: 0 0 12px; }
.center-section .center-text p  { margin: 0; }

/* When English (LTR) make sure it stays left-ish */
html[dir="ltr"] .center-section .center-content {
  flex-direction: row; /* text left, logo right */
}
html[dir="rtl"] .center-section .center-content {
  flex-direction: row-reverse; /* text right, logo left */
}

/* =========================================================
   3) RESULTS + SUCCESS PARTNERS titles centered in EN
========================================================= */
.results-title,
.results-desc,
.affiliated .section-title h2 {
  text-align: center;
}

/* =========================================================
   4) PREVIOUS PROGRAMS – tag style + spacing + better layout
========================================================= */

/* Card internal padding spacing */
.program-card .program-card-body{
  padding: 26px 28px;
}

/* TAG (the pill) */
.program-tag{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(90deg, var(--blueA), var(--blueB));
  color: #fff;

  padding: 10px 18px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;

  border: none;
  box-shadow: 0 12px 26px rgba(26,92,255,.18);

  /* spacing below tag */
  margin: 0 0 14px 0;
}

/* Title spacing */
.program-title{
  margin: 0 0 12px 0;
  line-height: 1.25;
}

/* Description spacing */
.program-text{
  margin: 0 0 18px 0;
  line-height: 1.75;
  max-width: 62ch; /* makes English paragraphs nicer */
}

/* Force correct alignment by language direction */
html[dir="ltr"] .program-card .program-card-body { text-align: left; }
html[dir="rtl"] .program-card .program-card-body { text-align: right; }

/* Previous Programs section heading centered */
#previous-programs .section-main-heading,
#previous-programs h2.section-main-heading {
  text-align: center;
}

/* Responsiveness for previous programs cards */
@media (max-width: 980px){
  #previous-programs .programs-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .program-text{ max-width: 100%; }
}

/* =========================================================
   5) UPCOMING section title centered
========================================================= */
#upcoming-programs .section-main-heading,
#upcoming-programs h2.section-main-heading{
  text-align: center;
}

#upcoming-programs .upcoming-grid{
  justify-content: center;
}

/* =========================================================
   6) WEEKLY SECTION – title one line + smaller + more space
========================================================= */

/* Add more spacing after weekly section */
.weekly-section{
  padding-top: 40px;
  padding-bottom: 70px; /* makes space bigger before next section */
  margin-bottom: 60px;  /* extra separation between sections */
}

/* Move content slightly down (like you asked) */
.weekly-section .weekly-content{
  padding-top: 30px;
}

/* Title: smaller and one-line */
.weekly-title{
  text-align: center;
  margin: 0 auto 14px;
  line-height: 1.2;

  /* one line */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* smaller responsive size */
  font-size: clamp(22px, 2.3vw, 34px);
}

/* Subtitle centered */
.weekly-subtitle{
  text-align: center;
  margin: 0 auto;
  max-width: 90ch;
  line-height: 1.9;
}

/* On small screens allow wrapping (so it doesn’t cut badly) */
@media (max-width: 720px){
  .weekly-title{
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

/* =========================================================
   7) AI+ section headings centered (When AI Opens…)
========================================================= */
.ai-major-section .ai-major-container,
.ai-segment-section .section-main-heading,
.ai-segment-section .section-subtitle{
  text-align: center;
}

.ai-segment-section .section-subtitle{
  max-width: 85ch;
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   8) IMAGINE IF title looks weird – force correct direction & centering
========================================================= */
.imagine-hero-title,
.imagine-hero-body{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* If the English appears reversed like "?..fi enigamI" (direction issue) */
html[dir="ltr"] .imagine-typed,
html[dir="ltr"] .imagine-hero-title,
html[dir="ltr"] .imagine-hero-body{
  direction: ltr;
  unicode-bidi: plaintext;
}

/* =========================================================
   9) EPISODE MODAL – center titles + section headings
========================================================= */
.episode-modal-content,
.ai-modal-shell{
  text-align: center;
}

/* Center the big header title/subtitle in modal */
.ai-modal-shell h1,
.ai-modal-shell h2,
.ai-modal-shell .modal-title,
.ai-modal-shell .modal-subtitle{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Center the section headings like Introduction / Key Features */
.ai-modal-shell h3,
.ai-modal-shell .section-title,
.ai-modal-shell .content-title{
  text-align: center;
}

/* Keep paragraph body readable (still centered container, but text can start) */
.ai-modal-shell p,
.ai-modal-shell li{
  text-align: start; /* left in EN, right in AR */
}

/* If you want the whole content box to sit a bit lower inside modal */
.ai-modal-shell{
  padding-top: 22px;
}
.weekly-hero-title{
  font-size: clamp(18px, 2.2vw, 34px);
  white-space: nowrap;
  overflow: visible;         /* IMPORTANT: not hidden */
  text-overflow: clip;       /* IMPORTANT: no ellipsis */
  max-width: 100%;
}
html[lang="en"] .episode-modal-items {
  direction: ltr;
  text-align: left !important;
}
/* ===============================
   Episode Modal – English Content
   Content ONLY (not titles)
================================ */
/* =========================================
   FORCE CONTENT (ONLY) TO LTR + LEFT
   Titles remain centered
========================================= */

/* Paragraph content inside sections */
.episode-modal .section-content p,
.episode-modal .section-content li {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}

/* Ensure bullet lists behave correctly */
.episode-modal .section-content ul {
  direction: ltr;
  text-align: left;
  padding-left: 1.2rem;
  padding-right: 0;
}

/* Fix bullet position */
.episode-modal .section-content li {
  list-style-position: outside;
}

/* OPTIONAL: slightly nicer English spacing */
.episode-modal .section-content p {
  line-height: 1.7;
}
.section-content p,
.section-content li {
  direction: ltr;
  text-align: left;
}
/* FORCE English flow inside modal content */
.episode-modal .section-content {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}
/* Paragraphs */
.episode-modal .section-content p {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
  line-height: 1.7;
}

/* Lists */
.episode-modal .section-content ul {
  direction: ltr !important;
  text-align: left !important;
  padding-left: 1.2rem;
  padding-right: 0;
}

/* List items */
.episode-modal .section-content li {
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
  list-style-position: outside;
}
/* Center logo and title in AI Tools cards */
.ai-tool-card,
.tool-card,
.library-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ai-tool-card h3,
.tool-card h3,
.library-card h3 {
  text-align: center;
  width: 100%;
}
.ai-tool-card p,
.tool-card p,
.library-card p {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
  width: 100%;
}
html[lang="ar"] .ai-tool-card p,
html[lang="ar"] .tool-card p,
html[lang="ar"] .library-card p {
  direction: rtl;
  text-align: right;
}
/* =========================================================
   EPISODE MODAL (AI+)
   - EN: titles centered
   - EN: paragraph + items = LTR + left
========================================================= */

html[dir="ltr"] #episodeModal .ai-tool-header,
html[dir="ltr"] #episodeModal .ai-tool-title,
html[dir="ltr"] #episodeModal .ai-tool-subtitle,
html[dir="ltr"] #episodeModal .ai-section-title{
  text-align: center !important;
  direction: ltr !important;
}

/* Content ONLY (paragraphs + list items) */
html[dir="ltr"] #episodeModal .ai-glass-section p,
html[dir="ltr"] #episodeModal .ai-glass-section li{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
}

/* Lists */
html[dir="ltr"] #episodeModal .ai-glass-section ul{
  direction: ltr !important;
  text-align: left !important;
  padding-left: 1.25rem !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html[dir="ltr"] #episodeModal .ai-glass-section li{
  list-style-position: outside !important;
}

/* Optional: nicer English reading */
html[dir="ltr"] #episodeModal .ai-glass-section p{
  line-height: 1.75 !important;
}
/* =========================================================
   AI TOOLS LIBRARY CARDS
   - Logo + Title centered
   - Description LTR left when EN
========================================================= */

html[dir="ltr"] .grid .card .top-section{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

html[dir="ltr"] .grid .card .tool-logo{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html[dir="ltr"] .grid .card .card__bar{
  text-align: center !important;
}

html[dir="ltr"] .grid .card .card__bar span{
  display: block !important;
  text-align: center !important;
}

/* Description */
html[dir="ltr"] .grid .card .middle-section .description{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
}
/* =========================================================
   AI TOOLS LIBRARY CARDS
   - Logo + Title centered
   - Description LTR left when EN
========================================================= */

html[dir="ltr"] .grid .card .top-section{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

html[dir="ltr"] .grid .card .tool-logo{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html[dir="ltr"] .grid .card .card__bar{
  text-align: center !important;
}

html[dir="ltr"] .grid .card .card__bar span{
  display: block !important;
  text-align: center !important;
}

/* Description */
html[dir="ltr"] .grid .card .middle-section .description{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
}
/* =========================================================
   AI TOOLS LIBRARY CARDS
   - Logo + Title centered
   - Description LTR left when EN
========================================================= */

html[dir="ltr"] .grid .card .top-section{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

html[dir="ltr"] .grid .card .tool-logo{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html[dir="ltr"] .grid .card .card__bar{
  text-align: center !important;
}

html[dir="ltr"] .grid .card .card__bar span{
  display: block !important;
  text-align: center !important;
}

/* Description */
html[dir="ltr"] .grid .card .middle-section .description{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
}

/* =========================================
   Episode Modal (EN)
   - Titles stay centered
   - Content ONLY (p + li) goes LEFT/LTR
========================================= */

/* Keep headings centered (you already want this) */
html[dir="ltr"] .ai-modal-shell .section-header,
html[dir="ltr"] .ai-modal-shell .section-title,
html[dir="ltr"] .ai-modal-shell h2,
html[dir="ltr"] .ai-modal-shell h3{
  text-align: center !important;
}

/* FORCE the content area itself to be LEFT */
html[dir="ltr"] .ai-modal-shell .section-content{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}

/* Paragraphs + list items LEFT */
html[dir="ltr"] .ai-modal-shell .section-content p,
html[dir="ltr"] .ai-modal-shell .section-content li{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: isolate !important;
}

/* Bullets correctly placed */
html[dir="ltr"] .ai-modal-shell .section-content ul{
  direction: ltr !important;
  text-align: left !important;
  padding-left: 1.2rem !important;
  padding-right: 0 !important;
}
/* ===============================
   AI Tools Library – Card Layout
   Center logo + title ONLY
   Keep description left-aligned
================================ */

/* Card container */
.ai-tool-card,
.tool-card,
.library-card {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centers logo + title */
}

/* Logo */
.ai-tool-card img,
.tool-card img,
.library-card img {
  display: block;
  margin: 0 auto 12px;   /* center logo */
}

/* Title */
.ai-tool-card h3,
.tool-card h3,
.library-card h3 {
  text-align: center;    /* center title text */
  width: 100%;
  margin-bottom: 10px;
}

/* Description (FORCE LEFT) */
.ai-tool-card p,
.tool-card p,
.library-card p {
  width: 100%;
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
}
/* =========================================
   AI Tools Library (EN) — Center logo + title
   Keep description LEFT
   Put this at the VERY END of ltr-overrides.css
========================================= */

html[dir="ltr"] .grid .card{
  direction: ltr !important;
}

/* 1) Center the whole "top block" (logo area) */
html[dir="ltr"] .grid .card .top-section{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

html[dir="ltr"] .grid .card .tool-logo{
  display: block !important;
  margin: 0 auto !important;
}

/* 2) Title (your tool name is inside the bottom bar) */
html[dir="ltr"] .grid .card .card__bar,
html[dir="ltr"] .grid .card .card__bar span{
  text-align: center !important;
}

/* 3) Keep ONLY the description left in English */
html[dir="ltr"] .grid .card .middle-section{
  width: 100%;
}

html[dir="ltr"] .grid .card .middle-section .description{
  direction: ltr !important;
  text-align: left !important;
  unicode-bidi: plaintext !important;
}

/* 4) IMPORTANT: prevent card-content from ruining centering */
html[dir="ltr"] .grid .card .card-content{
  text-align: center !important;  /* top stays centered */
}
/* =========================================
   AI Tools Library PAGE HEADER (EN)
   - Center the top logo
   - Center the main title
========================================= */

/* 1) Top page logo section */
html[dir="ltr"] .about-us-intro{
  text-align: center !important;
}

html[dir="ltr"] .about-us-logo{
  display: flex !important;
  justify-content: center !important;
}

html[dir="ltr"] .about-us-logo img{
  display: block !important;
  margin: 0 auto !important;
}

/* 2) Main page title inside the glass container */
html[dir="ltr"] main.wrap h2{
  text-align: center !important;
}

/* 3) Keep the underline line centered too */
html[dir="ltr"] main.wrap .heading-line{
  margin-left: auto !important;
  margin-right: auto !important;
}
/* =========================================================
   WHO WE ARE (EN/LTR) — Center main titles
   Put at the VERY END of ltr-overrides.css
========================================================= */

html[dir="ltr"] .vm-container{ direction: ltr !important; }

/* Mission / Vision titles */
html[dir="ltr"] .vm-title{
  text-align: center !important;
  direction: ltr !important;
}
html[dir="ltr"] .vm-title::after{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Initiative Goals section title */
html[dir="ltr"] .goals-header,
html[dir="ltr"] .goals-header h2{
  text-align: center !important;
  direction: ltr !important;
}

/* Goal card main title (optional but usually needed) */
html[dir="ltr"] .goal-title{
  text-align: center !important;
  direction: ltr !important;
}

/* All main section titles like: "Committee Leaders", "Deputies", etc. */
html[dir="ltr"] .category-title,
html[dir="ltr"] .gratitude-title,
html[dir="ltr"] h1.about-hero-title{
  text-align: center !important;
  direction: ltr !important;
}

html[dir="ltr"] .category-title::after{
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* =========================================================
   WHO WE ARE (EN/LTR) — Center section headings
   Founder & Initiative Leader / Committee Heads / Deputies / Team Leaders
========================================================= */

html[dir="ltr"] .team-category{
  text-align: center !important;
}

html[dir="ltr"] .team-category .category-title{
  display: inline-block !important;  /* keeps underline sizing nice */
  text-align: center !important;
  direction: ltr !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* the underline line under the title */
html[dir="ltr"] .team-category .category-title::after{
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* =========================================================
   CONTACT US PAGE (EN / LTR)
   Center logo + main title
========================================================= */

/* Center the whole header block */
html[dir="ltr"] .contact-header{
  text-align: center !important;
}

/* Center the floating logo */
html[dir="ltr"] .contact-header .contact-icon{
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center the "Contact Us" title */
html[dir="ltr"] .contact-header h1{
  text-align: center !important;
  direction: ltr !important;
}

/* Keep subtitle centered too */
html[dir="ltr"] .contact-header p{
  text-align: center !important;
}
/* make both names work */
.center-bottom-link,
.center-fixed-link{
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  transition: 0.25s ease;
  display: inline-block;
}

.center-bottom-link span,
.center-fixed-link span{
  font-size: 1.05rem;
  margin-right: 4px;
}

.center-bottom-link:hover,
.center-fixed-link:hover{
  color: #0d1a4a;
  transform: translateY(-2px);
}
/* =========================================================
   Center Section — Better Responsive (All languages)
========================================================= */

/* Tablet and down */
@media (max-width: 900px){

  .center-section{
    padding: 60px 0 !important;
  }

  .center-content{
    width: min(92%, 980px) !important;
    gap: 22px !important;
  }

  .center-logo img{
    max-width: 220px !important;
  }

  .center-text h2{
    font-size: 1.55rem !important;
  }

  .center-text p{
    font-size: 1rem !important;
    line-height: 1.95 !important;
  }
}

/* Mobile */
@media (max-width: 600px){

  .center-content{
    flex-direction: column !important;     /* logo top, text bottom */
    align-items: center !important;
    gap: 18px !important;
    width: min(92%, 560px) !important;
  }

  .center-logo{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .center-logo img{
    max-width: 180px !important;
  }

  .center-text{
    width: 100%;
    max-width: 520px;
  }

  .center-text h2{
    font-size: 1.35rem !important;
    text-align: center !important;        /* title centered on mobile */
  }

  .center-text p{
    font-size: 0.95rem !important;
    line-height: 1.9 !important;
    text-align: right;                     /* Arabic default */
  }

  .center-bottom-link,
  .center-fixed-link{
    display: inline-flex !important;
    justify-content: center;
    width: 100%;
    margin-top: 14px !important;
  }
}
/* =========================================================
   Center Section — EN/LTR alignment
========================================================= */

html[dir="ltr"] .center-text{
  direction: ltr !important;
  text-align: left !important;
}

html[dir="ltr"] .center-text h2{
  text-align: left !important;
}

@media (max-width: 600px){
  html[dir="ltr"] .center-text h2{
    text-align: center !important; /* still centered title on mobile */
  }
  html[dir="ltr"] .center-text p{
    text-align: left !important;
  }
}

/* =========================================================
   PREVIOUS PROGRAMS — FIXED horizontal scroll (Responsive)
   Paste at VERY END of your <style>
========================================================= */

#previous-programs .programs-grid{
  display: flex !important;
  gap: 1.6rem !important;

  overflow-x: auto !important;
  overflow-y: visible !important;

  padding: 1rem 1rem 1.4rem !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch;

  /* IMPORTANT: prevent children from shrinking weirdly */
  align-items: stretch !important;
}

#previous-programs .programs-grid::-webkit-scrollbar{
  height: 6px;
}
#previous-programs .programs-grid::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.55);
  border-radius: 999px;
}

/* Each card becomes a horizontal “slide” */
#previous-programs .program-card{
  flex: 0 0 640px !important;          /* desktop width */
  scroll-snap-align: center !important;

  /* allow content to show, no clipping */
  overflow: visible !important;
  height: auto !important;
  min-height: 260px !important;
}

/* Make sure content stacks properly and stats stay visible */
#previous-programs .program-card-body{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

#previous-programs .program-text{
  flex: 1 1 auto !important;
  overflow: visible !important;
  line-height: 2 !important;
}

/* Stats row always visible and wraps nicely */
#previous-programs .program-stats-row{
  margin-top: 1.2rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid rgba(148,163,184,.25) !important;

  display: flex !important;
  flex-wrap: wrap !important;          /* wrap if too many stats */
  justify-content: center !important;
  gap: 0.9rem 1.1rem !important;
}

/* tablet */
@media (max-width: 1199px){
  #previous-programs .program-card{
    flex-basis: 560px !important;
  }
}

/* mobile */
@media (max-width: 767px){
  #previous-programs .programs-grid{
    padding: 0.8rem 1rem 1.2rem !important;
  }

  #previous-programs .program-card{
    flex: 0 0 86vw !important;         /* perfect touch-scroll width */
    min-height: auto !important;
  }

  #previous-programs .program-stat{
    flex: 0 0 48% !important;          /* 2 per row */
    min-width: 140px;
  }
}

/* very small */
@media (max-width: 420px){
  #previous-programs .program-stat{
    flex: 0 0 100% !important;         /* 1 per row */
  }
}
/* =========================================================
   PREVIOUS PROGRAMS — Mobile: horizontal scroll + 3 stats per row
   Targets your real HTML: #previous-programs .programs-grid
========================================================= */
@media (max-width: 768px){

  /* 1) Force the cards row to be horizontal scroll */
  #previous-programs .programs-grid{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;

    gap: 16px !important;
    padding: 0 16px 14px !important;

    scroll-snap-type: x mandatory !important;
  }

  /* each card becomes a “slide” */
  #previous-programs .programs-grid > .program-card{
    flex: 0 0 88vw !important;      /* card width on phone */
    max-width: 88vw !important;
    scroll-snap-align: center !important;
  }

  /* optional: nicer scrollbar */
  #previous-programs .programs-grid::-webkit-scrollbar{
    height: 5px;
  }
  #previous-programs .programs-grid::-webkit-scrollbar-thumb{
    background: rgba(148,163,184,.55);
    border-radius: 999px;
  }

  /* 2) Stats inside card = 3 per row */
  #previous-programs .program-stats-row{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
    align-items: start !important;
    justify-items: center !important;

    margin-top: 1.2rem !important;
    padding-top: 0.9rem !important;
  }

  #previous-programs .program-stat{
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  #previous-programs .program-stat i{
    font-size: 1.05rem !important;
    margin-bottom: 0.25rem !important;
  }

  #previous-programs .program-number{
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

  #previous-programs .program-stat-label{
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    opacity: 0.9;
  }
}