/* ========== Reset & Base ========== */
/* 1. استدعاء الخط العربي (Tajawal) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

/* 2. تنسيقات اللغة العربية (RTL) */
[dir="rtl"] body {
  font-family: 'Cairo', sans-serif;
  /* تغيير الخط للعربي */
  direction: rtl;
  text-align: right;
}

/* عكس الهوامش في القوائم عند التحويل للعربي */
[dir="rtl"] .navbar-list {
  flex-direction: row-reverse;
  /* عكس ترتيب القائمة */
}

[dir="rtl"] .hero-title,
[dir="rtl"] .section-title,
[dir="rtl"] .section-text,
[dir="rtl"] .hero-text {
  text-align: right;
}

.h2.section-title,
.hero-title,
.logo,
.btn {
  font-family: 'Cairo', sans-serif;
}

/* ضبط العناصر العائمة في العربي */
[dir="rtl"] .abs-icon-1 {
  left: auto;
  right: -4%;
}

[dir="rtl"] .abs-icon-2 {
  left: auto;
  right: -10%;
}

[dir="rtl"] .elem-1 {
  left: auto;
  right: -10%;
}

/* (يمكنك ضبط باقي العناصر بنفس المنطق: عكس left و right) */

/* تنسيق زر اللغة */
.lang-btn {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 5px 15px;
  border-radius: 20px;
  cursor: pointer;
  font-weight: bold;
  margin-left: 15px;
  transition: 0.3s;
}

.lang-btn:hover {
  background: var(--accent);
  color: #fff;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: radial-gradient(circle at top, #141b3f 0, #050816 45%, #02010a 100%);
  color: #f9fafb;
  line-height: 1.7;
}

/* Smooth section spacing */
.section {
  padding: 6rem 1.5rem;
}

.container {
  width: min(1120px, 100%);
  margin-inline: auto;
}

/* Links & Buttons Base */
a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  /* هذا السطر مهم جداً للحفاظ على نسبة العرض للارتفاع */
  display: block;
}

/* Typography helpers */
.h2.section-title {
  font-family: "Cairo", system-ui, sans-serif;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.section-subtitle {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}

.section-text {
  color: #e5e7eb;
  max-width: 620px;
  font-size: 0.95rem;
}

/* Accent variables */
:root {
  --accent: #6366f1;
  --accent-soft: rgba(99, 102, 241, 0.14);
  --accent-strong: rgba(129, 140, 248, 0.2);
  --card-bg: rgba(15, 23, 42, 0.9);
  --border-soft: rgba(148, 163, 184, 0.2);
  --text-muted: #9ca3af;
}

/* ========== Header & Navbar ========== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: linear-gradient(to bottom,
      rgba(15, 23, 42, 0.95),
      rgba(15, 23, 42, 0.75),
      transparent);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
}

.logo {
  margin-right: 50px;
  font-family: "Cairo", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e5e7eb;
}

/* Nav toggle (mobile) */
.nav-toggle-btn {
  border: none;
  background: transparent;
  color: #e5e7eb;
  font-size: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle-btn .close-icon {
  display: none;
}

/* Desktop navbar */
.navbar {
  display: none;
}

.navbar-list {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.navbar-link {
  font-size: 0.92rem;
  color: var(--text-muted);
  position: relative;
  padding-block: 0.25rem;
  transition: color 0.2s ease;
}

.navbar-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #a855f7, #6366f1, #22d3ee);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.2s ease-out;
}

.navbar-link:hover,
.navbar-link:focus-visible {
  color: #f9fafb;
}

.navbar-link:hover::after,
.navbar-link:focus-visible::after {
  transform: scaleX(1);
}

/* Primary button */
.btn,
.btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  font-weight: 500;
}

.btn.btn-primary,
.btn.btn-primary.blue {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #f9fafb;
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.4);
}

.btn.btn-primary:hover,
.btn.btn-primary.blue:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(79, 70, 229, 0.6);
}

.btn {
  background: transparent;
  border-color: rgba(148, 163, 184, 0.4);
  color: #e5e7eb;
}

.btn:hover {
  border-color: var(--accent);
  background: rgba(15, 23, 42, 0.8);
}

/* Back-to-top */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  color: #e5e7eb;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.25s ease,
    background 0.2s ease;
}

