:root {
      --primary-color: #8B5CF6;
      --secondary-color: #C084FC;
      --light-purple: #F3E8FF;
      --dark-purple: #6D28D9;
      --text-dark: #2B2D31;
      --text-gray: #4B5563;
      --text-light: #9CA3AF;
      --bg-light: #F9FAFB;
      --white: #fff;
      --gradient: linear-gradient(90deg, #8B5CF6 0%, #C084FC 100%);
      --center-gap: 34px;
      --line-gradient: linear-gradient(180deg, #c8a9ff 0%, #a6baff 50%, #7ee8d1 100%);
      --line-glow: 0 0 10px rgba(139, 92, 246, .25), 0 0 14px rgba(124, 196, 255, .18), 0 0 18px rgba(126, 232, 209, .18);
      --ease: cubic-bezier(.22, .61, .36, 1);
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box
  }

  body {
      font-family: Inter, sans-serif;
      color: var(--text-dark);
      line-height: 1.6;
      overflow-x: hidden;
      background: #fff;
      transition: direction .3s ease
  }

  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px
  }

  /* Loader */
  .loader-container {
      position: fixed;
      inset: 0;
      background: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
      transition: opacity .5s ease-out
  }

  .loader {
      width: 56px;
      height: 56px;
      border: 5px solid var(--light-purple);
      border-top: 5px solid var(--primary-color);
      border-radius: 50%;
      animation: spin 1s linear infinite
  }

  @keyframes spin {
      to {
          transform: rotate(360deg)
      }
  }

 
.t-multiline { white-space: pre-line; }
  /* Hero (مصغّر) */
  .hero {
      background: #fff;
      padding: 44px 0;
      position: relative;
      overflow: hidden
  }

  .hero-content {
      display: flex;
      align-items: center;
      gap: 36px
  }

  .hero-text {
      flex: 1
  }

  .hero-title {
      font-size: 80px;
      font-weight: 400;
      color: var(--text-dark);
      margin-bottom: 25px;
      line-height: 1.15
  }

  .hero-description {
      font-size: 20px;
      color: var(--text-gray);
      margin-bottom: 12px;
      line-height: 1.55
  }

  .hero-image {
      flex: 1;
      text-align: center
  }

  .hero-image img {
      max-width: 86%;
      height: 220px;
  }

  /* ============ Hero Decorative Squares ============ */
  /* أساس المربعات */
  .hero-text {
      position: relative;
      /* مهم عشان التموضع المطلق يشتغل داخلها */
  }

  .text-decorative-square {
      position: absolute;
      display: block;
      border-radius: 6px;
      background: #c4c4c4;
      /* لون افتراضي */
      opacity: 0.85;
      pointer-events: none;
      /* ما تتفاعل مع الماوس */
      filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .08));
      animation: floatY 6s ease-in-out infinite;
      will-change: transform, opacity;
      z-index: 1;
  }

  /* بدّل اللون بسرعة لكل مربع إذا بدك */
  .text-square-1 {
      background: #E5E7EB;
  }

  /* بنفسجي فاتح */
  .text-square-2 {
      background: #E5E7EB;
  }

  /* نعناعي فاتح */
  .text-square-3 {
      background: #E5E7EB;
  }

  /* أصفر فاتح */
  .text-square-4 {
      background: #E5E7EB;
  }

  /* وردي فاتح */
  .text-square-5 {
      background: #E5E7EB;
  }

  /* أزرق فاتح */
  .text-square-6 {
      background: #E5E7EB;
  }

  /* رمادي فاتح */

  /* أحجام ومواقع كل مربع (تقدر تغيّرها براحتك) */
  .text-square-1 {
      width: 44px;
      height: 44px;
      top: -38px;
      left: -42px;
      animation-delay: 0s;
  }

  .text-square-2 {
      width: 26px;
      height: 26px;
      top: 74px;
      left: -64px;
      animation-delay: .8s;
  }

  .text-square-3 {
      width: 34px;
      height: 34px;
      bottom: 120px;
      right: -50px;
      animation-delay: 1.2s;
  }

  .text-square-4 {
      width: 18px;
      height: 18px;
      bottom: 48px;
      right: -28px;
      animation-delay: .4s;
  }

  .text-square-5 {
      width: 22px;
      height: 22px;
      top: 18px;
      right: 38px;
      animation-delay: 1.6s;
  }

  .text-square-6 {
      width: 28px;
      height: 28px;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      animation-delay: .2s;
  }

  /* حركات إضافية (لفّة خفيفة/نبض) */
  .text-square-1, .text-square-3, .text-square-5 {
      animation-name: floatY, slowRotate;
      animation-duration: 6s, 18s;
  }

  .text-square-2, .text-square-4, .text-square-6 {
      animation-name: floatY, slowRotate;
      animation-duration: 7s, 22s;
  }

  /* عند الهوفر على الهيرو: لمعة خفيفة */
  .hero:hover .text-decorative-square {
      opacity: 1;
      filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .12));
  }

  /* مفاتيح الحركة */
  @keyframes floatY {
      0%, 100% {
          transform: translateY(0)
      }

      50% {
          transform: translateY(-10px)
      }
  }

  @keyframes slowRotate {
      0% {
          transform: rotate(0deg)
      }

      50% {
          transform: rotate(3deg)
      }

      100% {
          transform: rotate(0deg)
      }
  }

  /* احترام تفضيل المستخدم لتقليل الحركة */
  @media (prefers-reduced-motion: reduce) {
      .text-decorative-square {
          animation: none;
      }
  }

  /* مواءمة للموبايل: صغّر وقرّب شوي */
  @media (max-width: 768px) {
      .text-square-1 {
          width: 34px;
          height: 34px;
          top: -28px;
          left: -30px;
      }

      .text-square-2 {
          width: 20px;
          height: 20px;
          top: 64px;
          left: -46px;
      }

      .text-square-3 {
          width: 26px;
          height: 26px;
          bottom: 110px;
          right: -36px;
      }

      .text-square-4 {
          width: 14px;
          height: 14px;
          bottom: 44px;
          right: -22px;
      }

      .text-square-5 {
          width: 18px;
          height: 18px;
          top: 12px;
          right: 26px;
      }

      .text-square-6 {
          width: 22px;
          height: 22px;
          bottom: -32px;
      }
  }


  /* ================= Contact & Footer ================= */
  .contact {
      background: linear-gradient(135deg, #1E40AF 0%, #8B5CF6 50%, #7C3AED 100%);
      padding: 64px 0
  }

  .contact-container {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 25px 50px rgba(0, 0, 0, .25);
      padding: 32px;
      max-width: 900px;
      margin: 0 auto
  }

  .contact-title {
      text-align: center;
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 12px
  }

  .contact-subtitle {
      text-align: center;
      font-size: 18px;
      color: var(--text-gray);
      margin-bottom: 32px
  }

  .contact-content {
      display: flex;
      gap: 32px;
      flex-wrap: wrap
  }

  .contact-info,
  .contact-form {
      flex: 1;
      min-width: 280px
  }

  .info-title {
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 20px
  }

  .info-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 20px
  }

  .info-icon {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff
  }

  .phone-icon {
      background: #1E40AF
  }

  .email-icon {
      background: var(--primary-color)
  }

  .address-icon {
      background: #7C3AED
  }

  .info-details h4 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 5px
  }

  .info-details p {
      font-size: 15px;
      color: var(--text-gray);
      margin: 0
  }

  .form-group {
      margin-bottom: 16px
  }

  .form-control {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #D1D5DB;
      border-radius: 8px;
      font-size: 15px
  }

  .form-control:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(139, 92, 246, .1);
      transform: translateY(-2px)
  }

  textarea.form-control {
      min-height: 120px;
      resize: vertical
  }

  .submit-btn {
      width: 100%;
      padding: 12px;
      background: var(--gradient);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      overflow: hidden
  }

  .submit-btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, .3);
      transform: translate(-50%, -50%);
      transition: width .6s, height .6s
  }

  .submit-btn:hover::before {
      width: 300px;
      height: 300px
  }

  footer {
      background: #111827;
      color: #fff;
      padding: 56px 0 28px;
      opacity: 0;
      transform: translateY(24px)
  }

  footer.animate {
      opacity: 1;
      transform: none;
      transition: opacity .6s var(--ease), transform .6s var(--ease)
  }

  .footer-content {
      text-align: center
  }

  .footer-logo {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 12px
  }

  .footer-description {
      font-size: 15px;
      color: var(--text-light);
      margin-bottom: 26px;
      max-width: 500px;
      margin-inline: auto
  }

  .social-links {
      display: flex;
      justify-content: center;
      gap: 18px;
      margin-bottom: 32px
  }

  .social-link {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-light);
      transition: .3s
  }

  .social-link:hover {
      background: var(--primary-color);
      transform: translateY(-5px)
  }

  .copyright {
      border-top: 1px solid #1F2937;
      padding-top: 24px;
      font-size: 14.5px;
      color: var(--text-light)
  }

  /* ================ Responsive ================ */
  @media (max-width:992px) {
      .hero-content {
          flex-direction: column;
          text-align: center
      }

      .hero {
          padding: 40px 0
      }

      .hero-title {
          font-size: 36px
      }

      .timeline-line {
          display: none
      }

      .timeline-item {
          grid-template-columns: 1fr;
          column-gap: 0;
          row-gap: 12px;
          margin: 0 0 40px
      }

      .timeline-item .node-copy {
          margin: 0 !important
      }

      .timeline-item .node-media {
          order: -1;
          width: 100% !important;
          max-width: 680px;
          justify-self: center;
          margin: 0 !important
      }
  }

  @media (max-width:768px) {
      .nav-links {
          display: none
      }

      .menu-toggle {
          display: block
      }

      .hero-title {
          font-size: 32px
      }

      .hero-description {
          font-size: 16.5px
      }

      .contact-title {
          font-size: 26px
      }
  }

  @media (max-width:576px) {
      .hero {
          padding: 32px 0
      }

      .hero-title {
          font-size: 28px
      }

      .timeline {
          padding: 56px 0
      }

      .content-title {
          font-size: 26px
      }

      .contact {
          padding: 44px 0
      }

      .contact-container {
          padding: 22px
      }
  }

  /* Active link in navbar */
