/* =========================================================
   InstaFreight Theme — LTR/RTL Safe
   - Uses logical properties so layout flips automatically
   - Adds [dir="rtl"] overrides only where truly needed
   - Keeps your original tokens & look
   ========================================================= */

/* ---------- Tokens & color system ---------- */
:root{
  --if-primary:   #C62828;   /* brand red */
  --if-accent:    #1565C0;   /* brand blue */
  --if-bg-light:  #ffffff;
  --if-bg-dark:   #121212;
  --if-text-light:#f5f5f5;
  --if-text-dark: #212121;
  --if-muted:     #9e9e9e;
  --if-highlight: #fdd835;

  /* Site-wide theme variables */
  --site-bg:   var(--if-bg-light);
  --site-text: var(--if-text-dark);

  /* Anchor scroll offset for sticky navs */
  --sticky-offset: 84px;

  /* Inline logical helpers */
  --inline-gap-sm: .5rem;
  --inline-gap: .75rem;
  --shadow-1: 0 12px 25px rgba(0,0,0,.1);
}

/* Theme switches */
[data-theme="light"]{
  --site-bg:   var(--if-bg-light);
  --site-text: var(--if-text-dark);
}
[data-theme="dark"]{
  --site-bg:   var(--if-bg-dark);
  --site-text: var(--if-text-light);
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }
body{
  background-color: var(--site-bg);
  color: var(--site-text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transition: background-color .3s ease, color .3s ease;
}

/* Ensure in-page anchors don't hide under sticky nav */
section[id]{ scroll-margin-top: calc(var(--sticky-offset) + 16px); }

/* Utility text align with logical start/end */
.text-start{ text-align:start !important; }
.text-end{ text-align:end !important; }

/* Logical margins/paddings helpers */
.ms-1{ margin-inline-start:.25rem !important; }
.me-1{ margin-inline-end:.25rem !important; }
.ps-3{ padding-inline-start:1rem !important; }
.pe-3{ padding-inline-end:1rem !important; }

/* ---------- Z-index helpers ---------- */
.z-1{ z-index:1 !important; }
.z-2{ z-index:2 !important; }
.z-3{ z-index:3 !important; }

/* ---------- Navbar (sticky + RTL safe) ---------- */
.main-navbar{ transition: top .4s ease-in-out; z-index:1050; position:sticky; inset-block-start:0; }
.main-navbar.navbar-hidden{ inset-block-start:-120px; }

.navbar{ transition: all .3s ease-in-out; }
.navbar.scrolled{ background-color: var(--if-primary) !important; color:#fff; }
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover{
  color: var(--if-primary);
  text-shadow: 0 0 2px var(--if-primary);
}

/* Dark mode toggle (if present) */
#theme-toggle{
  background: var(--if-highlight);
  color:#000;
  border:none;
  border-radius:50px;
  padding:.375rem .625rem;
}

/* Dropdowns (logical positioning) */
.dropdown-menu{
  background-color:#fff;
  color:#212529;
  border-radius:.5rem;
  box-shadow:var(--shadow-1);
  z-index:2000;
  animation: fadeSlideIn .25s ease;
  inset-inline-start:auto; /* let framework place it */
  inset-inline-end:0;      /* default align to logical end */
}
.dropdown-menu .dropdown-item{
  color:#333;
  padding:.625rem 1.25rem;
  font-size:.95rem;
  display:flex; align-items:center; gap:.75rem;
  transition: background .2s, transform .2s;
}
.dropdown-menu .dropdown-item:hover{
  background-color: var(--if-accent);
  color:#fff;
  transform: translateX(5px);
  /* logical “border-left” */
  box-shadow: inset 4px 0 0 0 var(--if-highlight);
  border-radius:0 8px 8px 0;
}
.dropdown-menu .dropdown-item i{
  font-size:1.1rem; min-inline-size:20px; text-align:center;
}

/* ---------- Footer ---------- */
.footer{ background-color:#1e1e1e; color:#fff; }
.footer a{ color: var(--if-muted); transition: color .2s ease; }
.footer a:hover{ color: var(--if-highlight); text-decoration: underline; }

/* ---------- Social icons ---------- */
.social-icons a{ font-size:1.2rem; transition: transform .3s ease; }
.social-icons a:hover{ transform: scale(1.2); color: var(--if-highlight); }

/* ---------- Buttons ---------- */
.btn-primary{
  background-color:#dc3545 !important;
  border-color:#dc3545 !important;
  color:#fff !important;
}
.btn-primary:hover{ background-color:#bb2d3b !important; border-color:#b02a37 !important; }

.btn-danger{
  background-color:#dc3545 !important;
  border-color:#dc3545 !important;
  color:#fff !important;
}
.btn-danger:hover{ background-color:#c82333 !important; border-color:#bd2130 !important; }

/* High-contrast text and buttons on dark blocks */
.bg-dark .lead,
.text-white .lead,
.cta-dark .lead{ color: rgba(255,255,255,.92) !important; }

.bg-dark .text-muted,
.cta-dark .text-muted{ color: rgba(255,255,255,.72) !important; }

.bg-dark .btn-light,
.cta-dark .btn-light{
  background-color:#fff !important;
  border-color:#fff !important;
  color:#111 !important;
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.bg-dark .btn-light:hover,
.cta-dark .btn-light:hover{
  background-color:#f1f5f9 !important;
  border-color:#f1f5f9 !important;
  color:#000 !important;
}

/* ---------- Branding ---------- */
.brand-name{
  font-family:'Poppins', sans-serif;
  font-size:1.3rem;
  text-transform:uppercase;
  letter-spacing:1px;
}
.brand-tagline{
  font-size:1rem; font-weight:500; color:#555; font-style:italic; text-align:center;
  text-shadow:0 1px 2px rgba(0,0,0,.05);
}
.brand-tagline span{ color:#d32f2f; font-weight:600; font-style:normal; }
@keyframes glow{ 0%,100%{text-shadow:0 0 4px rgba(211,47,47,.5)} 50%{text-shadow:0 0 8px rgba(211,47,47,.9)} }
.brand-tagline span:last-child{ animation: glow 2.5s infinite ease-in-out; }

.insta-logo{
  block-size:72px; max-inline-size:100%; margin-block-end:8px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
  transition: transform .3s ease;
}
.insta-logo:hover{ transform: scale(1.06); }

/* ---------- Hero systems ---------- */
.hero{
  min-block-size:100dvh;
  display:grid; place-items:center;
  position:relative; overflow:hidden;
}
.hero--short{ min-block-size:70vh; }

.hero-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  transform: scale(1.02);
  filter: saturate(105%) contrast(102%);
}
.hero-overlay,
.hero-dim{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(21,101,192,.25) 0%, rgba(21,101,192,0) 60%),
    linear-gradient(to bottom, rgba(13,71,161,.78), rgba(13,71,161,.78));
  backdrop-filter: saturate(115%) blur(1px);
}
.hero-content{ position:relative; z-index:2; padding:3rem 1rem; }

.hero-title{
  font-family:'Poppins', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:800; line-height:1.05;
  font-size: clamp(2.4rem, 6vw + 1rem, 5.6rem);
  letter-spacing:.2px;
  text-shadow:0 6px 24px rgba(0,0,0,.35);
  margin:0 auto; max-inline-size:20ch;
}
.hero-subtitle{
  max-inline-size:1100px; margin-inline:auto;
  font-size: clamp(1.05rem, 1.2vw + .8rem, 1.6rem);
  line-height:1.5;
  color: rgba(255,255,255,.94);
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

/* Vision hero specific darker overlay */
.vision-hero{ position:relative; overflow:hidden; min-block-size:70vh; }
.vision-hero .hero-dim{
  background:
    radial-gradient(120% 80% at 50% 60%, rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 60%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.65) 100%);
}
@media (min-width:992px){ .vision-hero{ background-attachment: fixed; } }

/* Gradient highlight for key phrase */
.text-gradient-hero{
  background-image: linear-gradient(90deg, #fdd835, #ff7043 25%, #ff5252 45%, #1565C0 70%, #66bb6a 95%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: heroGradientShift 8s linear infinite;
}
@keyframes heroGradientShift{ 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* Scroll cue button (logical) */
.scroll-cue{
  display:inline-flex; align-items:center; justify-content:center;
  inline-size:44px; block-size:44px; margin-block-start:22px;
  color:#fff; border:1px solid rgba(255,255,255,.35);
  border-radius:999px; text-decoration:none;
  backdrop-filter: blur(2px);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.scroll-cue:hover{ transform: translateY(2px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.55); }
.scroll-cue i{ font-size:1.25rem; animation: cueBounce 2s infinite; }
@keyframes cueBounce{ 0%,100%{transform: translateY(-1px)} 50%{transform: translateY(3px)} }

/* CTA buttons */
.btn-cta{
  background: linear-gradient(135deg, #ff5252, #e53935);
  border:none; color:#fff !important;
  box-shadow:0 10px 24px rgba(229,57,53,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-cta:hover{ transform: translateY(-2px); filter:brightness(1.05); box-shadow:0 14px 28px rgba(229,57,53,.45); }

.btn-ghost{
  background: rgba(255,255,255,.12);
  color:#fff !important;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-ghost:hover{ background: rgba(255,255,255,.18); transform: translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.32); }

/* ---------- Sections / Cards / Tiles ---------- */
.section-title{
  font-weight:800; letter-spacing:.2px; margin:0; display:inline-block; position:relative;
}
.section-title::after{
  content:""; display:block; inline-size:72px; block-size:4px; margin-block-start:10px; border-radius:999px;
  background: linear-gradient(90deg, #1565C0, #C62828);
  box-shadow:0 4px 16px rgba(21,101,192,.35);
}

.card-lift{ transition: transform .25s ease, box-shadow .25s ease; }
.card-lift:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.18); }

.card-glow{ position:relative; overflow:hidden; }
.card-glow::before{
  content:""; position:absolute; inset:-1px;
  background:
    radial-gradient(400px 120px at 20% -10%, rgba(21,101,192,.12), transparent 55%),
    radial-gradient(400px 120px at 80% 110%, rgba(198,40,40,.12), transparent 55%);
  pointer-events:none;
}

.icon-pill{
  inline-size:56px; block-size:56px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(0,0,0,.06); font-size:1.2rem;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.stat-card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:16px; padding:1.75rem; background:#fff;
  box-shadow:0 12px 30px rgba(2,8,20,.06);
}
.stat-value{
  font-weight:800; font-size: clamp(1.6rem, 2.2vw + 1rem, 2.6rem); line-height:1; margin-block-end:.5rem;
}

/* ---------- Media frame ---------- */
.about-page img{ display:block; margin-inline:auto; max-inline-size:100%; block-size:auto; }

.legendary-media{
  max-inline-size:980px; margin-inline:auto;
  border-radius:18px; position:relative; overflow:hidden;
  box-shadow:0 18px 50px rgba(2,8,20,.16);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}
.legendary-media::before{
  content:""; position:absolute; inset:0; padding:2px; border-radius:18px;
  background: linear-gradient(90deg,#1565C0,#C62828);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite: exclude; pointer-events:none;
}
.legendary-media::after{
  content:""; position:absolute; inset:-20% -40%;
  background:
    radial-gradient(40% 20% at 15% 0%, rgba(21,101,192,.12), transparent 65%),
    radial-gradient(40% 20% at 85% 110%, rgba(198,40,40,.12), transparent 65%);
  pointer-events:none; transition: opacity .25s ease, transform .25s ease;
}
.legendary-media:hover{ transform: translateY(-4px); box-shadow:0 22px 60px rgba(2,8,20,.22); }
.legendary-media:hover::before{
  background: linear-gradient(90deg,#1565C0,#C62828,#fdd835 60%,#C62828);
}
.legendary-media img{ inline-size:100%; display:block; }

/* ---------- Register page ---------- */
#register-container{
  background:#fff; padding:2rem; border-radius:16px;
  box-shadow:0 0 20px rgba(0,0,0,.1); margin-block-start:3rem;
}
#register-container h2{ font-weight:700; color:#C62828; }
.profile-image-preview{
  inline-size:100px; block-size:100px; border-radius:50%; object-fit:cover; border:2px solid #ccc;
  display:block; margin:0 auto 10px;
}
.section-title.register{ border-block-end:2px solid #ddd; padding-block-end:.5rem; color:#1565C0; }
input[type="text"], input[type="email"], input[type="password"], select, input[type="file"]{ border-radius:8px; }

/* ---------- Animations ---------- */
@keyframes fadeSlideIn{ from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:translateY(0)} }
.animate-fadein{ animation: fadeInUp 1s ease-in-out both; }
@keyframes fadeInUp{ 0%{opacity:0; transform:translateY(20px)} 100%{opacity:1; transform:translateY(0)} }
.bounce{ animation: bounceY 2s infinite; }
@keyframes bounceY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ---------- Responsive tweaks ---------- */
@media (max-width:768px){
  .navbar-nav .nav-link{ padding:10px; }
  .dropdown-menu{ animation:none; }
  .insta-logo{ block-size:56px; }
  .brand-tagline{ font-size:.9rem; }
  .hero-title{ letter-spacing:0; }
  .hero-subtitle{ line-height:1.45; }
}

/* =========================================================
   Page-specific sections (advisory, ambassador, mentors,
   waitlist, investors) — structural only, untouched visuals.
   NOTE: Converted all size/spacing to logical props.
   ========================================================= */
.advisory-page .advisory-hero,
.ambassador-page .amb-hero,
.mentors-page .mentors-hero,
.waitlist-page .wl-hero,
.investors-page .invest-hero{
  position: relative;
  min-block-size: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  isolation: isolate;
}
.advisory-page .advisory-hero::before,
.ambassador-page .amb-hero::before,
.waitlist-page .wl-hero::before,
.investors-page .invest-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(21,101,192,.28) 0%, rgba(21,101,192,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.65) 85%);
  z-index:0;
}
.advisory-page .advisory-hero .container,
.ambassador-page .amb-hero .container,
.mentors-page .mentors-hero .container,
.waitlist-page .wl-hero .container,
.investors-page .invest-hero .container{
  position: relative; z-index: 1;
  animation: fadeInUp .7s ease-out both;
}
.advisory-page .section-pad,
.ambassador-page .section-pad,
.mentors-page .section-pad,
.waitlist-page .section-pad,
.investors-page .section-pad{ padding-block: 72px; }

.advisory-page .section-muted,
.ambassador-page .section-muted,
.mentors-page .section-muted,
.waitlist-page .section-muted,
.investors-page .section-muted{
  background:
    radial-gradient(700px 120px at 15% -40%, rgba(21,101,192,.07), transparent 60%),
    radial-gradient(700px 120px at 85% 140%, rgba(198,40,40,.07), transparent 60%),
    var(--if-bg-light);
}

.advisory-page .feature-card,
.ambassador-page .feature-card,
.mentors-page .feature-card,
.investors-page .feature-card{
  position:relative;
  background:#fff; border-radius:16px;
  padding:1.75rem;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 12px 30px rgba(2,8,20,.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.advisory-page .feature-card:hover,
.ambassador-page .feature-card:hover,
.mentors-page .feature-card:hover,
.investors-page .feature-card:hover{
  transform: translateY(-6px);
  box-shadow:0 18px 44px rgba(2,8,20,.14);
  border-color: rgba(21,101,192,.24);
}
.advisory-page .feature-icon,
.ambassador-page .feature-icon,
.investors-page .icon-circle{
  inline-size:56px; block-size:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(21,101,192,.08); color: var(--if-accent);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  margin-block-end:.75rem; font-size:1.25rem;
}

.mentors-page .network-img,
.waitlist-page .wl-img,
.investors-page .invest-img{
  display:block; margin-inline:auto; max-inline-size:100%; block-size:auto;
  box-shadow:0 14px 40px rgba(2,8,20,.08);
  border-radius:14px;
}

/* Forms (advisory / ambassador / mentors / waitlist) */
.advisory-page .advisor-form,
.ambassador-page .amb-form,
.mentors-page .mentor-form,
.waitlist-page .wl-card{
  background:#fff; border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 14px 40px rgba(2,8,20,.08);
  padding:2rem;
}
.advisory-page .advisor-form .form-label,
.ambassador-page .amb-form .form-label,
.mentors-page .mentor-form .form-label,
.waitlist-page .wl-card .form-label{
  font-weight:600; color:#374151; margin-block-end:.35rem;
}
.advisory-page .advisor-form .form-control,
.ambassador-page .amb-form .form-control,
.mentors-page .mentor-form .form-control,
.waitlist-page .wl-card .form-control,
.waitlist-page .wl-card .form-select{
  border-radius:12px;
  border:1px solid #e5e7eb;
  background:#fff;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.advisory-page .advisor-form .form-control:focus,
.ambassador-page .amb-form .form-control:focus,
.mentors-page .mentor-form .form-control:focus,
.waitlist-page .wl-card .form-control:focus,
.waitlist-page .wl-card .form-select:focus{
  border-color: color-mix(in srgb, var(--if-accent) 60%, #e5e7eb);
  box-shadow:0 0 0 .25rem color-mix(in srgb, var(--if-accent) 20%, transparent);
}

/* CTA buttons in forms */
.advisory-page .advisor-form .btn-apply,
.ambassador-page .amb-form .btn-apply,
.mentors-page .mentor-form .btn-submit,
.waitlist-page .wl-card .btn-apply{
  border:none; color:#fff !important; border-radius:999px;
  padding:.75rem 2rem; font-weight:700;
  background: linear-gradient(135deg, #ff5252, #e53935);
  box-shadow:0 12px 28px rgba(229,57,53,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.waitlist-page .wl-card .btn-apply{
  color:#111 !important; background: linear-gradient(135deg, #ffb300, #ff9800);
  box-shadow:0 12px 26px rgba(255,152,0,.35);
}
.advisory-page .advisor-form .btn-apply:hover,
.ambassador-page .amb-form .btn-apply:hover,
.mentors-page .mentor-form .btn-submit:hover,
.waitlist-page .wl-card .btn-apply:hover{
  transform: translateY(-2px); filter: brightness(1.05);
}

/* CTA overlay sections */
.ambassador-page .amb-cta,
.mentors-page .mentors-cta,
.waitlist-page .wl-cta{
  position:relative; color:#fff; text-align:center;
}
.ambassador-page .amb-cta::before,
.mentors-page .mentors-cta::before,
.waitlist-page .wl-cta::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(198,40,40,.22) 0%, rgba(198,40,40,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
}
.ambassador-page .amb-cta > .container,
.mentors-page .mentors-cta > .container,
.waitlist-page .wl-cta > .container{
  position:relative; z-index:1; border-radius:18px; backdrop-filter: blur(2px) saturate(115%);
}

/* Investors “Why Now” gradient band */
.investors-page .why-now{
  position:relative; color:#fff;
  background: linear-gradient(120deg, #003973 0%, #E5E5BE 100%);
}
.investors-page .why-now .why-card{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
  border-radius:16px; padding:1.25rem;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}

/* ---------- Dark theme adjustments ---------- */
[data-theme="dark"] .feature-card{ background:#0f172a; border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .feature-card .text-muted{ color: rgba(255,255,255,.72) !important; }
[data-theme="dark"] .advisor-form,
[data-theme="dark"] .amb-form,
[data-theme="dark"] .mentor-form,
[data-theme="dark"] .wl-card{
  background:#0b1220; border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .form-label{ color:#e5e7eb; }
[data-theme="dark"] .form-control{
  background:#0f172a; color:#e5e7eb; border-color:#1f2937;
}
[data-theme="dark"] .form-control:focus{
  border-color: color-mix(in srgb, var(--if-accent) 55%, #1f2937);
  box-shadow:0 0 0 .25rem color-mix(in srgb, var(--if-accent) 25%, transparent);
}

/* ---------- Motion respect ---------- */
@media (prefers-reduced-motion: reduce){
  .advisory-hero .container,
  .amb-hero .container,
  .mentors-hero .container,
  .wl-hero .container,
  .invest-hero .container,
  .feature-card,
  .advisor-form, .amb-form, .mentor-form, .wl-card,
  .btn-apply, .btn-submit{
    animation:none !important; transition:none !important;
  }
}

/* ---------- Responsive heights ---------- */
@media (max-width: 992px){
  .advisory-page .advisory-hero,
  .ambassador-page .amb-hero,
  .mentors-page .mentors-hero,
  .waitlist-page .wl-hero,
  .investors-page .invest-hero{ min-block-size:64-68vh; }
}

/* =========================================================
   LEGENDARY LANGUAGE SWITCHER (scoped to navbar) — RTL safe
   ========================================================= */
.main-navbar .lang-dd{
  --lang-bg: #ffffff;
  --lang-fg: #111827;
  --lang-bd: #e5e7eb;
  --lang-chip: #f8fafc;
  --lang-shadow: 0 18px 48px rgba(2,6,23,.18);
}
[data-theme="dark"] .main-navbar .lang-dd{
  --lang-bg: #0f1628;
  --lang-fg: #e5e7eb;
  --lang-bd: #1f2937;
  --lang-chip: #0b1220;
  --lang-shadow: 0 22px 60px rgba(0,0,0,.55);
}

/* Toggle */
.main-navbar .lang-dd .lang-toggle{
  display:inline-flex; align-items:center; gap:var(--inline-gap-sm);
  border:1px solid var(--lang-bd);
  background:var(--lang-bg); color:var(--lang-fg);
  border-radius:12px; padding:.35rem .55rem; font-weight:800;
  box-shadow:0 2px 10px rgba(2,6,23,.08);
  text-decoration:none;
}
.main-navbar .lang-dd .lang-toggle .lang-code{
  font-size:.72rem; letter-spacing:.04em;
  border:1px solid var(--lang-bd);
  background:var(--lang-chip); color:#6b7280;
  border-radius:999px; padding:.05rem .4rem;
}

/* Menu container */
.main-navbar .lang-dd .lang-menu{
  inline-size:min(420px,92vw);
  border:1px solid var(--lang-bd);
  border-radius:14px; overflow:hidden;
  box-shadow:var(--lang-shadow);
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
  inset-inline-start:auto; inset-inline-end:0;
}
[data-theme="dark"] .main-navbar .lang-dd .lang-menu{
  background:linear-gradient(180deg, rgba(15,22,40,.92), rgba(15,22,40,.86));
}

/* Head + search */
.main-navbar .lang-dd .lang-head{
  position:sticky; inset-block-start:0; background:inherit; z-index:1;
  padding:.65rem; border-block-end:1px solid var(--lang-bd);
}
.main-navbar .lang-dd .input-wrap{ position:relative }
.main-navbar .lang-dd .input-wrap i{
  position:absolute; inset-inline-start:.6rem; inset-block-start:50%; transform:translateY(-50%); opacity:.6
}
.main-navbar .lang-dd #langSearch{
  inline-size:100%; block-size:40px; padding:.45rem .7rem .45rem 2.1rem;
  border:1px solid var(--lang-bd); border-radius:10px;
  background:var(--lang-bg); color:var(--lang-fg);
}

/* List */
.main-navbar .lang-dd .lang-list{ max-block-size:56vh; overflow:auto; padding:.35rem }
.main-navbar .lang-dd .lang-item{
  inline-size:100%; display:flex; align-items:center; gap:.6rem;
  border:0; background:transparent; text-align:start;
  padding:.55rem .5rem; border-radius:10px; cursor:pointer; color:var(--lang-fg);
}
.main-navbar .lang-dd .lang-item:hover,
.main-navbar .lang-dd .lang-item.is-active{ background: rgba(37,99,235,.10); }
.main-navbar .lang-dd .lang-item.is-current{ box-shadow: inset 0 0 0 1px rgba(37,99,235,.28); }

.main-navbar .lang-dd .lang-item .badge.code{
  font-weight:800; font-size:.78rem; letter-spacing:.04em;
  border:1px solid var(--lang-bd);
  background:var(--lang-chip); color:#374151;
  border-radius:999px; padding:.2rem .45rem;
}
.main-navbar .lang-dd .lang-item .names{ display:flex; gap:.35rem; align-items:baseline }
.main-navbar .lang-dd .lang-item .names .name{ font-weight:700 }
.main-navbar .lang-dd .lang-item .names .native{ color:#6b7280 }
.main-navbar .lang-dd .lang-item .meta{ margin-inline-start:auto; display:flex; gap:.35rem }
.main-navbar .lang-dd .lang-item .meta .chip{
  border:1px solid var(--lang-bd); border-radius:999px; padding:.05rem .45rem;
  font-size:.72rem; color:#6b7280; background:var(--lang-chip)
}

/* Footer */
.main-navbar .lang-dd .lang-foot{
  border-block-start:1px solid var(--lang-bd); padding:.5rem .7rem; background:inherit
}

/* Keep generic dropdown styles from touching this menu */
.main-navbar .lang-dd .dropdown-menu{ animation:none; }
.main-navbar .lang-dd .dropdown-menu .dropdown-item{ transform:none; box-shadow:none; border-radius:10px; }

/* ---------- RTL overrides (only where necessary) ---------- */
[dir="rtl"] .navbar-nav .nav-link{ text-align:end; }
[dir="rtl"] .dropdown-menu{ inset-inline-start:0; inset-inline-end:auto; } /* open to left visually */
[dir="rtl"] .dropdown-menu .dropdown-item:hover{
  /* mirror the decorative border to the other side */
  box-shadow: inset -4px 0 0 0 var(--if-highlight);
  border-radius:8px 0 0 8px;
}
[dir="rtl"] .main-navbar .lang-dd .input-wrap i{ inset-inline-start:auto; inset-inline-end:.6rem; }
[dir="rtl"] .main-navbar .lang-dd #langSearch{ padding-inline-start:.7rem; padding-inline-end:2.1rem; }
[dir="rtl"] .main-navbar .lang-dd .lang-item{ text-align:end; flex-direction: row-reverse; }
[dir="rtl"] .main-navbar .lang-dd .lang-item .meta{ margin-inline-end:auto; margin-inline-start:0; }
[dir="rtl"] .scroll-cue i{ transform: scaleX(-1); } /* subtle: arrow feels correct */
[dir="rtl"] .section-title::after{ margin-inline:auto; } /* keep center underline */
[dir="rtl"] .hero-title,
[dir="rtl"] .hero-subtitle{ text-align:center; }

/* ---------- Images in step/diagram sections ---------- */
.ambassador-page .steps-wrap img{ display:block; margin-inline:auto; max-inline-size:100%; }

/* ---------- Dark menu z-index protect over hero ---------- */
.main-navbar .dropdown-menu{ z-index: 2060; }
/* =========================================================
   RTL fixes — Founder card + Timeline
   Place AFTER your main theme CSS
   ========================================================= */

/* ---------- Founder card ---------- */
.founder-card{
  position: relative;
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(2,8,20,.06);
  overflow:hidden;
}

/* the colored strip on top */
.founder-topbar{
  block-size:120px;
  background:
    linear-gradient(90deg, #ffb74d, #66bb6a 25%, #42a5f5 55%, #ab47bc 85%);
  border-start-start-radius:16px; /* logical corners */
  border-start-end-radius:16px;
}

/* avatar — logical centering so it works in RTL/LTR */
.founder-avatar{
  position:absolute;
  inset-block-start:60px;
  inset-inline-start:50%;
  transform:translate(-50%, -50%);
  inline-size:132px; block-size:132px;
  border-radius:50%;
  border:6px solid #fff;
  box-shadow:0 10px 32px rgba(2,8,20,.18);
  background:#fff;
  object-fit:cover;
}

/* body spacing after the overlapping avatar */
.founder-card .card-body{ padding-block-start:4.25rem; }

/* chips & text are RTL-safe with logical alignment */
.role-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .6rem;
  background:#f3f4f6; color:#111; border-radius:999px; font-weight:700; font-size:.85rem;
}

.founder-bio,
.founder-quote{
  line-height:1.6;
  word-break:break-word;
  hyphens:auto;
  text-align:center;   /* keep centered in both directions */
}

/* small polish so Arabic quotes don’t collide visually */
.founder-quote{ font-style:italic; opacity:.95; }

/* When the page is LTR, keep everything identical */
[dir="ltr"] .founder-card .card-body{ text-align:center; }

/* ---------- Timeline ---------- */
.timeline{
  position:relative;
  display:grid;
  gap:.6rem;
  padding-inline:0;        /* reset */
  margin:0;
}

/* each item gets a logical start pad for the bullet/dot */
.tl-item{
  position:relative;
  padding-block:.55rem;
  padding-inline-start:2.2rem; /* room for dot */
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  background:#fff;
  box-shadow:0 10px 24px rgba(2,8,20,.05);
  line-height:1.55;
}

/* decorative dot (works in RTL/LTR) */
.tl-item::before{
  content:"";
  position:absolute;
  inset-block-start:50%;
  inset-inline-start:.8rem;   /* logical start */
  transform:translateY(-50%);
  inline-size:.55rem; block-size:.55rem;
  border-radius:50%;
  background:linear-gradient(135deg, #1565C0, #C62828);
  box-shadow:0 0 0 3px rgba(21,101,192,.12);
}

/* “soft-muted” tint you’re using */
.tl-item.soft-muted{ background: #fafafa; }

/* In RTL, flip only the padding + dot logically (already logical, but keep explicit) */
[dir="rtl"] .tl-item{
  padding-inline-start:2.2rem;   /* identical value, stays at start side */
}
[dir="rtl"] .tl-item::before{
  inset-inline-start:.8rem;
}

/* Optional: tighter mobile look */
@media (max-width:576px){
  .tl-item{ padding-inline-start:1.9rem; }
  .tl-item::before{ inset-inline-start:.65rem; }
}
/* ===============================
   Founder Card — RTL-safe fix
   Put AFTER your main theme file
   =============================== */

.founder-card{
  position: relative;
  direction: rtl;           /* ensure inner flow is RTL */
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(2,8,20,.06);
  overflow:visible;         /* let avatar glow show cleanly */
  isolation:isolate;        /* avoid mix with parents */
}

/* Top gradient strip */
.founder-topbar{
  min-block-size:140px;     /* stable height on all breakpoints */
  background: linear-gradient(90deg,#ffb74d,#66bb6a 25%,#42a5f5 55%,#26a69a 80%,#43a047 100%);
  border-start-start-radius:16px;
  border-start-end-radius:16px;
  border-end-start-radius:0;
  border-end-end-radius:0;
}

/* Avatar: precise centering + no stretch */
.founder-avatar{
  position:absolute;
  inset-block-start:140px;  /* sits on the lower edge of the strip */
  inset-inline-start:50%;
  transform: translate(-50%, -50%);
  inline-size:132px;
  aspect-ratio:1 / 1;       /* force perfect circle */
  border-radius:50%;
  border:6px solid #fff;
  object-fit:cover;
  display:block;
  background:#fff;
  box-shadow:0 10px 32px rgba(2,8,20,.18);

  /* render artifacts guards (Safari/Chrome GPU) */
  backface-visibility:hidden;
  transform-style:preserve-3d;
  will-change:transform;
}

/* Give body room under the overlapping avatar */
.founder-card .card-body{
  padding-block-start:4.5rem !important; /* override pt-5 if needed */
  text-align:center;
}

/* Chip, bio & quote — nothing directional */
.role-chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.25rem .6rem; border-radius:999px;
  background:#f3f4f6; color:#111; font-weight:700; font-size:.85rem;
}
.founder-bio,.founder-quote{ line-height:1.65; word-break:break-word; }

/* LTR pages still render correctly */
[dir="ltr"] .founder-card{ direction:ltr; }
[dir="ltr"] .founder-card .card-body{ text-align:center; }

/* -------------------------------
   Timeline bullets (kept logical)
   ------------------------------- */
.timeline{ display:grid; gap:.6rem; margin:0; padding:0; }
.tl-item{
  position:relative;
  padding-block:.55rem;
  padding-inline-start:2.2rem;  /* space for dot on logical start */
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:12px; box-shadow:0 10px 24px rgba(2,8,20,.05);
  line-height:1.55;
}
.tl-item::before{
  content:"";
  position:absolute; inset-block-start:50%; inset-inline-start:.8rem;
  transform:translateY(-50%);
  inline-size:.55rem; block-size:.55rem; border-radius:50%;
  background:linear-gradient(135deg,#1565C0,#C62828);
  box-shadow:0 0 0 3px rgba(21,101,192,.12);
}
.tl-item.soft-muted{ background:#fafafa; }

@media (max-width:576px){
  .founder-avatar{ inline-size:120px; }
  .founder-card .card-body{ padding-block-start:4rem !important; }
  .tl-item{ padding-inline-start:1.9rem; }
  .tl-item::before{ inset-inline-start:.65rem; }
}
/* =========================================================
   RTL HARD FIXES — Founder Card + Timeline
   (place after everything else)
   ========================================================= */

/* ---------- Founder card ---------- */
.founder-card{
  position:relative;
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(2,8,20,.06);
  overflow:visible;          /* avoid clipping the avatar ring */
  isolation:isolate;
}

/* top gradient strip — fixed height so avatar math is stable */
.founder-topbar{
  height:140px;
  background:linear-gradient(90deg,#ffb74d,#66bb6a 25%,#42a5f5 55%,#26a69a 80%,#43a047 100%);
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

/* avatar: center it in BOTH LTR & RTL (no logical props) */
.founder-avatar{
  position:absolute;
  top:140px;                 /* overlaps the strip */
  left:50% !important;       /* center reference */
  right:auto !important;
  transform:translate(-50%, -50%); /* keep centered regardless of dir */
  width:132px !important;
  height:132px !important;
  max-width:none !important; /* defeat .img-fluid if present */
  border-radius:50%;
  border:6px solid #fff;
  object-fit:cover;
  display:block;
  background:#fff;
  box-shadow:0 10px 32px rgba(2,8,20,.18);
  backface-visibility:hidden; transform-style:preserve-3d;
}

/* card body: ensure space under overlapping avatar */
.founder-card .card-body{
  padding-top:4.5rem !important;
  text-align:center;
}

/* chip bidi so mixed (Arabic + (CEO)) renders naturally */
.role-chip{ unicode-bidi: plaintext; }

/* Safety: if the page is explicitly LTR, still fine */
[dir="ltr"] .founder-card .card-body{ text-align:center; }

/* ---------- Timeline ---------- */
.timeline{ display:grid; gap:.6rem; margin:0; padding:0; }

/* default (LTR) first */
.tl-item{
  position:relative;
  line-height:1.55;
  padding:.55rem 1rem .55rem 2.2rem; /* left space for dot */
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  box-shadow:0 10px 24px rgba(2,8,20,.05);
}
.tl-item::before{
  content:"";
  position:absolute;
  top:50%; left:.8rem; transform:translateY(-50%);
  width:.55rem; height:.55rem; border-radius:50%;
  background:linear-gradient(135deg,#1565C0,#C62828);
  box-shadow:0 0 0 3px rgba(21,101,192,.12);
}

/* RTL override: flip padding & dot to the right side */
[dir="rtl"] .tl-item{
  padding:.55rem 2.2rem .55rem 1rem !important; /* right space for dot */
  text-align:right;
}
[dir="rtl"] .tl-item::before{
  left:auto !important;
  right:.8rem !important;
}

/* “soft-muted” tint you’re using */
.tl-item.soft-muted{ background:#fafafa; }

/* Small screens */
@media (max-width:576px){
  .founder-avatar{ width:120px !important; height:120px !important; top:130px; }
  .founder-card .card-body{ padding-top:4rem !important; }
  .tl-item{ padding-left:1.9rem; }
  [dir="rtl"] .tl-item{ padding-right:1.9rem !important; padding-left:1rem !important; }
  .tl-item::before{ left:.65rem; }
  [dir="rtl"] .tl-item::before{ left:auto !important; right:.65rem !important; }
}
/* =========================================================
   NAVBAR + INSIGHTS MEGA — RTL FIX PACK
   (place AFTER all your CSS)
   ========================================================= */

/* 1) Mega dropdown: hard center under its toggle in both LTR/RTL */
.insights-mega .dropdown-menu.dropdown-mega{
  position: absolute !important;
  left: 50% !important;           /* visual center reference */
  right: auto !important;
  transform: translateX(-50%) translateY(4px);
  transform-origin: top center;
  inset: auto auto auto auto;     /* neutralize Popper/inset logicals */
  will-change: transform;
}

/* 2) Show state transition (kept) */
.dropdown.show > .dropdown-menu.dropdown-mega,
.dropdown-menu.show.dropdown-mega{
  transform: translateX(-50%) translateY(0);
}

/* 3) Generic dropdowns: align to logical end by default,
      but flip correctly in RTL */
.dropdown-menu{ inset-inline-end: 0; inset-inline-start: auto; }
[dir="rtl"] .dropdown-menu{ inset-inline-start: 0; inset-inline-end: auto; }

/* 4) Hover decoration border mirrors in RTL */
.dropdown-menu .dropdown-item:hover{
  box-shadow: inset 4px 0 0 0 var(--if-highlight);
  border-radius: 0 8px 8px 0;
}
[dir="rtl"] .dropdown-menu .dropdown-item:hover{
  box-shadow: inset -4px 0 0 0 var(--if-highlight);
  border-radius: 8px 0 0 8px;
}

/* 5) Navbar group push: Bootstrap me-auto/ms-auto don’t flip on dir.
      Force the correct margins for the main lists. */
.navbar-nav.me-auto{ margin-right: auto !important; margin-left: 0 !important; }
.navbar-nav.ms-lg-auto{ margin-left: auto !important; }

[dir="rtl"] .navbar-nav.me-auto{
  /* In RTL we want the same group pushed to the visual start */
  margin-left: auto !important;
  margin-right: 0 !important;
}
[dir="rtl"] .navbar-nav.ms-lg-auto{
  /* And the right-side group should push to visual end */
  margin-right: auto !important;
  margin-left: 0 !important;
}

/* 6) Icon spacing utilities used in your markup (me-1/me-2) need mirroring */
[dir="rtl"] .me-1{ margin-left: .25rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-2{ margin-left: .5rem  !important; margin-right: 0 !important; }
[dir="rtl"] .ms-1{ margin-right: .25rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-2{ margin-right: .5rem  !important; margin-left: 0 !important; }

/* 7) Insights “tree” chevron points visually left when open in RTL */
.insights-tree .branch .chev{ transition: transform .18s ease; }
.insights-tree .branch.open > .branch-head .chev{ transform: rotate(90deg); }
[dir="rtl"] .insights-tree .branch.open > .branch-head .chev{ transform: rotate(-90deg); }

/* 8) Indentation of nested lists flips via logical padding; add fallback */
.insights-tree .branch-body{
  padding-inline-start: 1.6rem;
}
[dir="rtl"] .insights-tree .branch-body{
  padding-inline-start: 1.6rem; /* remains “start” side in RTL */
}

/* 9) Mega header search icon/input paddings mirror in RTL */
.main-navbar .lang-dd .input-wrap i,
.insights-mega .mega-head .input-wrap i{
  left: .6rem; right: auto;
}
[dir="rtl"] .main-navbar .lang-dd .input-wrap i,
[dir="rtl"] .insights-mega .mega-head .input-wrap i{
  right: .6rem; left: auto;
}
.insights-mega .mega-head input[type="search"]{
  padding-inline-start: 2.1rem;
  padding-inline-end: .7rem;
}
[dir="rtl"] .insights-mega .mega-head input[type="search"]{
  padding-inline-start: .7rem;
  padding-inline-end: 2.1rem;
}

/* 10) Keep mobile bottom-sheet behavior intact */
@media (max-width: 991.98px){
  .insights-mega .dropdown-menu.dropdown-mega{
    position: fixed !important;
    left: 0 !important; right: 0 !important; transform: none !important;
    bottom: 0; top: auto; width: 100vw !important; margin: 0 !important;
    border-radius: 16px 16px 0 0; border: 0;
    box-shadow: 0 -6px 40px rgba(2,6,23,.18);
  }
}

/* 11) Small polish: Arabic quotes & link hit areas */
[dir="rtl"] .insights-link{ padding: .45rem .55rem; }
.role-chip{ unicode-bidi: plaintext; }