.back-to-top:hover {
  background: rgba(15, 23, 42, 0.98);
}

.back-to-top.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ========== Hero ========== */

.hero {
  padding-top: 6rem;
  padding-bottom: 5rem;
}

.hero .container {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.hero-banner {
  position: relative;
  max-width: 460px;
  margin-inline: auto;
}

.hero-banner .img-cover {
  border-radius: 1.75rem;
  box-shadow:
    0 30px 60px rgba(15, 23, 42, 0.95),
    0 0 0 1px rgba(148, 163, 184, 0.15);
  object-fit: cover;
}

/* توحيد حجم الصور الشخصية في الهيدر وقسم عني */
.hero-banner .img-cover,
.about-banner .img-cover {
  width: 100%;
  height: 500px;
  /* تحديد ارتفاع ثابت للصور */
  object-fit: cover;
  /* قص الصورة لتناسب الإطار دون تمطيط */
  object-position: center top;
  /* التركيز على الجزء العلوي (الوجه) */
}

.about-banner .abs-img {
  position: absolute;
  width: 50%;
  /* الحجم بالنسبة للأب */
  height: auto;
  /* الحفاظ على الأبعاد */
  border-radius: 1.3rem;
  right: -8%;
  bottom: -8%;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  /* إضافة ظل لتمييزها */
}

/* تعديل للصاشات الصغيرة */
@media (max-width: 768px) {

  .hero-banner .img-cover,
  .about-banner .img-cover {
    height: 400px;
    /* ارتفاع أقل للموبايل */
  }
}

/* Floating elements */
.elem {
  position: absolute;
  padding: 0.75rem 1rem;
  border-radius: 1.2rem;
  backdrop-filter: blur(18px);
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.85);
  font-size: 0.7rem;
  min-width: 130px;
}

.elem-title {
  font-weight: 700;
  font-size: 1.6rem;
}

.elem-text {
  color: var(--text-muted);
}

.elem-1 {
  top: 10%;
  left: -10%;
}

.elem-2 {
  bottom: 12%;
  right: -10%;
}

.elem-3 {
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  color: #ecfdf5;
  box-shadow: 0 16px 30px rgba(34, 197, 94, 0.5);
}

/* Hero content */
.hero-content {
  max-width: 560px;
}

.hero-title {
  font-family: "Cairo", system-ui, sans-serif;
  font-size: clamp(2.1rem, 4.5vw, 2.8rem);
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-title span {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-title strong {
  display: inline-block;
}

.hero-text {
  color: #d1d5db;
  font-size: 0.94rem;
  margin-bottom: 1.6rem;
}

.hero-text b {
  color: #f9fafb;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ========== About ========== */

.about {
  padding-top: 3rem;
}

.about .container {
  display: grid;
  gap: 3rem;
  align-items: center;
}

.about-banner {
  position: relative;
  max-width: 430px;
  margin-inline: auto;
}

.about-banner .img-cover {
  border-radius: 1.5rem;
  object-fit: cover;
  box-shadow:
    0 24px 50px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(148, 163, 184, 0.2);
}

.about-banner .abs-img {
  position: absolute;
  width: 50%;
  border-radius: 1.3rem;
  right: -8%;
  bottom: -8%;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.abs-icon {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  color: #e5e7eb;
}

.abs-icon-1 {
  top: 10%;
  left: -4%;
}

.abs-icon-2 {
  bottom: 45%;
  left: -10%;
}

.abs-icon-3 {
  bottom: -5%;
  /* تحريك الأيقونة للأسفل لتكون على طرف الصورة */
  right: -5%;
  /* تحريك الأيقونة لليمين قليلاً */
}

/* About text */
.about-content .section-text+.section-text {
  margin-top: 1rem;
}

/* ========== Portfolio ========== */

.portfolio {
  padding-top: 3rem;
}

.portfolio .section-text {
  margin-bottom: 2rem;
}

.portfolio-list {
  display: grid;
  gap: 1.6rem;
}

.portfolio-card {
  position: relative;
  border-radius: 1.3rem;
  overflow: hidden;
  /* min-height: 220px;  <-- الغي هذا السطر القديم */

  /* استخدم aspect-ratio لتوحيد الشكل (عرض 4 مقابل طول 3) */
  aspect-ratio: 4 / 3;
  width: 100%;
  /* تأكد أنها تأخذ عرض العمود */

  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  isolation: isolate;
  transform: translateY(0);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.portfolio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.1), transparent 55%),
    linear-gradient(to top, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.5));
  z-index: -1;
}

.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.95);
  border-color: rgba(129, 140, 248, 0.9);
}

