* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
/* ===================== Compact responsive layout for last section (#science) ===================== */
#science {
  max-width: 820px;
  margin: 20px auto;
  padding: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(112,11,11,0.06));
  border-radius: 14px;
  border: 1px solid rgba(112,11,11,0.12);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  box-sizing: border-box;
}
/* ===================== COMPACT CONTACT SECTION ===================== */
.contactcontainer {
  max-width: 680px !important;
  margin: 16px auto !important;
  padding: 18px !important;
  background: linear-gradient(180deg, rgba(112,11,11,0.08), rgba(0,0,0,0.12)) !important;
  border-radius: 13px !important;
  border: 1px solid rgba(112,11,11,0.14) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.32) !important;
  text-align: center;
}

.contactTitle {
  margin-bottom: 14px;
}

.contactTitle h2 {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  margin: 4px 0;
  color: #fff;
}

.contactTitle .aboutName {
  background: linear-gradient(to right, #821725, #a11c2c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contactTitle .aboutTitle {
  color: #fff;
}

/* Email and phone section */
.contacty {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 14px;
}

.emailAndPhone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.emailAndPhone img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.emailAndPhone a {
  text-decoration: none;
  color: #fff;
  font-size: clamp(0.9rem, 2vw, 1rem);
  transition: color 0.3s;
}

.emailAndPhone a:hover {
  color: #ff6b6b;
}

.emailAndPhone h3 {
  margin: 0;
  font-size: clamp(0.9rem, 2vw, 1rem);
}

/* Social media grid - compact */
.contactcontainer .socialMedia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 10px;
  justify-items: center;
  align-items: center;
  max-width: 280px;
  margin: 0 auto;
}

.contactcontainer .socialMedia a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(112,11,11,0.15);
  border: 1px solid rgba(112,11,11,0.2);
  transition: all 0.3s;
  padding: 0;
  margin: 0;
}

.contactcontainer .socialMedia a:hover {
  transform: scale(1.12);
  background: rgba(112,11,11,0.28);
  box-shadow: 0 6px 16px rgba(132, 13, 13, 0.4);
}

.contactcontainer .socialMedia img {
  width: 24px;
  height: 24px;
}

/* Mobile optimization */
@media (max-width: 720px) {
  .contactcontainer {
    max-width: 92% !important;
    margin: 12px auto !important;
    padding: 14px !important;
  }

  .contactTitle h2 {
    font-size: 1.3rem;
  }

  .contacty { gap: 10px; }

  .emailAndPhone img {
    width: 24px;
    height: 24px;
  }

  .contactcontainer .socialMedia {
    gap: 8px;
    max-width: 260px;
  }

  .contactcontainer .socialMedia a {
    width: 44px;
    height: 44px;
  }

  .contactcontainer .socialMedia img {
    width: 20px;
    height: 20px;
  }
}

/* Very small screens */
@media (max-width: 420px) {
  .contactcontainer {
    padding: 12px !important;
    border-radius: 11px !important;
  }

  .contactTitle h2 {
    font-size: 1.1rem;
  }

  .emailAndPhone {
    gap: 8px;
  }

  .emailAndPhone img {
    width: 22px;
    height: 22px;
  }

  .emailAndPhone h3 {
    font-size: 0.9rem;
  }
y
  .contactcontainer .socialMedia {
    gap: 6px;
    grid-template-columns: repeat(3, 1fr);
    max-width: 200px;
  }

  .contactcontainer .socialMedia a {
    width: 40px;
    height: 40px;
  }

  .contactcontainer .socialMedia img {
    width: 18px;
    height: 18px;
  }
}
/* tighten space above cards for compact look */
#science .card-container {
  margin-top: 6px;
  gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

/* make each card compact: image on the left, text on the right */
#science .card {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  background: rgba(218,0,0,0.08);
  border-radius: 10px;
  padding: 10px;
  margin: 6px 0;
  box-shadow: none;
  border: 1px solid rgba(0,0,0,0.06);
  box-sizing: border-box;
}

/* small consistent thumbnail */
#science .card img.img-img {
  width: 88px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 88px;
  background: #111;
}

