/* ============================================================
   FIX: NAVBAR VISIBLE IMMEDIATELY ON LOAD & STAYS VISIBLE
   (does NOT touch background - keeps .glass transparency)
   ============================================================ */
#stickyNav,
#stickyNav.navbar-hidden {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

#stickyNav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* ============================================================
   PROCESS PAGE - page-specific styles
   ============================================================ */

/* Fade-up reveal on scroll */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Alternate timeline: vertical center line */
.timeline-wrap {
  position: relative;
}
.timeline-wrap::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(212,180,140,0.4) 10%,
    rgba(212,180,140,0.4) 90%,
    transparent 100%);
  transform: translateX(-50%);
  z-index: 0;
}
@media (max-width: 768px) {
  .timeline-wrap::before { left: 22px; }
}

/* Timeline dots */
.timeline-dot {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d4b48c;
  border: 4px solid #0b0a0a;
  z-index: 2;
  box-shadow: 0 0 0 6px rgba(212,180,140,0.15);
}
@media (max-width: 768px) {
  .timeline-dot { left: 22px; }
}

/* Light theme overrides */
html.light .timeline-dot {
  border-color: #f7f5f0;
  box-shadow: 0 0 0 6px rgba(212,180,140,0.25);
}
html.light .timeline-wrap::before {
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(176,129,79,0.5) 10%,
    rgba(176,129,79,0.5) 90%,
    transparent 100%);
}

/* Stage cards */
.stage-card {
  background: rgba(11, 10, 10, 0.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212,180,140,0.12);
  border-radius: 20px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.stage-card:hover {
  border-color: rgba(212,180,140,0.35);
  box-shadow: 0 20px 60px -20px rgba(212,180,140,0.2);
}
html.light .stage-card {
  background: rgba(255,255,255,0.85);
  border-color: rgba(176,129,79,0.18);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
html.light .stage-card:hover {
  border-color: rgba(176,129,79,0.45);
  box-shadow: 0 20px 60px -20px rgba(176,129,79,0.15);
}

/* "You'll receive" side panel */
.receive-card {
  background: rgba(28, 46, 74, 0.2);
  border: 1px solid rgba(212,180,140,0.15);
  border-radius: 16px;
  padding: 24px;
}
html.light .receive-card {
  background: #f7f3ec;
  border-color: rgba(176,129,79,0.2);
}

/* Discipline cards */
.discipline-card {
  background: rgba(11, 10, 10, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212,180,140,0.12);
  border-radius: 20px;
  overflow: hidden;
  transition: border-color .3s, transform .3s;
}
.discipline-card:hover {
  border-color: rgba(212,180,140,0.4);
  transform: translateY(-4px);
}
html.light .discipline-card {
  background: #ffffff;
  border-color: rgba(176,129,79,0.18);
}
html.light .discipline-card:hover {
  border-color: rgba(176,129,79,0.45);
}

.discipline-icon-wrap {
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(212,180,140,0.12), rgba(212,180,140,0.02));
}
html.light .discipline-icon-wrap {
  background: linear-gradient(135deg, #f7f3ec, #fbf9f5);
}

/* FAQ */
.faq-item {
  background: rgba(11, 10, 10, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(212,180,140,0.12);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s;
}
.faq-item:hover {
  border-color: rgba(212,180,140,0.35);
}
.faq-item[open] {
  border-color: rgba(212,180,140,0.4);
}
html.light .faq-item {
  background: #ffffff;
  border-color: rgba(176,129,79,0.18);
}
html.light .faq-item:hover {
  border-color: rgba(176,129,79,0.4);
}
html.light .faq-item[open] {
  border-color: rgba(176,129,79,0.5);
}

.faq-summary {
  cursor: pointer;
  list-style: none;
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  transition: background .25s;
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover {
  background: rgba(212,180,140,0.03);
}
html.light .faq-summary:hover {
  background: #faf7f1;
}

.faq-plus {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(212,180,140,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4b48c;
  font-size: 14px;
  font-weight: 300;
  transition: transform .3s, background .3s, color .3s;
  line-height: 1;
}
.faq-item[open] .faq-plus {
  transform: rotate(45deg);
  background: #d4b48c;
  color: #0b0a0a;
  border-color: #d4b48c;
}
html.light .faq-plus {
  border-color: rgba(176,129,79,0.4);
  color: #b0814f;
}
html.light .faq-item[open] .faq-plus {
  background: #b0814f;
  color: #ffffff;
  border-color: #b0814f;
}

.faq-content {
  padding: 4px 26px 28px 26px;
  color: #8a7e6e;
  font-size: 14px;
  line-height: 1.85;
  border-top: 1px solid rgba(212,180,140,0.1);
  margin-top: 0;
  padding-top: 22px;
}
html.light .faq-content {
  color: #4a463e;
  border-color: #ece7dd;
}

.faq-content h5 {
  color: #e8dccc;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 18px 0 8px 0;
}
html.light .faq-content h5 { color: #1c1c1e; }

.faq-content p { margin-bottom: 12px; }
.faq-content p:last-child { margin-bottom: 0; }
.faq-content ul { padding-left: 0; list-style: none; margin: 8px 0 14px 0; }
.faq-content ul li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}
.faq-content ul li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: #d4b48c;
  opacity: 0.6;
}
html.light .faq-content ul li::before { color: #b0814f; opacity: 0.8; }

.faq-content strong { color: #d4b48c; font-weight: 500; }
html.light .faq-content strong { color: #b0814f; }

/* Section headers */
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #d4b48c;
  margin-bottom: 16px;
}
html.light .section-eyebrow { color: #b0814f; }

/* Headings */
.process-h1, .process-h2, .process-h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.1;
}



/* Go to top light theme */
html.light #goToTop { background: #b0814f !important; color: #fff !important; }
	

		/* Lock "Core Values" button — identical in light theme */
		[data-theme="light"] #home a[href="#values"] {
			background-color: rgb(255 255 255 / 0.05) !important;
			border-color: rgb(232 220 204 / 0.10) !important;
			color: rgb(232 220 204 / 0.70) !important;
			backdrop-filter: blur(4px) !important;
			-webkit-backdrop-filter: blur(4px) !important;
		}

		[data-theme="light"] #home a[href="#values"]:hover {
			background-color: rgb(255 255 255 / 0.10) !important;
			border-color: rgb(212 180 140 / 0.30) !important;
		}

	
body.lang-ar .hero-tagline-row {
    direction: rtl !important;
}
	
/* ============================================================
   RTL — FAQ SECTION (Arabic only)
   ============================================================ */
body.lang-ar #faq .faq-item,
body.lang-ar #faq .faq-summary,
body.lang-ar #faq .faq-content,
body.lang-ar #faq .faq-content p,
body.lang-ar #faq .faq-content h5,
body.lang-ar #faq .faq-content ul,
body.lang-ar #faq .faq-content li {
    direction: rtl;
    text-align: right;
}

/* Keep the "+" circle on the left side in RTL */
body.lang-ar #faq .faq-summary {
    flex-direction: row-reverse;
}

/* Kill the LTR-only right padding on the question span */
body.lang-ar #faq .faq-summary > span:first-child {
    padding-right: 0 !important;
    padding-left: 1.5rem !important;
}

/* Bullet dash should sit on the right in RTL */
body.lang-ar #faq .faq-content ul li {
    padding-left: 0;
    padding-right: 20px;
}
body.lang-ar #faq .faq-content ul li::before {
    left: auto;
    right: 0;
}
	