.card-content {
  padding: 1.4rem 1.4rem 1.6rem;
}

.card-subtitle {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.card-title {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* ========== Skills ========== */

.skills {
  padding-top: 3rem;
}

.skills .section-text {
  margin-bottom: 2rem;
}

.skills-list {
  display: grid;
  gap: 1rem;
}

.skills-item {
  background: var(--card-bg);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-soft);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.85);
}

.skills-item .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skills-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.skills-data {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Progress bar */
.skills-progress-box {
  margin-top: 0.6rem;
  width: 100%;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(31, 41, 55, 0.9);
  overflow: hidden;
}

.skills-progress {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22d3ee, #6366f1, #a855f7);
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.6);
}

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

.contact {
  padding-top: 3rem;
}

.contact-card {
  background: var(--card-bg);
  border-radius: 1.6rem;
  border: 1px solid var(--border-soft);
  padding: 2.1rem 1.6rem;
  box-shadow: 0 26px 50px rgba(15, 23, 42, 0.95);
}

.contact-card .card-subtitle {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.contact-card .section-title {
  margin-bottom: 1.6rem;
}

.contact .wrapper {
  display: grid;
  gap: 2rem;
}

/* Form */
.contact-form {
  display: grid;
  gap: 0.9rem;
}

.contact-input {
  width: 100%;
  border-radius: 0.9rem;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: rgba(15, 23, 42, 0.8);
  padding: 0.75rem 0.9rem;
  color: #f9fafb;
  font-size: 0.9rem;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.contact-input::placeholder {
  color: #6b7280;
}

.contact-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.6);
  background: rgba(15, 23, 42, 0.98);
}

textarea.contact-input {
  min-height: 150px;
  resize: vertical;
}

/* Submit button */
.btn-submit {
  border-radius: 999px;
  border: none;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, #4f46e5, #0ea5e9);
  color: #f9fafb;
  font-weight: 500;
  font-size: 0.92rem;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.22s ease,
    opacity 0.16s ease;
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.6);
}

.btn-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.7);
}

/* Contact info list */
.contact-list {
  display: grid;
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: #e5e7eb;
}

.contact-item-title {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}

.contact-item-link {
  font-size: 0.86rem;
  color: var(--text-muted);
}

/* ========== Blog (thank you) ========== */

.blog {
  text-align: center;
}

.blog .section-title {
  margin-bottom: 0;
}

/* ========== Footer ========== */

.footer {
  border-top: 1px solid rgba(31, 41, 55, 0.9);
  background: #020617;
  padding: 1.3rem 1.5rem 1.6rem;
  margin-top: 3rem;
}

.footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: space-between;
}

.copyright {
  font-size: 0.8rem;
  color: #6b7280;
}

.copyright-link {
  color: #e5e7eb;
  font-weight: 500;
}

.footer-list {
  display: flex;
  gap: 1.2rem;
}

.footer-link {
  font-size: 0.8rem;
  color: #9ca3af;
}

.footer-link:hover {
  color: #e5e7eb;
}

/* ========== Responsive ========== */

/* >= 768px */
@media (min-width: 768px) {
  .hero .container {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  }

  .about .container {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.2fr);
  }

  .portfolio-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .skills-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact .wrapper {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: flex-start;
  }

  .header .container {
    padding-block: 1rem;
  }

  .nav-toggle-btn {
    display: none;
  }

  .navbar {
    display: block;
  }
}