/* content area: tighter spacing */
#science .card-content {
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* title & description styles */
#science .card-content h3 {
  font-size: 1rem;
  margin: 0;
  color: #fff;
}
#science .card-content p {
  margin: 0;
  font-size: 0.92rem;
  color: #e6e6e6;
  opacity: 0.9;
  line-height: 1.2;
  max-height: 3.2rem; /* clamp visible text */
  overflow: hidden;
}

/* button smaller and inline */
#science .card-content .btn {
  align-self: flex-start;
  padding: 6px 10px;
  font-size: 0.9rem;
  margin-top: 6px;
}

/* Mobile: make it even more compact */
@media (max-width: 720px) {
  #science {
    max-width: 92%;
    margin: 12px auto;
    padding: 12px;
  }

  #science .card {
    gap: 10px;
    padding: 9px;
  }

  #science .card img.img-img {
    width: 72px;
    height: 56px;
    flex: 0 0 72px;
  }

  #science .card-content h3 {
    font-size: 0.98rem;
  }

  /* hide long descriptions on small screens to save space */
  #science .card-content p { display: none; }

  #science .card-content .btn {
    padding: 6px 8px;
    font-size: 0.88rem;
  }
}

/* Very small screens */
@media (max-width: 420px) {
  #science { padding: 10px; border-radius: 12px; }
  #science .card img.img-img { width: 60px; height: 48px; flex: 0 0 60px; }
  #science .card { padding: 8px; gap: 8px; }
  #science .card-content h3 { font-size: 0.95rem; }
}
 /* =============================================================================================== */
 /* ====== Make hero image larger & consistent ====== */
 .title-1{
  font-size: 1.3rem;
  color: #fb5858;
  margin-bottom: 20px;
  text-align: center;
  border: #000 3px solid;
 }
 .font-1{
  text-align: center;
  font-family: monospace;
 }