.faq-summary {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
    transition: background .25s;
}

html[lang="ar"] #faq .faq-summary,
html[dir="rtl"] #faq .faq-summary {
    direction: rtl;
    flex-direction: row;
    justify-content: flex-start;
}
	
html[lang="ar"] #disciplines,
html[lang="ar"] #disciplines *,
html[dir="rtl"] #disciplines,
html[dir="rtl"] #disciplines * {
    direction: rtl;
}

/* Keep the centered header centered */
html[lang="ar"] #disciplines .text-center,
html[dir="rtl"] #disciplines .text-center {
    text-align: center;
}
	
/* RTL for discipline cards in Arabic */
html[lang="ar"] .discipline-card,
html[lang="ar"] .discipline-card *,
html[dir="rtl"] .discipline-card,
html[dir="rtl"] .discipline-card * {
    direction: rtl;
	text-align: center;
}

/* Card body text right-aligned, but header stays centered */
html[lang="ar"] .discipline-card .p-8,
html[dir="rtl"] .discipline-card .p-8 {
    text-align: center;
	
}

/* Icon wrap stays centered regardless */
html[lang="ar"] .discipline-icon-wrap,
html[dir="rtl"] .discipline-icon-wrap {
    text-align: center;
}

/* Focus / Lead rows: "التركيز" on the right, value on the left */
html[lang="ar"] .discipline-card dl .flex,
html[dir="rtl"] .discipline-card dl .flex {
    direction: rtl;
	flex-direction: row-reverse;
}
	