/* >= 1024px */
@media (min-width: 1024px) {
  .section {
    padding-inline: 2rem;
  }

  .hero {
    padding-top: 7rem;
    padding-bottom: 6rem;
  }

  .hero-banner {
    max-width: 500px;
  }

  .portfolio-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .skills-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Small screens tweaks */
@media (max-width: 767.98px) {
  .header .container {
    padding-inline: 1rem;
  }

  .navbar {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: rgba(15, 23, 42, 0.98);
    border-bottom: 1px solid rgba(55, 65, 81, 0.9);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 0.18s ease-out;
  }

  .navbar.active {
    transform: scaleY(1);
  }

  .navbar-list {
    flex-direction: column;
    align-items: flex-start;
    padding: 0.8rem 1.5rem 1.2rem;
    gap: 0.8rem;
  }

  .nav-toggle-btn .menu-icon {
    display: block;
  }

  .nav-toggle-btn .close-icon {
    display: none;
  }

  .nav-toggle-btn[aria-expanded="true"] .menu-icon {
    display: none;
  }

  .nav-toggle-btn[aria-expanded="true"] .close-icon {
    display: block;
  }

  .hero {
    padding-top: 5.5rem;
  }

  .elem-1 {
    left: 4%;
  }

  .elem-2 {
    right: 4%;
  }

  .elem-3 {
    right: 6%;
  }
}

@media (max-width: 768px) {
  .navbar {
    background: #0f172a;
    /* لون خلفية داكن */
    z-index: 9999;
    /* لضمان ظهورها فوق كل شيء */
    padding-bottom: 20px;
    border-bottom: 2px solid var(--accent);
  }
}

/* =================================================
   إصلاح وتجميل قسم التواصل (Contact Section Fix)
   ================================================= */

/* 1. التنسيق العام للحاوية (للشاشات الكبيرة) */
.contact .wrapper {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  /* الفورم يأخذ مساحة أكبر من المعلومات */
  gap: 4rem;
  align-items: flex-start;
}

/* 2. تحسين حقول الإدخال */
.contact-input {
  width: 100%;
  /* تملأ المساحة المتاحة */
  margin-bottom: 1.5rem;
  /* مسافة واضحة بين الحقول */
  background: rgba(30, 41, 59, 0.7);
  /* خلفية داكنة شفافة */
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.contact-input:focus {
  background: rgba(30, 41, 59, 1);
  border-color: var(--accent);
}

/* 3. تنسيق خاص للموبايل والشاشات الصغيرة */
@media (max-width: 991px) {
  .contact .wrapper {
    grid-template-columns: 1fr;
    /* عمود واحد فقط */
    gap: 3rem;
  }

  /* ترتيب العناصر في الموبايل: الفورم أولاً ثم المعلومات */
  .contact-form {
    order: 1;
  }

  .contact-list {
    order: 2;
    margin-top: 1rem;
  }
}

/* 4. إصلاح اتجاهات اللغة العربية (RTL Fixes) */
[dir="rtl"] .contact .wrapper {
  text-align: right;
}

[dir="rtl"] .contact-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

[dir="rtl"] .contact-item {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  /* الأيقونة بجانب النص */
  gap: 15px;
}

/* ضبط مكان الأيقونة في العربي */
[dir="rtl"] .contact-icon {
  margin-left: 0;
  flex-shrink: 0;
  /* منع انكماش الأيقونة */
}

/* تنسيق زر الإرسال ليكون ممتلئاً */
.btn-submit {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 10px;
}

/* تنسيق رسالة النجاح/الفشل لتظهر بشكل جميل */
#my-form-status {
  margin-top: 15px;
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  font-weight: bold;
  display: none;
  /* مخفي افتراضياً */
}

#my-form-status:not(:empty) {
  display: block;
  /* يظهر فقط عند وجود نص */
}

/* =========================================
   إصلاح هوامش الشاشة للموبايل (Mobile Spacing Fix)
   ========================================= */

/* 1. إضافة مسافة آمنة لجميع المحتويات على الموبايل */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding-left: 20px !important;
    /* مسافة من اليسار */
    padding-right: 20px !important;
    /* مسافة من اليمين */
  }

  /* 2. تحسين خاص للنصوص الطويلة لتكون مقروءة */
  .hero-text,
  .section-text,
  .about-text {
    max-width: 100%;
    /* ضمان عدم خروج النص */
    line-height: 1.6;
    /* تحسين تباعد الأسطر للقراءة */
  }

  /* 3. إصلاح الهيدر والنافبار في الموبايل */
  .header .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 4. تعديل بسيط لقسم التواصل لضمان عدم التصاقه بالحواف */
