: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: 500;
      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: auto
  }

  /* ============ 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: #C4B5FD;
  }

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

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

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

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

  /* أزرق فاتح */
  .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;
      }
  }
/* ============ Timeline Base ============ */
.timeline{
  --pair-gap: 100px;            /* ← فراغ ثابت بين كل صفّين */
  --pair-gap-mobile: 32px;     /* ← (تعليق) فراغ رأسي بين الصفوف على الموبايل */
  --col-gap: 28px;

  /* (تعليق) تحكم عام بحجم الصور الافتراضي */
  --media-w: 60%;

  /* (تعليق مهم) مسافة الصور عن العمود (السطر بالنص):
     - اليمين: للصفوف اللي فيها الصورة يمين (leftCard = card يسار / media يمين)
     - اليسار: للصفوف اللي فيها الصورة يسار (rightCard = card يمين / media يسار)
     سالب = أقرب للعمود، موجب = أبعد */
  --media-shift-right: 25px;   /* ← صورة اليمين */
  --media-shift-left:  220px;  /* ← صورة اليسار */

  /* (تعليق مهم) مسافة الكروت عن العمود بنفس منطق الصور:
     - الكارد يمين (صفوف .leftCard): من --card-shift-right
     - الكارد يسار (صفوف .rightCard): من --card-shift-left */
  --card-shift-right: 30px;    /* ← كارد العمود اليمين */
  --card-shift-left:  25px;    /* ← كارد العمود اليسار */

  --media-radius: 16px;
  --card-radius: 16px;
  --shadow-card: 0 8px 30px rgba(0,0,0,.08);
  --shadow-media: 0 8px 30px rgba(0,0,0,.06);
  --text-dark: #0f172a;
  --text-gray: #475569;
  --gradient: linear-gradient(90deg,#6366f1,#8b5cf6);
  --line: linear-gradient(180deg,#c4b5fd 0%, #93c5fd 50%, #5eead4 100%);
  background:#f9fafc; padding:68px 0;
}
.tl-container{ width:min(1120px, 92vw); margin-inline:auto; }
.tl-header{ text-align:center; margin-bottom:44px; }
.tl-title{
  font: 700 34px/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color:var(--text-dark); display:inline-block; position:relative; margin:0 0 16px;
}
.tl-title::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; width:72px; height:4px; background:var(--gradient); border-radius:2px;
}
.tl-subtitle{
  margin:0 auto; max-width:760px; font: 400 18px/1.6 Inter, system-ui;
  color:var(--text-gray);
}

/* ============ Grid wrapper + center line ============ */
.tl-wrapper{ position:relative; }
.tl-centerline{
  position:absolute; inset-block:0; left:50%; transform:translateX(-50%);
  width:3px; background:var(--line); border-radius:999px; opacity:.95;
  box-shadow:0 0 0 2px rgba(0,0,0,0.02) inset;
}

/* ============ Row ============ */
.tl-row{
  display:grid;
  grid-template-columns: 1fr 1fr;     /* عمودين متساويين */
  align-items:center;                 /* الكارد والصورة نفس المستوى أفقيًا */
  column-gap: var(--col-gap);
  row-gap: 0;
  margin-bottom: var(--pair-gap);     /* فراغ عمودي متساوٍ */

  /* افتراضيات قابلة للتخصيص لكل صف (تقدر تغيّرها لكل #nodeX لو حبيت) */
  --media-w-row: var(--media-w);

  /* (تعليق) إعدادات الأنيميشن/الستاجر */
  --delay: .00s;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.tl-row.inview{
  opacity: 1;
  transform: none;
}

/* ترتيب الأعمدة */
.tl-row.leftCard  > .tl-card { grid-column: 1; }
.tl-row.leftCard  > .tl-media{ grid-column: 2; }
.tl-row.rightCard > .tl-media{ grid-column: 1; }
.tl-row.rightCard > .tl-card { grid-column: 2; }

/* ============ Card ============ */
.tl-card{
  background:#fff;
  border-radius: var(--card-radius);
  padding:24px;
  box-shadow: var(--shadow-card);
  /* (تعليق) ستاجر: الكارد يظهر بعد الصورة بقليل */
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--delay, .00s) + .12s);
}
.tl-row.inview .tl-card{ opacity:1; transform:none; }