/* Layout: two columns on desktop, stacked on small screens */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
@media (max-width: 720px) {
  /* اجعل مجموعة الأزرار تتكدس عمودياً وتتمركز */
  .flex-container {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
  }

  /* كل صندوق زر يصبح بعرض كامل داخلياً مع تمركز المحتوى */
  .flex-container .heroBtns {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* الأزرار تظهر بعرض مناسب، padding أكبر، وخط أوضح */
  .flex-container .heroBtns a.CV {
    display: inline-block;
    width: 100%;
    max-width: 420px; /* أقصى عرض على الهواتف الكبيرة؛ غيّره لو تحب */
    padding: 12px 18px;
    font-size: 1rem;
    text-align: center;
    box-sizing: border-box;
    border-radius: 8px;
  }
 
  /* لو أردت تمييز زر "أفضل المدرسين" بصيغة خاصة (اختياري) */
  .flex-container .heroBtns:nth-child(2) a.CV {
    /* مثال: خلفية شفافة وحدود واضحة — احذف أو عدّل إذا لا تريده */
     border: 2px solid rgba(255,255,255,0.12);
    color: #fff;
  }
}
/* نص البانر (العمود الأيسر) */
.heroSub {
  flex: 1 1 48%;
  min-width: 320px;
  max-width: 900px;
}

/* صندوق الصورة (العمود الأيمن) */
.MKO {
  flex: 0 0 48%;
  max-width: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

/* الصورة نفسها - أكبر، متناسبة، وتحترم النصوص داخلها (لا تقص) */
.MKO img,
.video_L {
  width: 100%;
  height: auto;
  max-width: 760px;     /* أكبر عرض للصورة على الديسكتوب */
  max-height: 72vh;     /* لا تتجاوز ارتفاع الشاشة كثيرا */
  object-fit: contain;  /* حافظ على النص داخل الصورة دون قص */
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* تكبير إضافي على شاشات كبيرة جداً */
@media (min-width: 1400px) {
  .heroSub { flex: 1 1 50%; }
  .MKO     { flex: 0 0 50%; max-width: 50%; }
  .MKO img { max-width: 820px; max-height: 78vh; }
}

/* شاشات متوسطة */
@media (max-width: 1100px) {
  .heroSub { flex: 1 1 60%; }
  .MKO     { flex: 0 0 40%; max-width: 40%; }
  .MKO img { max-width: 640px; }
}

/* موبايل: نجعل الصورة تحت النص (stacked) وتعرض بعرض كامل */
@media (max-width: 920px) {
  .hero { flex-direction: column-reverse; } /* النص أعلاه، الصورة بعده */
  .heroSub { order: 1; width: 100%; max-width: 100%; }
  .MKO     { order: 2; width: 100%; max-width: 100%; margin-top: 12px; }
  .MKO img { max-width: 100%; height: auto; width: 100%; box-shadow: none; border-radius: 10px; }
}

/* شاشة صغيرة جداً: خفف المسافات وحافظ على وضوح النص داخل الصورة */
@media (max-width: 480px) {
  .hero { gap: 12px; padding: 8px; }
  .MMOOSSAA .name { font-size: 1.6rem; } /* إن أردت تعديل حجم العنوان على الهواتف */
  .MKO img { max-height: 55vh; }
}
 /* ====== Make hero image larger & consistent ====== */

/* Layout: two columns on desktop, stacked on small screens */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

/* نص البانر (العمود الأيسر) */
.heroSub {
  flex: 1 1 48%;
  min-width: 320px;
  max-width: 900px;
}

/* صندوق الصورة (العمود الأيمن) */
.MKO {
  flex: 0 0 48%;
  max-width: 48%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
}

/* الصورة نفسها - أكبر، متناسبة، وتحترم النصوص داخلها (لا تقص) */
.MKO img,
.video_L {
  width: 100%;
  height: auto;
  max-width: 760px;     /* أكبر عرض للصورة على الديسكتوب */
  max-height: 72vh;     /* لا تتجاوز ارتفاع الشاشة كثيرا */
  object-fit: contain;  /* حافظ على النص داخل الصورة دون قص */
  display: block;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}

/* تكبير إضافي على شاشات كبيرة جداً */
@media (min-width: 1400px) {
  .heroSub { flex: 1 1 50%; }
  .MKO     { flex: 0 0 50%; max-width: 50%; }
  .MKO img { max-width: 820px; max-height: 78vh; }
}

/* شاشات متوسطة */
@media (max-width: 1100px) {
  .heroSub { flex: 1 1 60%; }
  .MKO     { flex: 0 0 40%; max-width: 40%; }
  .MKO img { max-width: 640px; }
}

/* موبايل: نجعل الصورة تحت النص (stacked) وتعرض بعرض كامل */
@media (max-width: 920px) {
  .hero { flex-direction: column-reverse; } /* النص أعلاه، الصورة بعده */
  .heroSub { order: 1; width: 100%; max-width: 100%; }
  .MKO     { order: 2; width: 100%; max-width: 100%; margin-top: 12px; }
  .MKO img { max-width: 100%; height: auto; width: 100%; box-shadow: none; border-radius: 10px; }
}

/* شاشة صغيرة جداً: خفف المسافات وحافظ على وضوح النص داخل الصورة */
@media (max-width: 480px) {
  .hero { gap: 12px; padding: 8px; }
  .MMOOSSAA .name { font-size: 1.6rem; } /* إن أردت تعديل حجم العنوان على الهواتف */
  .MKO img { max-height: 55vh; }
}
/* ===================== HERO IMAGE - RESPONSIVE ===================== */
@media (max-width: 920px) {
.hero {
flex-direction: column !important;
align-items: center;
}
.heroSub { order: 1 !important; width: 100%; }
.MKO { order: 2 !important; width: 100%; margin-top: 12px; }
}


.hero {
flex-direction: column !important;
align-items: center;
}
.heroSub { order: 1 !important; width: 100%; }
.MKO { order: 2 !important; width: 100%; margin-top: 12px; }

.MKO {
  width: 100%;
  max-width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
  display: flex;
  align-items: center;
      margin-left: 0%;

  justify-content: center;
}

.MKO img,
.video_L {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

/* Desktop: صورة كاملة بحجمها الأصلي */
@media (min-width: 1200px) {
  .MKO {
    max-width: 600px;
        margin-left: 0%;

  }

  .MKO img {
    width: 100%;
    height: auto;
        margin-left: 0%;

  }
}

/* Tablet: صورة تتكيف مع العرض */
@media (max-width: 920px) {
  .MKO {
    max-width: 100%;
    padding: 0;
    margin-left: 0%;
  }

  .MKO img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

 


/* ===================== END HERO IMAGE ===================== */
.video_L{
border: none;
border-radius: 40px;
}
.rr{
    background-color: #ffffff;
  border-radius: 60px;
}
.y{
  background-color: #ffffff;
  border-radius: 60px;
}
/* حذف الخط السفلي من جميع الروابط */
a {
  text-decoration: none;
}
.ssddg{
   background-color: #d40000;
 
}
 
 
header .ssddg{
   width: 30px;}
.r{
    width: 44px;
   border: #000 2px solid;
   border-radius: 50px;
   padding: 6px;
   background-color: #e0e0e0;
}
.u{
   width: 44px;
   border: #000 2px solid;
   border-radius: 50px;
   padding: 6px;
   background-color: #e0e0e0;
}
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ===================== HEADER ===================== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.2));
  border-bottom: 2px solid rgba(112,11,11,0.3);
  max-width: 100%;
}

.ssddg {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  border: 2px solid #701521;
}

.navigation ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.navigation a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  background: #701521;
  padding: 2px;
  border-radius: 6px;
  transition: all 0.3s;
}
.flex-container
.navigation a:hover {
  background: #bb2032;
  transform: translateY(-2px);
}

/* ===================== HR ===================== */
hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(149, 14, 14, 0.63), transparent);
  margin: 0;
}
 
