/* ===========================
   إعدادات عامة للصفحة
   =========================== */
* {
    margin: 0; /* إزالة الهوامش الافتراضية */
    padding: 0; /* إزالة الحشوات الافتراضية */
    box-sizing: border-box; /* حساب الحواف ضمن الحجم */
}

/* ===========================
   خلفية الصفحة + الخط
   =========================== */
body {
    direction: rtl; /* اتجاه عربي */
    font-family: "Trebuchet MS", "Tahoma", sans-serif; /* خط كاجوال قدر الإمكان */
    min-height: 100vh; /* تغطية الشاشة بالكامل */

    /* خلفية بتدرج من أسود إلى أبيض شفاف */
    background: linear-gradient(
        to top ,
        rgba(218, 142, 29, 0.95)20px, /* أعلى الصفحة أسود */
        rgba(209, 60, 40, 0.932)20px /* أسفل الصفحة أبيض شفاف */
    );

    color: #fff; /* لون النص الافتراضي */
}

/* ===========================
   الحاوية العامة
   =========================== */
.page-wrapper {
    padding: 20px 40px; /* مسافات داخلية */
    min-height: 100vh; /* ارتفاع كامل */
    position: relative; /* للسماح بوضع عناصر ثابتة */
}

/* ===========================
   الهيدر (الشعار + أزرار التحكم)
   =========================== */
.main-header {
    display: flex; /* ترتيب أفقي */
    justify-content: space-between; /* الشعار يمين - الأزرار يسار */
    align-items: center; /* محاذاة عمودية */
 height: 200px;
}

/* --- الشعار --- */
.logo-container {
  /* ترتيب داخلي */
    align-items: center; /* محاذاة عمودية */
    margin-left: 200px;
  
}

.logo-image {
    width: 400px; /* حجم الشعار */
   /* تناسب تلقائي */
    object-fit: contain; /* بدون تمدد */
    /* مسار الصورة فارغ في HTML */
 
}

/* --- أزرار اللغة + الثيم --- */
.header-controls {
    display: flex; /* ترتيب أفقي */
    gap: 10px; /* مسافة بين الأزرار */
}

.icon-button {
    background: rgba(255,255,255,0.05); /* خلفية شفافة */
    color: #fff; /* لون النص */
    border: 1px solid rgba(255,255,255,0.2); /* إطار خفيف */
    border-radius: 20px; /* زوايا دائرية */
    padding: 8px 14px; /* حجم الزر */
    cursor: pointer; /* مؤشر يد */
    font-size: 13px; /* حجم الخط */
    transition: 0.3s; /* حركة ناعمة */
     box-shadow: 0 0 30px 1px rgb(22, 18, 18); 
     margin-right: 20px;
}

.icon-button:hover {
    background: rgba(255,255,255,0.15); /* تفتيح عند المرور */
    transform: translateY(-2px); /* حركة خفيفة */
  
}

.theme-toggle {
    font-size: 30px; /* تكبير رمز الهلال */
      box-shadow: 0 0 30px 1px rgba(26, 15, 1, 0.9); 
}

/* ===========================
   القسم الرئيسي (يمين صورة - يسار نص)
   =========================== */
.hero-section {
    display: flex; /* ترتيب أفقي */
    justify-content: space-between; /* توزيع المساحة */
    align-items: center; /* محاذاة عمودية */
    gap: 40px; /* مسافة بين العمودين */
}

/* ===========================
   العمود الأيمن (الصورة الدائرية)
   =========================== */
.right-column {
    width: 35%; /* عرض العمود */
    display: flex;
    flex-direction: column; /* ترتيب عمودي */
    align-items: center; /* محاذاة في المنتصف */
}

/* --- إطار الصورة الدائري --- */
.profile-image-wrapper {
    width: 400px; /* حجم الدائرة */
    height:400px;
    border-radius: 50%; /* دائرة كاملة */
    overflow: hidden; /* قص الزوائد */
    border: 3px solid #0a0909; /* إطار أبيض */
filter: brightness(0.7);
    /* ظل عنابي */
    box-shadow: 0 0 30px 16px rgb(255, 248, 240);

    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px; /* مسافة تحت الصورة */
    margin-top: 25px;
    margin-left: 90px;
}

.profile-image {
    width: 100%; /* ملء الدائرة */
    height: 100%;
    object-fit: cover; /* قص مناسب */
    /* مسار الصورة فارغ في HTML */
}

/* --- النص تحت الصورة --- */
.name-under-photo {
    font-size: 50px;
   
    color: #b82135;
    margin-top: 30px;
   font-family: 'Al-Mujahed Free 2';
    margin-right: 50px;
   
}