.tl-icon{
  width:52px; height:52px; border-radius:12px; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  margin-bottom:12px; background: var(--theme-gradient, linear-gradient(90deg,#8B5CF6,#C084FC));
}
.tl-card-title{
  margin:0 0 10px; color:var(--text-dark);
  font:600 22px/1.35 Inter, system-ui;
}
.tl-card-desc{
  margin:0 0 14px; color:var(--text-gray);
  font:400 15.5px/1.6 Inter, system-ui;
}
.tl-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tl-tag{
  padding:6px 10px; border-radius:20px; font:500 13.5px/1 Inter, system-ui;
  background: var(--tag-bg,#F3E8FF); color: var(--tag-color,#6D28D9);
}

/* ============ Media ============ */
.tl-media{
  border-radius: var(--media-radius);
  overflow:hidden; background:#E5E7EB; box-shadow: var(--shadow-media);
  aspect-ratio: 16 / 10;               /* نسبة ثابتة */
  width: var(--media-w-row);           /* ← حجم الصورة (تقدر تغيره على #nodeX) */
  /* (تعليق) ستاجر: الصورة تظهر أولاً */
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--delay, .00s);
}
.tl-row.inview .tl-media{ opacity:1; transform:none; }

/* (تعليق مهم) تمركز الصورة وقربها/بعدها من العمود من متغيّرين موحّدين:
   --media-shift-right لصور اليمين  |  --media-shift-left لصور اليسار */
.tl-row.leftCard  .tl-media{ justify-self:start; margin-inline-start: var(--media-shift-right); }
.tl-row.rightCard .tl-media{ justify-self:end;   margin-inline-end:   var(--media-shift-left); }

/* (تعليق مهم) تمركز الكارد وقربه/بعده من العمود من متغيّرين موحّدين:
   --card-shift-right لكروت العمود اليمين | --card-shift-left لكروت العمود اليسار */
.tl-row.leftCard  .tl-card{ justify-self:end;   margin-inline-end:   var(--card-shift-right); }
.tl-row.rightCard .tl-card{ justify-self:start; margin-inline-start: var(--card-shift-left); }

.tl-media > img{
  width:100%; height:100%; object-fit:cover; display:block; opacity:.9;
  transition:opacity .25s ease;
}
.tl-media:hover > img{ opacity:1; }

/* ============ Themes ============ */
.theme-amber { --theme-gradient:linear-gradient(90deg,#f59e0b 0%, #fbbf24 100%); --tag-bg:#FFF7E6; --tag-color:#b45309; }
.theme-purple{ --theme-gradient:linear-gradient(90deg,#8B5CF6 0%, #C084FC 100%); --tag-bg:#F3E8FF; --tag-color:#6D28D9; }
.theme-teal  { --theme-gradient:linear-gradient(90deg,#14b8a6 0%, #2dd4bf 100%); --tag-bg:#E6FFFB; --tag-color:#0f766e; }
.theme-rose  { --theme-gradient:linear-gradient(90deg,#60A5FA 0%, #818CF8 100%); --tag-bg:#E0E7FF; --tag-color:#1D4ED8; }
.theme-slate { --theme-gradient:linear-gradient(90deg,#818CF8 0%, #C084FC 100%); --tag-bg:#E0E7FF; --tag-color:#7E22CE; }

/* ============ Responsive ============ */
@media (max-width: 900px){
  /* Grid: عمود واحد وتوسيط عام */
  .timeline .tl-row{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    row-gap: 12px;
    margin-bottom: var(--pair-gap-mobile);
    /* صفر أي إزاحات عالموبايل */
    --media-shift-left: 0;
    --media-shift-right: 0;
    --card-shift-left: 0;
    --card-shift-right: 0;
  }

  /* اخفي خط النص والصور */
  .timeline .tl-centerline{ display:none !important; }
  .timeline .tl-media{ display:none !important; }

  /* الكارد يأخذ العمود الوحيد ويتوسّط */
  .timeline .tl-row > .tl-card{
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(620px, 92vw);
    max-width: 100%;
    margin: 0 auto !important;
  }

  /* ألغِ أي هوامش اتجاهية موروثة */
  .timeline .tl-row.leftCard  .tl-card,
  .timeline .tl-row.rightCard .tl-card{
    margin-inline-start: 0 !important;
    margin-inline-end:   0 !important;
  }
}


  /* ================= 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;
  }
}


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