/* ===================== HERO SECTION ===================== */
.hero {
  
   
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.heroSub {
  
  min-width: 250px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(146, 13, 13, 0.466), rgba(0, 0, 0, 0.488));
  border-radius: 15px;
  border: 2px solid rgba(135, 12, 12, 0.458);
  text-align: center;
}

.name {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 10px;
  font-weight: bold;
}

.title {
  font-size: 1.3rem;
  color: #fb5858;
  margin-bottom: 20px;
}
header .ssddg,
.heroBtns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
 
        /* بطاقات المعلمين */
        .img-img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 6px;
             
        }


        .art-1 {
            display: block;
            width: min(92%, 680px);
            /* عرض مرن: لا يتجاوز 680px */
            max-width: 100%;
            margin: 18px auto;
            /* يوسّط العنصر أفقياً */
            padding: clamp(10px, 2.6vw, 18px) clamp(12px, 4vw, 28px);
            border: 4px solid rgba(0, 0, 0, 0.9);
            /* بوردر واضح لكن ليس سميك جداً على الموبايل */
            border-radius: 38px;
            background: rgb(197, 0, 66);
            /* خلفية فاتحة للقراءة فوق أي صورة */
            text-align: center;
            font-family: 'Arial', Tahoma, sans-serif;
            font-size: clamp(1rem, 2.6vw, 1.4rem);
            /* خط يتكيف مع حجم الشاشة */
            line-height: 1.25;
            color: #ffffff;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
            box-sizing: border-box;
            margin-top: 36px;
        }

        .art {
            display: block;
            width: min(92%, 680px);
            /* عرض مرن: لا يتجاوز 680px */
            max-width: 100%;
            margin: 18px auto;
            /* يوسّط العنصر أفقياً */
            padding: clamp(10px, 2.6vw, 18px) clamp(12px, 4vw, 28px);
            border: 4px solid rgba(0, 0, 0, 0.9);
            /* بوردر واضح لكن ليس سميك جداً على الموبايل */
            border-radius: 38px;
            background: rgb(255, 255, 255);
            /* خلفية فاتحة للقراءة فوق أي صورة */
            text-align: center;
            font-family: 'Arial', Tahoma, sans-serif;
            font-size: clamp(1.1rem, 2.7vw, 1.5rem);
            /* خط يتكيف مع حجم الشاشة */
            line-height: 1.25;
            color: #111;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
            box-sizing: border-box;
            margin-top: 36px;
        }

        /* تحسينات خاصة بالشاشات الصغيرة */
        @media (max-width: 420px) {
            .art {
                width: calc(100% - 28px);
                /* تترك حواف صغيرة على الجانبين */
                margin: 12px auto;
                padding: 10px 12px;
                border-width: 3px;
                border-radius: 14px;
                font-size: 1rem;
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
            }
        }

        .card-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 100px;
        }