.contact-card {
  padding: 2rem 1.5rem;
  /* تقليل الحشو الداخلي للكارت قليلاً في الموبايل */
}

/* =================================================
   إصلاح القائمة (Navbar) في الوضع العربي
   ================================================= */

/* 1. في شاشات الكمبيوتر فقط: نعكس الترتيب ليكون من اليمين لليسار */
@media (min-width: 768px) {
  [dir="rtl"] .navbar-list {
    flex-direction: row-reverse;
  }

  /* إبعاد العناصر عن بعضها بشكل صحيح في الكمبيوتر */
  [dir="rtl"] .navbar-list {
    gap: 1.5rem;
  }
}

/* 2. في الموبايل: إجبار القائمة أن تكون عمودية (تحت بعض) */
@media (max-width: 767.98px) {
  [dir="rtl"] .navbar-list {
    flex-direction: column !important;
    /* هام جداً: منع ظهورها بجانب بعض */
    align-items: flex-start !important;
    /* محاذاة لليمين (بداية السطر العربي) */
    padding-right: 1.5rem;
    /* مسافة من اليمين */
    width: 100%;
  }

  /* ضبط محاذاة الروابط داخل القائمة */
  [dir="rtl"] .navbar-link {
    text-align: right;
    width: 100%;
    display: block;
  }

  /* ضبط زر تحميل السيرة الذاتية في الموبايل */
  [dir="rtl"] .navbar .btn {
    margin-right: 0;
    margin-top: 10px;
    width: 100%;
    /* جعل الزر بعرض القائمة */
  }
}

/* =========================================
   إصلاح خروج المحتوى عن المستطيل في الموبايل
   ========================================= */

@media (max-width: 991px) {
  .contact-card {
    height: auto !important;
    /* إجبار الكارت على التمدد حسب المحتوى */
    min-height: 100% !important;
    padding-bottom: 3rem !important;
    /* مسافة إضافية في الأسفل */
    display: block !important;
    /* لضمان احتواء العناصر */
  }

  .contact .wrapper {
    display: flex !important;
    /* استخدام Flexbox بدلاً من Grid في الموبايل */
    flex-direction: column !important;
    /* ترتيب العناصر تحت بعض */
    gap: 2rem !important;
    /* مسافة بين الفورم ومعلومات الاتصال */
  }

  /* التأكد من أن الفورم لا يخرج من العرض */
  .contact-form {
    width: 100% !important;
  }
}
/* ========== Education Section ========== */

.education {
  padding-top: 3rem;
}

.education-list {
  display: grid;
  gap: 2rem;
}

.education-card {
  background: var(--card-bg);
  border-radius: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--border-soft);
  display: flex;
  gap: 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  align-items: flex-start;
}

.education-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.8);
  border-color: var(--accent);
}

.card-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  border: 1px solid var(--accent-soft);
  flex-shrink: 0; /* منع الأيقونة من الانكماش */
}

.education-card .year {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.education-card .card-place {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

.education-card .card-text {
  color: #d1d5db;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .education-card {
    flex-direction: column; /* الأيقونة فوق النص في الموبايل */
    gap: 1rem;
  }
}

@media (min-width: 768px) {
  .education-list {
    grid-template-columns: repeat(2, 1fr); /* كارتين بجانب بعض في الشاشات الكبيرة */
  }
}
/* تنسيق الحاوية لتكون إطاراً للصور */
.education-card .card-banner {
  position: relative; /* ضروري لتموضع الصور فوق بعض */
  width: 80px;  /* حجم مناسب */
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--accent);
  box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
  background: #000; /* خلفية سوداء أثناء التبديل */
}

/* تنسيق الصور لتكون فوق بعضها تماماً */
.education-card .card-banner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0; /* مخفي افتراضياً */
  animation: imageFade 12s infinite ease-in-out; /* مدة الدورة الكاملة */
}

/* توقيت ظهور كل صورة (تأخير زمني) */
/* الصورة الأولى تظهر فوراً */
.education-card .card-banner img:nth-child(1) {
  animation-delay: 0s;
}
/* الصورة الثانية تظهر بعد 3 ثواني */
.education-card .card-banner img:nth-child(2) {
  animation-delay: 3s;
}
/* الصورة الثالثة تظهر بعد 6 ثواني */
.education-card .card-banner img:nth-child(3) {
  animation-delay: 6s;
}
/* الصورة الرابعة تظهر بعد 9 ثواني */
.education-card .card-banner img:nth-child(4) {
  animation-delay: 9s;
}