.job-under-photo {
    font-size: 22px;
    color: #ece6e1; /* بيج فاتح */
       text-shadow:10px 10px 4px #1a1304 ,-10px -10px 4px #181204;
     
        margin-top: px;
}

/* ===========================
   العمود الأيسر (الاسم الكبير + المهنة + المهارات)
   =========================== */
.left-column {
    width: 55%; /* عرض أكبر */
}

/* --- الاسم الكبير --- */
.hero-name {
    font-size: 80px; /* كبير */
    font-weight: 800; /* عريض */
    color: #d47f1a; /* عنابي */
    letter-spacing: 1px; /* تباعد بسيط */
    margin-bottom: 10px;
    font-family: 'aremat font';
    font-style: italic;
     text-shadow:10px 10px 4px #1a1304 ,-10px -10px 4px #181204;
  margin-top: 0%;
  -webkit-text-stroke: 0.3px rgb(221, 212, 212);

 
}


/* --- المهنة --- */
.hero-title {
    font-size: 25px;
    color: #eee4e4;
    margin-bottom: px;
    margin-right: 75px;
      text-shadow:10px 10px 30px #804242,-10px -10px 30px#803d3d;
      margin-top: 30px;
        margin-left: 20px;
}

/* --- المهارات --- */
.hero-skills {
    font-size: 30px;
    color: #c45d43; /* بيج فاتح */
    line-height: 1.8; /* تباعد أسطر */
    text-shadow:10px 10px px #f5d6d6,-10px -10px 10px #b1a9a9; 
      margin-right: 75px;
      margin-top: 18px;
      font-family:' Abdoullah( bold)';
}

/* ===========================
   شريط التنقل الجانبي
   =========================== */
.side-nav {
    position: fixed; /* ثابت */
    left: 20px; /* يسار الصفحة */
    top: 60%; /* منتصف الشاشة */
    transform: translateY(-50%); /* ضبط المنتصف */
    display: flex;
    flex-direction: column; /* ترتيب عمودي */
    gap: 15px; /* مسافة بين العناصر */
}

/* --- عنصر التنقل --- */
.nav-item {
    width: 60px;
    height: 60px;
    background: #f3ac7c; /* أبيض */
    color: #0e0d0d; /* أسود */
    border-radius: 30px; /* زوايا ناعمة */
    text-decoration: none; /* بدون خط */
    display: flex;
    flex-direction: column; /* أيقونة فوق نص */
    justify-content: center;
    align-items: center;
    font-size: 12px;


    /* ظل عنابي */
    box-shadow: 0 0 50px 5px rgba(29, 23, 18, 0.973)

   
}

.nav-item:hover {
    transform: translateY(-3px); /* حركة */
    box-shadow: 0 0 25px rgb(29, 3, 7); /* ظل أقوى */
}

.nav-icon {
    font-size: 20px; /* حجم الأيقونة */
    margin-bottom: 3px;
}