.card:hover{
          box-shadow: 0 7px 21px rgb(255, 255, 255), 0 17px 50px 0 rgb(202, 84, 84);
    transition: 0.50, s;
    transition: 0.01s;
}
        .card {
            width: 325px;
    
            background-image: url('');
            background-color: #da0000b4;
            border-radius: 9px;
            overflow: hidden;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
            margin: 20px;
        }

        .card img {
            width: 100%;
            height: auto;
        }

        .card-content {
            padding: 16px;
        }

        .card-content h3 {
            font-size: 20px;
            margin-bottom: 8px;
            color: #fff;
        }

        .card-content p {
            color: #999;
            font-size: 14px;
            line-height: 1.5;
        }

        .card-content .btn {
            display: inline-block;
            padding: 8px 16px;
            background-color: #667eea;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 16px;
            color: #fff;
            transition: background 0.3s ease;
        }

        .card-content .btn:hover {
            background-color: #764ba2;
        }

        /* تجاوب الموبايل */
        @media (max-width: 720px) {
            .sidebar.open {
                width: 200px;
            }

            .sidebar a {
                font-size: 0.98rem;
                padding: 12px 16px;
            }

            .hamburger {
                font-size: 24px;
                padding: 9px 12px;
            }

            .card {
                width: 90%;
            }
        }
 
        @media (max-width: 420px) {
            .sidebar.open {
                width: 170px;
            }

            .sidebar a {
                font-size: 0.92rem;
                padding: 11px 14px;
            }

            .hamburger {
                font-size: 22px;
                padding: 8px 10px;
            }

            .sidebar .closebtn {
                font-size: 24px;
                width: 34px;
                height: 34px;
            }

            .card {
                width: 95%;
                margin: 15px auto;
            }
        }
.CV {
  background: linear-gradient(to right, #8d1928, #b41f30);
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.CV:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(139, 13, 13, 0.58);
}

.CV img {
  width: 20px;
  height: 20px;
}
ul li a .nmnm{
  text-align: right;
}
/* ===================== VIDEO WRAPPER ===================== */
.video-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  
}

.video-wrapper iframe,
.video-wrapper video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.rkk {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===================== ABOUT ME SECTION ===================== */
.aboutMe {
  width: 100%;
  max-width: 1200px;
  margin: 30px auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(136, 14, 14, 0.431), rgba(0, 0, 0, 0.477));
  border-radius: 15px;
  border: 2px solid rgba(132, 14, 14, 0.469);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.548);
}

.aboutMEImg {
  width: 250px;
  height: 250px;
  object-fit: cover;
  border-radius: 15px;
  border: 4px solid #811625;
  flex: 0 0 250px;
  box-shadow: 0 6px 20px rgba(128, 11, 11, 0.589);
}

.textContainer {
  flex: 1 1 280px;
  min-width: 280px;
  color: #fff;
  padding: 12px;
}

.textContainer h2 {
  font-size: 1.6rem;
  margin: 0 0 12px 0;
  color: #fff;
  font-weight: bold;
}

.aboutMePar{
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1.1rem;
  background-color: #02d425e3;
  padding: 10px;
  color: #f7f7f7;
  border-radius: 12px;
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 20px rgba(255, 123, 0, 0.849);
  transition: all 0.3s    ;
}
.textContainer p,
.aboutMePar {
  color: #ffffff;
  line-height: 1.8;
  font-size: 1,2rem;
  background-color: #b11500c5;
  text-align:   center;
  margin: 0;
  padding: 0;
}