.discipline-card {
    display: flex;
    flex-direction: column;
}

.discipline-card > .p-8 {
    display: flex;
    flex-direction: column;
    flex: 1;              /* fill the remaining card height */
}

.discipline-card dl {
    margin-top: auto;     /* pin the Focus/Lead block to the bottom */
}
	
/* ============================================================
   Arabic — force Cairo everywhere on the page
   ============================================================ */
html[lang="ar"] body,
html[lang="ar"] body *,
html[dir="rtl"] body,
html[dir="rtl"] body * {
    font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
}

	

	/* ============================================================
   RTL — Process stages (Arabic)
   ============================================================ */
html[lang="ar"] #process,
html[dir="rtl"] #process,
html[lang="ar"] #process .process-card,
html[dir="rtl"] #process .process-card,
html[lang="ar"] #process .process-card > div,
html[dir="rtl"] #process .process-card > div {
    direction: rtl;
}

/* Text column right-aligned */
html[lang="ar"] #process .process-card .md\:col-span-3,
html[dir="rtl"] #process .process-card .md\:col-span-3 {
    text-align: right;
}

/* Stage eyebrow: kill the wide letter-spacing that breaks Arabic */
html[lang="ar"] #process .section-eyebrow,
html[dir="rtl"] #process .section-eyebrow {
    letter-spacing: 0.05em;
}

/* Panel stays RTL */
html[lang="ar"] #process .receive-card,
html[dir="rtl"] #process .receive-card,
html[lang="ar"] #process .receive-card ul li,
html[dir="rtl"] #process .receive-card ul li {
    direction: rtl;
    text-align: right;
}
html[lang="ar"] #process .process-card .md\:col-span-3,
html[dir="rtl"] #process .process-card .md\:col-span-3 {
    order: 2;
}
html[lang="ar"] #process .process-card .md\:col-span-2,
html[dir="rtl"] #process .process-card .md\:col-span-2 {
    order: 1;
}
#process .stage-card {
    border: 1px solid rgba(212, 180, 140, 0.35) !important;
    outline: 1px solid rgba(212, 180, 140, 0.12);
    outline-offset: -6px;
    transition: border-color .3s ease, box-shadow .3s ease;
}

#process .stage-card:hover {
    border-color: rgba(212, 180, 140, 0.65) !important;
    box-shadow: 0 20px 60px -20px rgba(212, 180, 140, 0.2);
}

html.light #process .stage-card {
    background: transparent !important;
    border-color: rgba(176, 129, 79, 0.4) !important;
    outline-color: rgba(176, 129, 79, 0.15);
    box-shadow: none !important;
}

html.light #process .stage-card:hover {
    border-color: rgba(176, 129, 79, 0.7) !important;
    box-shadow: 0 20px 60px -20px rgba(176, 129, 79, 0.15) !important;
}
	
html.light #disciplines,
html.light #disciplines .discipline-card {
    background: transparent !important;
    box-shadow: none !important;
}
html.light #disciplines .discipline-icon-wrap {
    background: transparent !important;
}
	
/* ============================================================
   Discipline cards — gold border (dark + light)
   ============================================================ */
#disciplines .discipline-card {
    border: 1px solid rgba(212, 180, 140, 0.35) !important;
    outline: 1px solid rgba(212, 180, 140, 0.12);
    outline-offset: -6px;
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

#disciplines .discipline-card:hover {
    border-color: rgba(212, 180, 140, 0.7) !important;
    box-shadow: 0 20px 60px -20px rgba(212, 180, 140, 0.25);
    transform: translateY(-4px);
}

/* Light theme */
html.light #disciplines .discipline-card {
    border-color: rgba(176, 129, 79, 0.4) !important;
    outline-color: rgba(176, 129, 79, 0.15);
}
html.light #disciplines .discipline-card:hover {
    border-color: rgba(176, 129, 79, 0.75) !important;
    box-shadow: 0 20px 60px -20px rgba(176, 129, 79, 0.2);
}
	
#process .stage-card.process-card {
    background-image: linear-gradient(
        rgba(212, 180, 140, 0.05),
        rgba(212, 180, 140, 0.05)
    ) !important;
}

#process .stage-card.process-card:nth-child(even) {
    background-image: linear-gradient(
        rgba(212, 180, 140, 0.12),
        rgba(212, 180, 140, 0.12)
    ) !important;
}