.nav-text {
    font-size: 11px;
}
 /* استيراد الخطوط من جوجل */
    @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;800&family=Poppins:wght@400;600;700&display=swap');

    /* إعادة ضبط عامة */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* إعدادات الجسم */
    body {
      font-family: "Tajawal", sans-serif; /* خط عربي */
      background:
        radial-gradient(circle at top left, #992337 0%, #000000 55%),
        radial-gradient(circle at bottom right, #b8860b33 0%, transparent 70%); /* خلفية تدرجية فخمة */
      background-attachment: fixed; /* ثبات الخلفية */
      background-size: cover; /* تغطية الشاشة */
      color: #f1f1f1; /* لون النص */
      direction: rtl; /* اتجاه عربي */
      min-height: 100vh; /* ارتفاع كامل الشاشة */
      transition: background (0.3s), color (0.3s); /* انتقال ناعم */
      position: relative; /* للسماح بالعناصر المطلقة */
    }

    /* وضع داكن مختلف قليلاً */
    body.dark {
      background:
        radial-gradient(circle at top left, #000000 0%, #111111 60%),
        radial-gradient(circle at bottom right, #99233733 0%, transparent 70%);
      color: #f5f5f5;
    }

    /* عنصر خلفية بيضاوي مضبب */
    .blob {
      position: absolute; /* تموضع مطلق */
      width: 320px; /* عرض الشكل */
      height: 320px; /* ارتفاع الشكل */
      background: radial-gradient(circle, #992337 0%, #000000 80%); /* تدرج داخلي */
      border-radius: 50%; /* شكل دائري */
      filter: blur(80px); /* ضبابية */
      opacity: 0.35; /* شفافية */
      z-index: -1; /* خلف المحتوى */
    }

    .blob.top-right { top: -80px; right: -40px; } /* موضع الشكل الأول */
    .blob.bottom-left { bottom: -80px; left: -40px; } /* موضع الشكل الثاني */

    /* شريط الهيدر */
  

    nav {
      display: flex; /* ترتيب أفقي */
      align-items: center; /* محاذاة عمودية */
      gap: 14px; /* مسافة بين العناصر */
    }

    nav a {
      color: #ffffff; /* لون الروابط */
      text-decoration: none; /* بدون خط */
      font-size: 0.95rem; /* حجم خط */
      font-weight: 600; /* سمك الخط */
      position: relative; /* للتحكم بخط تحت الرابط */
    }

   

    nav a:hover::after {
      width: 100%; /* عند المرور يصبح العرض كامل */
    }

    .moon-btn svg {
      width: 24px; /* عرض الأيقونة */
      height: 24px; /* ارتفاع الأيقونة */
      fill: #f1c45c; /* لون ذهبي فاتح */
      filter: drop-shadow(0 0 4px rgba(0,0,0,0.4)); /* ظل خفيف */
    }

 

    /* الحاوية الرئيسية */
    main {
      padding: 30px 18px; /* حشوات داخلية */
      max-width: 1100px; /* عرض أقصى */
      margin: 0 auto; /* توسيط */
    }

    /* صندوق المحتوى الزجاجي */
    .glass-box {
      background: rgba(0,0,0,0.35); /* خلفية شبه شفافة */
      background: blur(14px); /* ضبابية خلفية */
      border-radius: 18px; /* زوايا ناعمة */
      border: 1px solid rgba(255,255,255,0.12); /* إطار خفيف */
      padding: 24px 20px; /* حشوات داخلية */
      box-shadow: 0 18px 40px rgba(0,0,0,0.45); /* ظل عميق */
    }

    body.dark .glass-box {
      background: rgba(255,255,255,0.05); /* خلفية زجاجية أفتح */
    }

    h1 {
      font-size: 1.8rem; /* حجم العنوان */
      font-weight: 800; /* خط عريض جداً */
      margin-bottom: 10px; /* مسافة أسفل */
      color: #fdfdfd; /* لون فاتح */
    }

    .subtitlee {
      font-size: 30px; /* حجم النص */
      font-weight:30px;
      color: #e0dede; /* لون رمادي فاتح */
      margin-bottom: 22px; /* مسافة أسفل */
      line-height: 1.7; /* تباعد الأسطر */
    }

    .services-grid {
      display: grid; /* شبكة */
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* أعمدة متجاوبة */
      gap: 16px; /* مسافة بين العناصر */
     
    }

    .service-card {
      background: rgba(255,255,255,0.04); /* خلفية شفافة */
      border-radius: 14px; /* زوايا ناعمة */
      border: 1px solid rgba(255,255,255,0.12); /* إطار خفيف */
      padding: 14px 14px 16px; /* حشوات داخلية */
      position: relative; /* عنصر نسبي */
      overflow: hidden; /* إخفاء الزوائد */
      border-color: #804242;
    }

    .service-card::before {
      content: ""; /* عنصر وهمي */
      position: absolute; /* تموضع مطلق */
      width: 80px; /* العرض */
      height: 80px; /* الارتفاع */
      background: radial-gradient(circle, rgba(241, 179, 21, 0.4) 0%, transparent 70%); /* تدرج ذهبي */
      top: -30px; /* موضع علوي */
      left: -20px; /* موضع يسار */
      opacity: 0.7; /* شفافية */
      
    }

    .service-title {
      font-weight: 700; /* خط عريض */
      margin-bottom: 6px; /* مسافة أسفل */
      color: #ffd27f; /* لون ذهبي فاتح */
      position: relative; /* للحفاظ على النص فوق */
      z-index: 1; /* فوق العنصر الوهمي */
    }

    .service-desc,
    .service-extra {
      font-size: 20px; /* حجم نص */
      line-height: 1.6; /* تباعد أسطر */
      position: relative; /* للحفاظ فوق */
      z-index: 1; /* فوق العنصر الوهمي */
      color: #ac4242;
      font-weight: 40px;
    }

    .service-extra {
      margin-top: 4px; /* مسافة علوية */
      color: #e0dede; /* لون فاتح */
      font-size: 20px; /* حجم أصغر */
    }

    .tagline {
      margin-top: 20px; /* مسافة علوية */
      font-size: 0.9rem; /* حجم نص */
      color: #f1f1f1; /* لون فاتح */
      text-align: left; /* محاذاة لليسار (لتوازن بصري) */
    }

    /* تجاوب الشاشة الصغيرة */
    @media (max-width: 600px) {
      header {
        flex-direction: column; /* ترتيب رأسي */
        align-items: flex-start; /* محاذاة بداية */
        gap: 8px; /* مسافة بين العناصر */
      }

      nav {
        width: 100%; /* عرض كامل */
        justify-content: space-between; /* توزيع العناصر */
      }

      .tagline {
        text-align: center; /* محاذاة وسط في الجوال */
      }
    }
  /* استيراد الخطوط */
    @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;800&family=Poppins:wght@400;600;700&display=swap');

    /* إعادة ضبط */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: "Tajawal", sans-serif; /* خط عربي */
      background:
        radial-gradient(circle at top left, #992337 0%, #000000 55%),
        radial-gradient(circle at bottom left, #b8860b33 0%, transparent 70%); /* خلفية تدرجية */
      background-attachment: fixed; /* ثبات خلفية */
      background-size: cover; /* تغطية الشاشة */
      color: #f1f1f1; /* لون النص */
      direction: rtl; /* اتجاه عربي */
      min-height: 100vh; /* ارتفاع كامل الشاشة */
      transition: background 0.3s, color 0.3s; /* انتقال ناعم */
      position: relative; /* للسماح بعناصر مطلقة */
    }

    body.dark {
      background:
        radial-gradient(circle at top right, #000000 0%, #111111 40%),
        radial-gradient(circle at bottom left, #99233733 0%, transparent 70%);
      color: #f5f5f5;
    }

    .blob {
      position: absolute;
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, #992337 0%, #000000 90%);
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.38;
      z-index: -1;
    }

    .blob.top-left { top: -70px; left: -40px; }
    .blob.bottom-right { bottom: -70px; right: -40px; }

    header {
   
      padding: 14px 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #ffffff;
      border-bottom: 1px solid rgb(119, 108, 108);
    }

    

   
    .introo {
   color: #af5205;
   margin-bottom: 50px;
   font-size: 27px;

    }

    nav a:hover::after {
      width: 100%;
    }

    .moon-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .moon-btn svg {
      width: 24px;
      height: 24px;
      fill: #f1c45c;
      filter: drop-shadow(0 0 4px rgba(0,0,0,0.4));
    }

    .lang-btn {
      background-color: #ffffff;
      color: #992337;
      border: none;
      padding: 5px 11px;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 700;
      font-size: 0.8rem;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    }

    main {
      padding: 30px 18px;
      max-width: 900px;
      margin: 0 auto;
    }

    .glass-box {
      background: rgba(0,0,0,0.42);
      backdrop-filter: blur(16px);
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.13);
      padding: 24px 20px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    }

    body.dark .glass-box {
      background: rgba(255,255,255,0.06);
    }
.ww{
font-size: 50px;
font-family: 'al-gbrCocon® Next Arabic';
}
    h1 {
      font-size: 30px;
      font-weight: 800;
      margin-bottom: 10px;
      color: #fdfdfd;
    }

    .subtitle {
      font-size: 0.95rem;
      color: #e0dede;
      margin-bottom: 20px;
      line-height: 1.7;
    }

    .contact-info {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 16px;
      margin-bottom: 22px;
    }

    .info-card {
      background: rgb(221, 192, 192);
      border-radius: 14px;
      border: 1px solid rgb(19, 8, 4);
      padding: 14px 14px 16px;
      
    }

    .info-label {
      font-size: 25px;
      font-weight: 15px;
      color: #8b1a06;
      margin-bottom: 3px;
    }

    .info-value {
      font-size: 0.95rem;
      font-weight: 600;
    }

    form {
      display: grid;
      gap: 10px;
      margin-top: 5px;
    }

    label {
      color: #965808;
      font-size:20px;
      margin-bottom: 2px;
    }

    input,
    textarea {
      width: 100%;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgb(219, 216, 201);
      background: rgba(0,0,0,0.35);
      color: #df8927;
      font-family: inherit;
      font-size: 15px;
      outline: none;
    }

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

    input:focus,
    textarea:focus {
      border-color: #ffd27f;
      box-shadow: 0 0 0 1px rgb(202, 181, 143);
    }

    button[type="submit"] {
      margin-top: 8px;
      background: linear-gradient(90deg, #992337, #b8860b);
      color: #ffffff;
      border: none;
      padding: 10px 16px;
      border-radius: 999px;
      cursor: pointer;
      font-weight: 700;
      font-size: 0.9rem;
      justify-self: flex-start;
      box-shadow: 0 10px 25px rgba(0,0,0,0.45);
    }

    button[type="submit"]:hover {
      opacity: 0.93;
    }

    .note {
      margin-top: 12px;
      font-size: 0.8rem;
      color: #e0dede;
    }

    @media (max-width: 600px) {
      header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      nav {
        width: 100%;
        justify-content: space-between;
      }
    }
      /* ================================
       إعداد الخطوط العامة
    ==================================*/
    @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;800&family=Poppins:wght@400;600;700&display=swap');

    /* ================================
       إعدادات عامة
    ==================================*/
    * {
      margin: 0; /* إزالة الهوامش */
      padding: 0; /* إزالة الحشوات */
      box-sizing: border-box; /* ضبط الصندوق */
    }

    body {
      font-family: "Tajawal", sans-serif; /* خط عربي افتراضي */
      background-color: #ffffff; /* خلفية فاتحة */
      color: #111111; /* لون النص */
      direction: rtl; /* اتجاه عربي */
      transition: background 0.3s, crolo 0.3s; /* انتقال ناعم */
    }

    /* ================================
       الوضع الداكن
    ==================================*/
    body.dark {
      background-color: #111111; /* خلفية داكنة */
      color: #f1f1f1; /* نص فاتح */
    }

    /* ================================
       الهيدر
    ==================================*/
    header {
    
      padding: 15px 25px; /* مسافات داخلية */
      display: flex; /* ترتيب أفقي */
      align-items: center; /* محاذاة عمودية */
      justify-content: space-between; /* توزيع العناصر */
      color: white; /* لون النص */
    }

    .logo {
      font-size: 1.3rem; /* حجم الشعار */
      font-weight: 800; /* خط عريض */
    }

    nav {
      display: flex; /* ترتيب أفقي */
      gap: 15px; /* مسافة بين الروابط */
      align-items: center; /* محاذاة عمودية */
    }

    nav a {
      color: white; /* لون الروابط */
      text-decoration: none; /* بدون خط */
      font-weight: 600; /* خط متوسط */
    }

    /* ================================
       زر الهلال (الوضع الداكن)
    ==================================*/
    .moon-btn {
      background: none; /* بدون خلفية */
      border: none; /* بدون إطار */
      cursor: pointer; /* مؤشر يد */
    }

    .moon-btn svg {
      width: 26px; /* حجم الأيقونة */
      height: 26px;
      fill: #b8860b; /* لون ذهبي غامق */
    }

    /* ================================
       زر اللغة
    ==================================*/
    .lang-btn {
      background-color: white; /* خلفية بيضاء */
      color: #992337; /* نص باللون الرئيسي */
      border: none; /* بدون إطار */
      padding: 5px 10px; /* مسافات داخلية */
      border-radius: 5px; /* زوايا ناعمة */
      cursor: pointer; /* مؤشر يد */
      font-weight: 700; /* خط عريض */
    }

    /* ================================
       محتوى الصفحة
    ==================================*/
    main {
      padding: 30px 20px; /* مسافات داخلية */
      max-width: 1100px; /* عرض أقصى */
      margin: auto; /* توسيط */
    }

    h1 {
      font-size: 2rem; /* حجم العنوان */
      margin-bottom: 15px; /* مسافة أسفل */
      font-weight: 800; /* خط عريض */
      color: #992337; /* لون رئيسي */
    }

    .intro {
      margin-bottom: 25px; /* مسافة أسفل */
      font-size: 1rem; /* حجم النص */
      color: #444; /* لون رمادي */
    }

    /* ================================
       كروت المشاريع
    ==================================*/
    .projects {
      display: grid; /* شبكة */
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* أعمدة تلقائية */
      gap: 20px; /* مسافات بين الكروت */
    }

    .card {
      border: 1px solid #eee; /* إطار خفيف */
      padding: 15px; /* مسافات داخلية */
      border-radius: 10px; /* زوايا ناعمة */
      background-color: white; /* خلفية */
      transition: transform 0.2s; /* حركة ناعمة */
    }

    body.dark .card {
      background-color: #222; /* خلفية داكنة */
      border-color: #444; /* إطار داكن */
    }

    .card:hover {
      transform: translateY(-5px); /* حركة عند المرور */
    }

    .card-title {
      font-weight: 700; /* خط عريض */
      margin-bottom: 8px; /* مسافة */
      color: #992337; /* لون رئيسي */
      font-size: 30px;
    }

    .card-text {
      font-size: 20px; /* حجم نص */
      margin-bottom: 6px; /* مسافة */
    }