/* ===================== CONTENT SECTION (ABOUT PAGE) ===================== */
.container {
  max-width: 1100px;
  margin: 30px auto;
  padding: 20px;
  background: linear-gradient(180deg, rgb(0, 0, 0), rgb(0, 0, 0));
  border-radius: 15px;
  border: 2px solid rgba(129, 13, 13, 0.487);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
.fvg {
  font-size: 19px;
  font-style: normal;
  font-family: 'Times New Roman', Times, serif;
 color: #00ffe1;
 text-align: center;
}

.yyyyy {
  color: #fff;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 30px;
  background: linear-gradient(to right, #15ff00, #1eff00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
 



.ttyyuu {
  color: #ffffff;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 30px;
  background: linear-gradient(to right, #02c733, #00c458);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.intro-section {
  text-align: center;
  margin-bottom: 30px;
}
  
 
.intro-section p {
  font-size: 1.1rem;
  color: #fff;
  padding: 15px;
  background: rgba(112,11,11,0.15);
  border-radius: 10px;
 
  border-left: 4px solid #821625;
}

.content-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding-bottom: 2%;
  margin: 0;

}

.content-list li {
  background: rgba(141, 13, 13, 0.499);
  border: 2px solid rgba(133, 14, 14, 0.476);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s;
}

.content-list li:hover {
  transform: translateY(-5px);
  background: rgba(132, 13, 13, 0.483);
  box-shadow: 0 10px 30px rgba(132, 13, 13, 0.579);
}
 
.content-list a {
  text-decoration: none;
  color: inherit; 
  
}

.content-list a strong {
  color: #00ff08cc;
  font-size: 1.2rem;
  display: block;
  margin-bottom: 8px;
}

.content-list a span {
  display: block;
  color: #ffffff;
  font-size: 1.1rem;
  margin-top: 8px;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 
}

/* ===================== WORKS SECTION ===================== */
.works {
  background: linear-gradient(180deg, rgba(137, 13, 13, 0.359), rgba(0, 0, 0, 0.434));
  padding: 30px 20px;
  margin: 30px auto;
  border-radius: 15px;
  border: 2px solid rgba(133, 13, 13, 0.48);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.41);
  max-width: 1200px;
}

.worksContainer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px;
}

.projectTitle {
  text-align: center;
}

.projectTitle h2 {
  font-size: 2rem;
  color: #fff;
  background: linear-gradient(to right, #851826, #a11b2b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}

.works ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 0;
  margin: 0;
}

.works li {
  background: rgba(255, 255, 255, 0.324);
  border-radius: 12px;
  overflow: hidden;
  padding: 8px;
  border: 2px solid rgba(133, 13, 13, 0.421);
  transition: all 0.3s;
}

/* تحسين عرض الصور في قسم works (desktop: 3-4 أعمدة، tablet: 2، mobile: 1) */
.worksContainer { padding: 10px; }

.worksContainer ul,
.works ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr); /* افتراضي على سطح المكتب */
  align-items: start;
}

/* عرض أوسع → 4 أعمدة */
@media (min-width: 1400px) {
  .worksContainer ul,
  .works ul { grid-template-columns: repeat(4, 1fr); }
}

/* شاشات متوسطة → عمودان */
@media (max-width: 920px) {
  .worksContainer ul,
  .works ul { grid-template-columns: repeat(2, 1fr); gap:12px; }
}

/* موبايل → عمود واحد */
@media (max-width: 720px) {
  .worksContainer ul,
  .works ul { grid-template-columns: 1fr; gap:10px; }
}
 
/* بطاقة العنصر */
.worksContainer li,
.works li {
  background: rgba(255,255,255,0.02);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(112,11,11,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
}
 
/* صورة ثابتة المقاس ومتناسقة */
.worksContainer li img,
.works li img {
  width: 100%;
  height: 220px;            /* حجم ثابت على الديسكتوب */
  object-fit: cover;        /* يقص الصورة للحفاظ على التصميم */
  display: block;
  background: #111;
}

/* وصف/تسمية أسفل الصورة */
.workCaption {
  padding: 10px;
  color: #fff;
  font-size: 0.95rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.15));
}

/* تفاعل عند التحويم */
.worksContainer li:hover,
.works li:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}
img-img
/* ===================== CONTACT SECTION ===================== */
.contactcontainer  {
  max-width: 1200px;
  margin: 30px auto;
  padding: 30px 20px;
  background: linear-gradient(180deg, rgba(112,11,11,0.1), rgba(0,0,0,0.15));
  border-radius: 15px;
  border: 2px solid rgba(112,11,11,0.25);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  text-align: center;
}

.contactcontainer h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #fff;
}

.contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact a {
  color: #ff6b6b;
  text-decoration: none;
  font-size: 1.1rem;
  transition: all 0.3s;
}

.contact a:hover {
  transform: scale(1.05);
}