html.light #process .stage-card.process-card {
    background-image: linear-gradient(
        rgba(176, 129, 79, 0.06),
        rgba(176, 129, 79, 0.06)
    ) !important;
}

html.light #process .stage-card.process-card:nth-child(even) {
    background-image: linear-gradient(
        rgba(176, 129, 79, 0.12),
        rgba(176, 129, 79, 0.12)
    ) !important;
}

/*********************************** tree *********************************/


/* ==========================================================
   PTREE — process tree, alternating left/right
   Trunk = vertical dashed line down the middle.
   Branch = horizontal line connecting each card to the trunk.
   ========================================================== */

.ptree {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* Trunk: single vertical line down the exact centre */
.ptree::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #d4b48c;
  opacity: 0.45;
}

/* One row = one stage */
.ptree-row {
  position: relative;
  width: 50%;
  padding-bottom: 3.5rem;
}
.ptree-row:last-child { padding-bottom: 0; }

/* LEFT row: card occupies left half, gap on its right */
.ptree-row--left {
  margin-right: auto;
  margin-left: 0;
  padding-right: 3rem;
}

/* RIGHT row: card occupies right half, gap on its left */
.ptree-row--right {
  margin-left: auto;
  margin-right: 0;
  padding-left: 3rem;
}

/* The horizontal branch line — spans the 3rem gap */
.ptree-line {
  position: absolute;
  top: 50%;
  height: 2px;
  width: 3rem;
  background: #d4b48c;
  opacity: 0.45;
}
/* LEFT row: line sits at row's right edge, extending leftward to the trunk */
.ptree-row--left  .ptree-line { right: 0; left: auto; }

/* RIGHT row: line sits at row's left edge, extending rightward to the trunk */
.ptree-row--right .ptree-line { left: 0; right: auto; }

/* Dot on the trunk, at the row's vertical centre */
.ptree-row::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #d4b48c;
  box-shadow: 0 0 0 4px rgba(212,180,140,0.15);
}
.ptree-row--left::after  { right: -6px; left: auto; }
.ptree-row--right::after { left: -6px;  right: auto; }

/* Card */
.ptree-card {
  border: 1px solid rgba(212,180,140,0.4);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.ptree-card:hover {
  border-color: rgba(212,180,140,0.75);
  transform: translateY(-2px);
}

.ptree-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212,180,140,0.7);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.ptree-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e8dccc;
  line-height: 1.2;
  margin: 0;
}
.ptree-desc {
  font-size: 0.85rem;
  color: #8a7e6e;
  line-height: 1.65;
  margin-top: 0.6rem;
}

.ptree-divider {
  height: 1px;
  margin: 1.25rem 0;
  background: linear-gradient(to right,
    rgba(212,180,140,0.05),
    rgba(212,180,140,0.3) 50%,
    rgba(212,180,140,0.05));
}

.ptree-receive ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ptree-receive li {
  position: relative;
  font-size: 0.8rem;
  color: #b8aa98;
  line-height: 1.55;
  padding-left: 1.1rem;
  margin-bottom: 0.35rem;
}
.ptree-receive li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(212,180,140,0.6);
}

/* ================= Arabic / RTL ================= */
body.lang-ar .ptree::before {
  left: 50%;
  right: auto;
  margin-left: -1px;
  margin-right: 0;
}

/* Keep card placement consistent with English so lines point correctly to the center trunk */
body.lang-ar .ptree-row--left  { 
  margin-right: auto; 
  margin-left: 0; 
  padding-right: 3rem; 
  padding-left: 0; 
}
body.lang-ar .ptree-row--right { 
  margin-left: auto; 
  margin-right: 0; 
  padding-left: 3rem; 
  padding-right: 0; 
}

body.lang-ar .ptree-row--left  .ptree-line { right: 0; left: auto; }
body.lang-ar .ptree-row--right .ptree-line { left: 0; right: auto; }

body.lang-ar .ptree-row--left::after  { right: -6px; left: auto; }
body.lang-ar .ptree-row--right::after { left: -6px; right: auto; }

body.lang-ar .ptree-card { direction: rtl; text-align: right; }
body.lang-ar .ptree-receive li { padding-left: 0; padding-right: 1.1rem; }
body.lang-ar .ptree-receive li::before { left: auto; right: 0; }

body.lang-ar .ptree-title,
body.lang-ar .ptree-desc,
body.lang-ar .ptree-receive li,
body.lang-ar .ptree-label {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
}