/* تعريف الحركة (الأنيميشن) */
@keyframes imageFade {
  0% { opacity: 0; }
  10% { opacity: 1; z-index: 1; } /* تظهر الصورة */
  25% { opacity: 1; z-index: 1; } /* تبقى ظاهرة لفترة */
  35% { opacity: 0; z-index: 0; } /* تختفي */
  100% { opacity: 0; }
}

/* في الموبايل */
@media (max-width: 768px) {
  .education-card .card-banner {
    width: 70px;
    height: 70px;
  }
}
/* =========================================
   تعديل حجم وشكل صور التعليم (Education Images Fix)
   ========================================= */

.education-card .card-banner {
  position: relative;
  /* 1. تكبير الحجم ليكون واضحاً */
  width: 130px !important; 
  height: 130px !important;
  
  /* 2. منع النص من ضغط الصورة (أهم سطر لحل مشكلة الشكل البيضاوي) */
  flex-shrink: 0 !important;
  
  /* 3. شكل مربع بحواف ناعمة بدلاً من الدائرة الكاملة */
  border-radius: 1rem !important;
  
  overflow: hidden;
  border: 2px solid var(--accent);
  background: #000;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  margin-left: 1.5rem; /* مسافة بين الصورة والنص في العربي */
}

/* في حالة اللغة الإنجليزية نعكس المسافة */
[lang="en"] .education-card .card-banner {
  margin-left: 0;
  margin-right: 1.5rem;
}

/* تنسيق الصور داخل الإطار */
.education-card .card-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* لملء المربع بالكامل */
  object-position: top center; /* التركيز على الوجه في الجزء العلوي */
}

/* تحسين العرض على الموبايل */
@media (max-width: 768px) {
  .education-card {
    flex-direction: column !important; /* الصورة فوق والنص تحت */
    align-items: center !important;
    text-align: center !important;
  }

  .education-card .card-banner {
    width: 150px !important; /* صورة أكبر في الموبايل */
    height: 150px !important;
    margin: 0 0 1.5rem 0 !important; /* مسافة تحت الصورة */
  }
  
  .education-card .card-content {
    width: 100%;
  }

}

/* =========================================
   تنسيق بانر التميز (USP Banner)
   ========================================= */

.usp-box {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 1));
  border: 1px solid var(--accent); /* حدود بلون الموقع */
  border-radius: 20px;
  padding: 3rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.15); /* توهج خفيف */
  position: relative;
  overflow: hidden;
}

/* تأثير جمالي: خط مضيء على الجانب */
.usp-box::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: var(--accent);
}

/* في العربي نعكس مكان الخط */
[dir="rtl"] .usp-box::before {
  left: auto;
  right: 0;
}

.usp-icon-wrapper {
  font-size: 4rem;
  color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.usp-title {
  color: #fff;
  margin-bottom: 10px;
  font-weight: 700;
}

.usp-desc {
  color: #cbd5e1;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* تحسين الموبايل */
@media (max-width: 768px) {
  .usp-box {
    flex-direction: column;
    text-align: center;
    padding: 2rem;
  }

  .usp-box::before {
    width: 100%;
    height: 5px; /* الخط يصبح في الأعلى في الموبايل */
  }
}
/* =========================================
   تنسيق الفوتر وأيقونات التواصل
   ========================================= */

.footer {
  background: var(--bg-color-alt); /* لون مختلف قليلاً عن الخلفية */
  border-top: 1px solid var(--border-soft);
  padding-top: 3rem;
  padding-bottom: 2rem;
  text-align: center;
}

.footer-social {
  margin-bottom: 2rem;
}

.social-title {
  color: var(--text-color);
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.social-list {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.social-link {
  background: var(--card-bg);
  color: var(--text-muted);
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 1.4rem;
  border: 1px solid var(--border-soft);
  transition: 0.3s ease;
}

.social-link:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(99, 102, 241, 0.4);
  border-color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 1.5rem;
}