.socialMedia {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

 .socialMedia {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
 }

 .socialMedia a img {
    width: 34px;
    height: 34px;
 }

 .socialMedia a img:hover {
    transform: scale(1.6);
 }

 .socialMedia a {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background-color: #00000086;
    backdrop-filter: blur(4px);
    padding: 1rem;
    margin:
       1rem;
 }
.flex-container{
    display: flex; /* يجعل العناصر بداخلها تترتب بشكل أفقي */
    gap: 20px; /* مسافة بين العناصر (البوردرز) */
     padding: 0%;
   
}
footer .asd{
    font-size: 11px;
    color: white;
    text-align: center;
    border: none;
    border-radius: 20px;
    padding: 16px;
    margin: 13px;
    background-color: #000000;
    width: auto;
    text-decoration: none;
    border-width: 0cap;
}
header
 footer {
    text-align: center;
    padding: 2rem;
    color: white;
 }

 @media (max-width: 1023px) {
 
.ssddg{
   border: #000 2px solid;
   padding: 1px;
   background-color: #d40000;
   border-radius: 10px;
    box-shadow: 0 7px 21px rgb(61, 26, 26), 0 17px 50px 0 rgb(185, 6, 6);
   
    margin-right: 3px;
}
 
    .hero {
        
       align-items: center;
       gap: 2rem;
    }

    .heroImg {
       width: 400px;
    }
    
#border-box{
display: inline-block; /* المفتاح: يجعل الصندوق يظهر بجانب غيره */
    width: 150px;
    height: 70px;
  
    padding: 15px;
    text-align: center;
    margin-right: 20px; }
    co
    /* مسافة بين البوردرز *
}
    .name,
    .title {
       font-size: 2rem;
    }
 

    .arrow {
       display: none;
    }

    .aboutMe {
       flex-direction: column;
       gap: 2rem;
       align-items: center;
    }

    .textContainer {
       align-items: center;
       margin: 0rem 5rem;
       gap: 1rem;
    }

    .aboutName,
    .aboutTitle {
       font-size: 1rem;
    }

    .light {
       width: 60px;
    }

    .aboutMeImg {
       width: 400px;
    }

    .works {
       padding: 0%;
    }

    .worksContainer {
       padding: 5rem 0rem;
       gap: 3rem;
       border-radius: 30px;
    }

    .projectTitle {
       margin-left: 1rem;
    }

    .works ul {
       flex-direction: column;
       gap: 1rem;
    }

    .contactContainer {
       margin: 10rem 5rem;
       gap: 2rem;
    }

    .contact {
       flex-direction: column;
       gap: 1rem;
       margin-right: 0rem;
    }

    /* changed code */
    .socialMedia {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       /* صفين */
       gap: 1rem;
       align-items: center;
       justify-items: center;
       width: 100%;
       max-width: 420px;
       /* اختياري لتحديد عرض المحتوى */
       margin: 0 auto;
    }

    .socialMedia a {
       width: 90%;
       display: flex;
       align-items: center;
       justify-content: center;
    }
 }

 .rtyr {
    font-size: 30px;
    color: white;
    text-align: center;
    border: none;
    border-radius: 20px;
    padding: 16px;
    margin: 13px;
    background-color: #000000;
    width: auto;
    text-decoration: none;
    border-width: 0cap;
 }

 .rtyr:hover {
    box-shadow: 0 8px 20px 0 rgba(255, 0, 0, 0.24), 0 17px 50px 0 rgba(255, 0, 0, 0.19);
    transition: 0.01s;
    padding-left: 0%;

 }

 .rkk {
    display: block;
    margin-left: 49px;
    margin-right: auto;
    margin-bottom: 0%;
    width: 440px;
    height: 365px;
    border: none;
    padding: 0%;
    border-radius: 30px;
    box-shadow: 0 7px 21px rgb(177, 30, 30), 0 17px 50px 0 rgb(185, 6, 6);
    transition: 0.50, s;
 }

 /* ____________________________________________________________________________________ */
 /* إزالة الفراغات الجانبية العامة */
 html,
 body {
    margin: 0%;
    padding: 0%;
    width: 100%;
    box-sizing: border-box;
 }

 *,
 *::before,
 *::after {
    box-sizing: inherit;
 }
 
 