/* ================= Mobile: stack all cards left ================= */
@media (max-width: 768px) {
  .ptree::before { left: 16px; right: auto; margin: 0; }
  body.lang-ar .ptree::before { left: 16px; right: auto; margin: 0; }

  .ptree-row {
    width: 100%;
    padding-left: 48px;
    padding-right: 0;
  }
  .ptree-row--left,
  .ptree-row--right {
    margin: 0;
    padding-left: 48px;
    padding-right: 0;
  }
  body.lang-ar .ptree-row,
  body.lang-ar .ptree-row--left,
  body.lang-ar .ptree-row--right {
    padding-left: 48px;
    padding-right: 0;
  }

  .ptree-row--left  .ptree-line,
  .ptree-row--right .ptree-line {
    left: 16px; right: auto; width: 32px;
  }
  body.lang-ar .ptree-row--left  .ptree-line,
  body.lang-ar .ptree-row--right .ptree-line {
    left: 16px; right: auto; width: 32px;
  }

  .ptree-row--left::after,
  .ptree-row--right::after {
    left: 10px; right: auto;
  }
  body.lang-ar .ptree-row--left::after,
  body.lang-ar .ptree-row--right::after {
    left: 10px; right: auto;
  }
}

/* ============================================================
   PTREE — LIGHT THEME OVERRIDES
   Gold-toned trunk, branches, dots, and readable card text
   ============================================================ */

/* Trunk line — darker gold for visibility on cream */
[data-theme="light"] .ptree::before {
  background: #b0814f;
  opacity: 0.5;
	
}

/* Branch (horizontal) lines */
[data-theme="light"] .ptree-line {
  background: #b0814f;
  opacity: 0.5;
}

/* Dots on the trunk */
[data-theme="light"] .ptree-row::after {
  background: #b0814f;
  box-shadow: 0 0 0 4px rgba(176, 129, 79, 0.2);
}

/* Card shell — light background, gold border */
/* ============================================================
   PTREE — LIGHT THEME: thicker golden card border
   ============================================================ */

[data-theme="light"] .ptree-card {
  border-width: 2px;
  border-color: rgba(176, 129, 79, 0.65);
}

[data-theme="light"] .ptree-card:hover {
  border-width: 2px;
  border-color: rgba(176, 129, 79, 0.95);
	
	
}

.ptree-card {
  border: 1px solid rgba(176, 129, 79, 0.3);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, transform 0.4s ease;
}

.ptree-card:hover {
  border-color: rgba(176, 129, 79, 0.55);
  box-shadow:
    0 0 60px 20px rgba(176, 129, 79, 0.18),   /* huge outer fog */
    0 0 120px 40px rgba(176, 129, 79, 0.08),  /* wider haze */
    inset 0 0 40px rgba(176, 129, 79, 0.06);  /* inner mist */
  transform: translateY(-2px);
}

/* "Stage 01" eyebrow */
[data-theme="light"] .ptree-label {
  color: #b0814f;
}

/* Stage title (Listen, Survey & Explore, etc.) */
[data-theme="light"] .ptree-title {
  color: #1a1a1a;
}

/* Stage description */
[data-theme="light"] .ptree-desc {
  color: #4a4035;
}

/* Divider between description and "You'll receive" */
[data-theme="light"] .ptree-divider {
  background: linear-gradient(to right,
    rgba(176, 129, 79, 0.05),
    rgba(176, 129, 79, 0.35) 50%,
    rgba(176, 129, 79, 0.05));
}

/* "You'll receive" list items */
[data-theme="light"] .ptree-receive li {
  color: #4a4035;
}

[data-theme="light"] .ptree-receive li::before {
  color: rgba(176, 129, 79, 0.8);
}

/*****************************************tree*************************/


/* ==========================================================
   PTREE - process tree, alternating left/right
   Trunk = vertical dashed line down the middle.
   Branch = horizontal line connecting each card to the trunk.
   ========================================================== */

.ptree {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}

/* Trunk: single vertical line down the exact centre */
.ptree::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #d4b48c;
  opacity: 0.45;
}

/* One row = one stage */
.ptree-row {
  position: relative;
  width: 50%;
  padding-bottom: 3.5rem;
}
.ptree-row:last-child { padding-bottom: 0; }

/* LEFT row: card occupies left half, gap on its right */
.ptree-row--left {
  margin-right: auto;
  margin-left: 0;
  padding-right: 3rem;
}

/* RIGHT row: card occupies right half, gap on its left */
.ptree-row--right {
  margin-left: auto;
  margin-right: 0;
  padding-left: 3rem;
}