.nav-links a {
  position: relative;
  transition: color .2s ease;
}
.nav-links a.is-active {
  color: #6c4df6; /* بنفسجي خفيف */
}
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg,#6c4df6,#9b8cff);
  border-radius: 999px;
}
/* Navbar: كارد بالنص + سِيدز نظيفة بدون ظل/حدود */
.navbar{
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-inline: 16px;

  /* نخلي خلف الناف بار فل وِدث أبيض عشان ما يبين أي خطوط على اليمين/اليسار */
  background: transparent;
}
.navbar::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;   /* يملأ العرض كله بالأبيض خلف الكارد */
  z-index: 0;         /* تحت محتوى الناف */
}

.navbar > .container{
  position: relative;
  z-index: 1;          /* فوق الـ ::before */
  max-width: 1200px;   /* الكارد بالنص */
  margin-inline: auto;
  background: #fff;

  /* بدون شادو ولا بوردر */
  border: none;
  box-shadow: none;

  /* زوايا من تحت فقط */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;

  padding-block: 10px;
  padding-inline: 20px;
}

/* موبايل: فل وِدث بدون كارد */
@media (max-width: 768px){
  .navbar{ padding-inline: 0; }
  .navbar::before{ background: #fff; }
  .navbar > .container{
    max-width: none;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    border-bottom: 1px solid #F3F4F6; /* خط خفيف للموبايل فقط (احذفها لو مش بدك) */
    padding-inline: 16px;
  }
}


/* ============ Tokens ============ */
:root{
  --about-bg: #F9FAFB;       /* خلفية السيكشن */
  --about-text: #111827;
  --about-muted:#4B5563;
  --about-border:#E5E7EB;
  --about-primary:#7C3AED;   /* بنفسجي العنوان */
  --about-shadow:0 18px 36px rgba(0,0,0,.08);
  --container:1200px;
}

/* أساسيات خفيفة */
body{color:var(--about-text);line-height:1.6;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* ============ About Intro Section ============ */
.about-intro{
  background:var(--about-bg);
  padding:36px 0 28px;
}

/* الشريط العلوي: شعار فوق العنوان — المحاذاة حسب dir */
.about-intro__top{
  display:flex;
  flex-direction:column;
  gap:1px;                 /* مسافة بين الشعار والعنوان */
  margin-bottom:12px;
}



/* عنوان بنفسجي */
.about-heading{
  color:var(--about-primary);
  font-weight:700;
  font-size:28px;
  margin:0;
}

/* محاذاة ديناميكية حسب اتجاه الصفحة */
body[dir="ltr"] .about-intro__top{ align-items:flex-end; }   /* إنجليزي: يمين */
body[dir="ltr"] .about-heading{ text-align:right; }

body[dir="rtl"] .about-intro__top{ align-items:flex-start; } /* عربي: يسار */
body[dir="rtl"] .about-heading{ text-align:left; }

/* شبكة المحتوى: صورة يسار / نص يمين */
.about-intro__grid{
  display:grid; align-items:center; gap:32px;
  grid-template-columns: 1.1fr 1fr; /* الصورة أوسع قليلاً */
}

/* إطار الصورة — بسيط بلا أوفرلاي */
.about-image-frame{
  width:100%; border:1px solid var(--about-border);
  border-radius:16px; background:#fff; overflow:hidden;
  box-shadow:var(--about-shadow);
}
.about-image-frame img{ width:100%; height:auto; display:block; object-fit:cover; }

/* النص */
.about-copy p{ margin:6px 0; color:var(--about-muted); font-size:16.5px; }
.t-strong{ font-weight:700; color:#1F2937; }

/* ============ What We Aim To Achieve ============ */
.about-aims{ background:#fff; padding:28px 0 56px; }
.aims-title{ text-align:center; font-size:24px; margin:0 0 18px; }
.aims-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.aim-card{
  border:1px solid var(--about-border); border-radius:16px;
  background:#fff; padding:18px; box-shadow:var(--about-shadow);
}
.aim-card h4{ margin:0 0 6px; font-size:18px; }
.aim-card p{ margin:0; color:var(--about-muted); font-size:15.5px; }

/* ============ Responsive ============ */
@media (max-width: 992px){
  .about-intro__grid{ grid-template-columns:1fr; gap:20px; }
  .about-heading{ font-size:26px; }
}
@media (max-width: 768px){
  .about-heading{ font-size:24px; }
}
    

/* ---------- ABOUT TOP OVERRIDES (put at the very end) ---------- */

/* الشعار فوق العنوان – ثابت 55px */
.about-intro__top{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
  align-items:flex-end !important;  /* LTR = يمين / RTL = يسار (فيزيائي) */
}
.about-kicker-img{ height:55px; width:auto; display:block; }

/* لون وحجم العنوان كالمعتاد */
.about-intro .about-heading{
  color:var(--about-primary, #7C3AED);
  font-weight:500;
  font-size:28px;
  margin:0;
}

/* محاذاة العنوان بالاتجاه المطلوب */
html[dir="ltr"] .about-intro .about-heading{ text-align:right !important; } /* إنجليزي: يمين */
html[dir="rtl"] .about-intro .about-heading{ text-align:left  !important; } /* عربي: يسار */


/* === Nudge title only when page is Arabic (RTL) === */
/* غيّر القيمة حسب ما بدك (مثال: 12px أو 24px) */
:root{
  --about-title-shift-rtl: 140px;  /* 0 = بدون إزاحة */
}

html[dir="rtl"] .about-intro .about-heading{
  position: relative;
  transform: translateX(var(--about-title-shift-rtl));
  will-change: transform;
}


/* صفر أي تزيين حوالين الصورة */
.about-image-frame{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;   /* ما يقصّ الحواف */
  padding: 0 !important;
}

.about-image-frame img{
  display: block;      /* يشيل فراغ الـ inline-img */
  width: 100%;
  height: auto;
  border: 0;
  box-shadow: none !important;
  background: transparent !important;
  filter: none !important;
}


body[dir="rtl"] {
  font-family: 'Tajawal', 'Noto Sans Arabic', sans-serif;
}


/* ===== Aims section tweaks ===== */
.aims-title{
  /* أكبر شوي + بين البولد والعادي */
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 325;              /* مش بولد */
  line-height: 1.25;
  text-align: center;
  margin: 0 0 22px;
  letter-spacing: .2px;
}

.aims-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

.aim-card{
  background: #fff;
  border: 1px solid var(--about-border, #E5E7EB);
  border-radius: 16px;
  padding: 22px 18px;
  box-shadow: var(--about-shadow, 0 18px 36px rgba(0,0,0,.08));
  text-align: center;            /* كل المحتوى بالسنتر RTL/LTR */
}

/* أيقونة دائرية خفيفة */
.aim-icon{
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  border-radius: 12px;
  background: #EEF2FF;
  color: #4F46E5;
  display: grid; place-items: center;
}
.aim-icon svg{ width: 24px; height: 24px; display:block }

/* عناوين ونصوص */
.aim-card__title{
  font-size: 18px;
  font-weight: 700;
  margin: 4px 0 6px;
}
.aim-card__desc{
  font-size: 15.5px;
  color: var(--about-muted, #4B5563);
  margin: 0;
}

/* Responsive */
@media (max-width: 992px){
  .aims-grid{ grid-template-columns: 1fr; }
  .aims-title{ margin-bottom: 18px; }
}
/* === Aim icon gradient + white glyph === */
.aim-icon{
  background: linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%) !important;
  color: #fff !important;         /* لـ <i> من Font Awesome */
}

/* دعم لكل من FA <i> و SVG إن وُجد */
.aim-icon i,
.aim-icon svg{
  color: #fff !important;
  fill: #fff !important;
  width: 24px; height: 18px;      /* نفس المقاس السابق */
  display: block;
}

/* Make the aims title look wider (not compressed) */
.aims-title{
  /* حجم أكبر شوي */
  font-size: clamp(28px, 3.6vw, 40px) !important;
  font-weight:320 !important;
  line-height: 1.15;

  /* زيادة عرض الحروف والمسافات */
  letter-spacing: 0.02em;          /* tracking خفيف */
  font-kerning: normal;
  text-rendering: optimizeLegibility;

  /* لو الخط عندك Variable (مثل Inter)، فعّل محور العرض */
  font-stretch: 110%;              /* CSS standard */
  font-variation-settings: "wdth" 110, "wght" 500; /* fallback لـ variable fonts */

  /* موازنة تقطيع السطر لو احتاج */
  text-wrap: balance;
}

/* اختياري: لو بدك عرض أكبر شوي */
@supports not (font-stretch: 110%) {
  /* fallback خفيف جدا للمتصفحات القديمة */
  .aims-title { letter-spacing: 0.03em; }
}
/* Mobile-only: center the about heading in both LTR & RTL and cancel the RTL shift */
@media (max-width: 768px) {
  .about-intro__top {
    align-items: center !important; /* الشعار + العنوان بالنص */
  }

  .about-intro .about-heading {
    text-align: center !important;  /* توسيط العنوان */
    transform: none !important;     /* إلغاء translateX اللي بتسبب القص */
    margin-inline: auto;            /* للتأكد من التوسيط */
    display: block;                 /* سلوك متّسق */
  }
}
/* ===== Mobile fix (put this at the very end of about.css) ===== */
@media (max-width: 768px) {
  /* سنتر الشريط العلوي */
  body[dir="rtl"]  .about-intro__top,
  body[dir="ltr"]  .about-intro__top {
    align-items: center !important;
  }

  /* سنتر العنوان للغتين + إلغاء أي إزاحة */
  body[dir="rtl"] .about-intro .about-heading,
  body[dir="ltr"] .about-intro .about-heading {
    text-align: center !important;
    transform: none !important;      /* يلغي translateX */
    margin-inline: auto !important;
    display: block !important;
  }

  /* خلي العربي يلتف من اليمين بشكل سليم */
  body[dir="rtl"] .about-intro .about-heading {
    direction: rtl !important;
    unicode-bidi: isolate !important;
  }
}


/* Desktop LTR: align the purple title with the text column */
@media (min-width: 992px) {
  /* حط العنوان بعرض عمود النص وادفعه جهة عمود النص */
  html[dir="ltr"] .about-intro__top{
    max-width: 620px;         /* عدّل الرقم حسب عرض عمود النص عندك */
    margin-left: auto;        /* يدفع البلوك لجهة عمود النص (يمين الـcontainer) */
    align-items: flex-start !important;
  }

  html[dir="ltr"] .about-intro .about-heading{
    position: static !important;
    transform: none !important;
    display: inline-block !important;
    text-align: left !important;
    margin: 0 0 8px 0 !important;
    vertical-align: baseline !important;
  }
}
/* Desktop English: move the purple title slightly to the right */
@media (min-width: 992px) {
  html[dir="ltr"] .about-intro .about-heading {
    position: relative !important;
    left: 82px !important;   /* زيد أو قلل الرقم حسب الحاجة (مثل 40px أو 80px) */
    transform: none !important;
    text-align: left !important;
  }
}