ul li a .bbbbb{
  text-align: right;
}
 /* يجعل الفيديو يملأ الحاوية ويقص ما يتجاوز لتفادي الفراغين الجانبيين */
 .video-wrapper .rkk {
 
    display: block;
    object-fit: cover;
    /* يملأ الحاوية ويقص الزائد */
    object-position: center;
    /* ضبّط مركز القص */
 }

 /* خفض سمك الحدود على شاشات صغيرة */
 @media (max-width: 320px) {
    .video-wrapper {
       border-width: 8px;
    }
   
 }
 
 /* video: full-bleed, no side gaps, cover fit */
 html,
 body {
    margin: 0%;
    padding: 0%;
    width: 99%;
    box-sizing: border-box;
 }

 .video-wrapper {
    width: 90%;
    max-width: 90%;
    margin: 0%;
    padding: 0%;
 

    /* ارتفاع نسبي: 16:9 افتراضياً */
    height: calc(100vw * 6 / 17);
 }

 .video-wrapper .rkk {
    width: 78%;
    margin-left: 15%;
    height: 99%;
    display: block;
    /* يملأ الحاوية ويقص الزائد لتجنب الفراغين */
    object-position: center;
 }

 /* إذا الفيديو عمودي وحابب يكون أعلى قليلاً على الموبايل: */
 @media (max-width: 600px) {
    .video-wrapper {
       height: 60vh;
    }
.video-wrapper .rkk{
          width: 321px;
          margin-left: 13px;
          margin-right: 30px;
       }
   
  
    /* أو استخدم calc(100vw * 16/9) لتطويل الحاوية */
 }
 
 /* تقليل سمك الحدود على الشاشات الصغيرة */
 @media (max-width: 390px) {
    .video-wrapper {
       border-width: 6px;
    }
    .name{
       font-size: 25px;}
       .title{
          font-size: 19px;
       } 
         .title-1{
          font-size: 19px;
       } 
       .rkk{
          width: 41px;
          margin-left: 30px;
          margin-right: 30px;
       }
.MMOOSSAA{
  padding-left: 0%;
  width: 300px;
 margin-left:  -13px;
 margin-right: 0px;
 padding-bottom: 0%;
}
 }

 /* ===================== تحسين الشعار و section "about me" للتجاوب ===================== */

/* إزالة فراغات جانبية عامة */
html, body { margin:0; padding:0; width:100%; box-sizing:border-box; }

/* شعار الهيدر: حجم مناسب ومثبت إلى اليسار/اليمين حسب dir */
header .ssddg,
header .logo,
header img.logo {
  width: 43px;
  height: 43px;
  border-radius: 8px;
 
  display: block;
}

/* على شاشات كبيرة يمكن تكبير الشعار */
@media (min-width: 900px) {
  header .ssddg { width:42px; height:42px; }
}

/* ABOUT ME - حاوية مرنة ومتجاوبة */
.aboutMe {
  width: 100%;
  max-width: 1100px;
  margin: 24px auto;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(112,11,11,0.06));
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}

/* صورة التعريف - حجم ثابت متناسب ويبدو جيد على الموبايل */
.aboutMEImg,
.aboutImg {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  border: 3px solid rgba(171, 0, 0, 0.35);
  flex: 0 0 200px;
}
.fvg
/* نص عني - يحتل المساحة الباقية ويتراجع على الشاشات الصغيرة */
.textContainer,
.aboutContent {
  flex: 1 1 auto;
  min-width: 0; /* مهم لمنع overflow داخل flex */
  color: #fff;
  padding: 8px 12px;
}

/* عنوان ونص */
.textContainer h2,
.aboutContent h2 { font-size: 1.4rem; margin-bottom: 8px; color: #fff; }
.aboutContent p {
  color: #e9e9e9;
  line-height: 1.6;
  font-size: 0.98rem;
  text-align: right; /* مناسب للنص العربي */
  text-decoration: none;
}

/* تجاوب - على الموبايل نرتب العناصر عمودي */
@media (max-width: 720px) {
  .aboutMe {
    flex-direction: column;
    padding: 12px;
    gap: 12px;
  }
  .aboutMEImg, .aboutImg {
    width: 160px;
    height: 160px;
    flex: 0 0 160px;
  }
  .textContainer, .aboutContent {
    padding: 6px 4px;
    text-decoration: none;
  }
 
} 

/* شاشات أصغر جدًا: نص أصغر والمسافة أقل */
@media (max-width: 380px) {
  .aboutMEImg, .aboutImg { width: 140px; height: 140px; flex: 0 0 140px; }
  .textContainer p, .aboutContent p { font-size: 0.9rem; }
}

/* منع أي هوامج سالبة أو عرض ثابت يكسّر التجاوب */
/* تلغي قواعد قديمة متضاربة */
.aboutMePar,
.aboutMEImg,
.textContainer,
.aboutContent {
  margin: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* =================================================================================== */