/* The horizontal branch line - spans the 3rem gap */
.ptree-line {
  position: absolute;
  top: 50%;
  height: 2px;
  width: 3rem;
  background: #d4b48c;
  opacity: 0.45;
}
/* LEFT row: line sits at row's right edge, extending leftward to the trunk */
.ptree-row--left  .ptree-line { right: 0; left: auto; }

/* RIGHT row: line sits at row's left edge, extending rightward to the trunk */
.ptree-row--right .ptree-line { left: 0; right: auto; }

/* Dot on the trunk, at the row's vertical centre */
.ptree-row::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #d4b48c;
  box-shadow: 0 0 0 4px rgba(212,180,140,0.15);
}
.ptree-row--left::after  { right: -6px; left: auto; }
.ptree-row--right::after { left: -6px;  right: auto; }

/* Card */
.ptree-card {
  border: 1px solid rgba(212,180,140,0.4);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.ptree-card:hover {
  border-color: rgba(212,180,140,0.75);
  transform: translateY(-2px);
}

.ptree-label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(212,180,140,0.7);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.ptree-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #e8dccc;
  line-height: 1.2;
  margin: 0;
}
.ptree-desc {
  font-size: 0.85rem;
  color: #8a7e6e;
  line-height: 1.65;
  margin-top: 0.6rem;
}

.ptree-divider {
  height: 1px;
  margin: 1.25rem 0;
  background: linear-gradient(to right,
    rgba(212,180,140,0.05),
    rgba(212,180,140,0.3) 50%,
    rgba(212,180,140,0.05));
}

.ptree-receive ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ptree-receive li {
  position: relative;
  font-size: 0.8rem;
  color: #b8aa98;
  line-height: 1.55;
  padding-left: 1.1rem;
  margin-bottom: 0.35rem;
}
.ptree-receive li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: rgba(212,180,140,0.6);
}

/* ================= Arabic / RTL ================= */
body.lang-ar .ptree::before {
  left: 50%;
  right: auto;
  margin-left: -1px;
  margin-right: 0;
}

/* Keep card placement consistent with English so lines point correctly to the center trunk */
body.lang-ar .ptree-row--left  { 
  margin-right: auto; 
  margin-left: 0; 
  padding-right: 3rem; 
  padding-left: 0; 
}
body.lang-ar .ptree-row--right { 
  margin-left: auto; 
  margin-right: 0; 
  padding-left: 3rem; 
  padding-right: 0; 
}

body.lang-ar .ptree-row--left  .ptree-line { right: 0; left: auto; }
body.lang-ar .ptree-row--right .ptree-line { left: 0; right: auto; }

body.lang-ar .ptree-row--left::after  { right: -6px; left: auto; }
body.lang-ar .ptree-row--right::after { left: -6px; right: auto; }

body.lang-ar .ptree-card { direction: rtl; text-align: right; }
body.lang-ar .ptree-receive li { padding-left: 0; padding-right: 1.1rem; }
body.lang-ar .ptree-receive li::before { left: auto; right: 0; }

body.lang-ar .ptree-title,
body.lang-ar .ptree-desc,
body.lang-ar .ptree-receive li,
body.lang-ar .ptree-label {
  font-family: 'Cairo', 'Inter', system-ui, sans-serif !important;
}

/* ================= Mobile: stack all cards left ================= */
@media (max-width: 768px) {
  .ptree::before { left: 16px; right: auto; margin: 0; }
  body.lang-ar .ptree::before { left: 16px; right: auto; margin: 0; }

  .ptree-row {
    width: 100%;
    padding-left: 48px;
    padding-right: 0;
  }
  .ptree-row--left,
  .ptree-row--right {
    margin: 0;
    padding-left: 48px;
    padding-right: 0;
  }
  body.lang-ar .ptree-row,
  body.lang-ar .ptree-row--left,
  body.lang-ar .ptree-row--right {
    padding-left: 48px;
    padding-right: 0;
  }

  .ptree-row--left  .ptree-line,
  .ptree-row--right .ptree-line {
    left: 16px; right: auto; width: 32px;
  }
  body.lang-ar .ptree-row--left  .ptree-line,
  body.lang-ar .ptree-row--right .ptree-line {
    left: 16px; right: auto; width: 32px;
  }

  .ptree-row--left::after,
  .ptree-row--right::after {
    left: 10px; right: auto;
  }
  body.lang-ar .ptree-row--left::after,
  body.lang-ar .ptree-row--right::after {
    left: 10px; right: auto;
  }
}
/**************************tree*************************/