/* Start Global Rules */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
:root {
  --main-color: #0c3e63;
  --main-color-alt: #e9e9e9;
  --section-background-color: #cdc8c8;
  --main-transition: 0.3s;
}
html {
  scroll-behavior: smooth;
}
/* تم إبقاء خطوط Tajawal كما هي */
.tajawal-extralight {
  font-family: "Tajawal", sans-serif;
  font-weight: 200;
  font-style: normal;
}
.tajawal-light {
  font-family: "Tajawal", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.tajawal-regular {
  font-family: "Tajawal", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.tajawal-medium {
  font-family: "Tajawal", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.tajawal-bold {
  font-family: "Tajawal", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.tajawal-extrabold {
  font-family: "Tajawal", sans-serif;
  font-weight: 800;
  font-style: normal;
}
.tajawal-black {
  font-family: "Tajawal", sans-serif;
  font-weight: 900;
  font-style: normal;
}

body {
  font-family: "Tajawal", sans-serif;
  background-color: #e9e9e9;
  direction: rtl;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
.container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
/* Small */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
/* Medium */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
/* Large */
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
/* End Global Rules */

/* ------------------------------------------------------------------------------------------------------ */

/* Start Header */
.header {
  position: fixed;
  background-color: var(--main-color);
  width: 100%;
  z-index: 100; /* التعديل: زيادة Z-index لضمان ظهوره فوق كل شيء */
  box-shadow: 0px 5px 15px var(--main-color);
}
@media (max-width: 767px) {
  .header {
    position: static;
    box-shadow: none;
  }
}
.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 80px; /* التعديل: تحديد ارتفاع أدنى للـ Header */
}
.header .container img {
  width: 100px;
  height: fit-content;
}
@media (max-width: 767px) {
  .header .container {
    flex-direction: column;
    gap: 20px;
  }
}
.header h2 {
  color: white;
}
.header .links {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.header .links li {
  margin-right: 20px;
}
.header .links li a {
  color: white;
  transition: var(--main-transition);
}
.header .links li a:hover {
  color: var(--section-background-color);
}
.header .awesome {
  color: white;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.header .awesome i {
  margin-right: 25px;
  transition: var(--main-transition);
  cursor: pointer;
}
.header .awesome i:hover {
  color: var(--main-color-alt); /* التعديل: تغيير لون التمرير ليكون مرئياً (أبيض) */
}
@media (max-width: 767px) {
  .header span {
    margin: 20px 0;
  }
}
/* End Header */

/* ------------------------------------------------------------------------------------------------------ */

/* Fix: Header Spacing on Large Screens */
/* التعديل: إضافة مسافة علوية للقسم الأول لتعويض الـ Header الثابت */
/* يفترض أن القسم الأول هو .section */
@media (min-width: 768px) {
  .section:first-of-type {
    margin-top: 80px; /* قيمة تقديرية لارتفاع الـ Header */
  }
}
/* ------------------------------------------------------------------------------------------------------ */

/* Start Section (Hero Area) */
.section {
  padding-top: 100px;
  padding-bottom: 100px;
  margin-top: 0;
  background: url(../imgs/Section.jpg);
  background-size: cover;
  min-height: 100vh;
  position: relative;
}
.section .opacity {
  position: absolute;
  width: 100%;
  height: 100%; /* التعديل: لجعل التعتيم يغطي الـ Section بالكامل */
  background-color: black;
  opacity: 0.35; /* التعديل: كتابة نسبة الـ opacity بالطريقة الصحيحة */
  z-index: 2;
  top: 0; /* التعديل: البدء من الأعلى */
}
.section .container {
  position: relative;
  /* التعديل: لإعطاء الـ Container مساحة كافية داخل الـ Section */
  min-height: calc(100vh - 80px); /* 80px هي ارتفاع الهيدر تقريباً */
  display: flex; /* التعديل: لتمكين الـ info والصورة من العمل معاً */
  align-items: center;
  justify-content: flex-start; /* المحاذاة الافتراضية لليمين (RTL) */
}
.section .info {
  z-index: 3;
  /* التعديل: إلغاء الـ position: absolute والاعتماد على الـ Flexbox في الـ Container */
  position: relative; 
  top: auto; 
  left: auto;
  flex: 1; /* التعديل: لإعطاء مساحة للـ info */
}
.section .info div {
  color: var(--main-color-alt);
  font-size: 50px;
  width: 400px;
  font-weight: bold;
}
@media (max-width: 991px) {
  .section {
    min-height: 50vh;
  }
  .section .info div {
    font-size: 30px;
    width: 100%; /* التعديل: للسماح له بالتكيف */
  }
}
.section .info p {
  color: var(--section-background-color);
  width: 440px;
}
@media (max-width: 767px) {
  .section {
    min-height: 80vh; /* التعديل: زيادة الارتفاع على الجوال */
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .section .opacity {
    height: 100%;
    top: 0;
  }
  .section .info {
    text-align: center;
    left: auto; /* التعديل */
    top: auto; /* التعديل */
    margin: 0 auto;
  }
  .section .info div {
    width: 100%; /* التعديل: للسماح بالتكيف مع الـ Container */
    font-size: 40px;
    margin: 10px auto;
  }

  .section .info p {
    width: 90%; /* التعديل: للسماح بالتكيف مع الـ Container */
    margin: 10px auto;
  }
  .section .container {
    min-height: 100%;
  }
}
.section img {
  width: 600px;
  height: 400px;
  /* flex: 50;  يمكن الاستغناء عنها */
  margin-right: -60px;
  z-index: 3; /* التعديل: لجعل الصورة فوق التعتيم */
}
@media (max-width: 767px) {
  .section img {
    display: none;
  }
}
@media (max-width: 991px) {
  .section img {
    width: 300px;
    height: 200px;
    margin-right: 0;
  }
}
/* End Section */

/* ------------------------------------------------------------------------------------------------------ */

/* Start Home (Features Section) */
.home {
  background-color: var(--main-color);
  padding-top: 100px;
  padding-bottom: 100px;
  border-bottom: 1px solid var(--main-color);
  margin-top: 0;
}
.home .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.home .box {
  text-align: center;
  /* التعديل: لضمان تساوي الارتفاعات والمظهر الأفضل */
  height: 100%;
  padding: 30px 15px; 
  /* يمكن إضافة خلفية بيضاء لجعل المحتوى بارزاً: background-color: white; */
}
.home .box img {
  width: 60px;
  height: 65px;
}
.home .box h3 {
  color: white;
}
.home .box p {
  color: var(--main-color-alt);
}
/* End Home */

/* ------------------------------------------------------------------------------------------------------ */

/* Start Portfolio (Categories Section) */
.portfolio {
  padding-top: 100px;
  padding-bottom: 100px;
  border-bottom: 1px solid var(--main-color);
  margin-top: 0;
  background-color: var(--section-background-color);
}
.portfolio .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.portfolio .info {
  margin-bottom: 80px;
  text-align: center;
}
.portfolio .info h2 {
  color: var(--main-color);
  font-size: 50px;
  margin-top: 0;
}
.portfolio .info p {
  color: var(--main-color);
}
.portfolio .box {
  background-color: var(--main-color-alt);
  padding: 10px;
  text-align: center;
  position: relative;
  z-index: 0;
  /* التعديل: إضافة overflow: hidden لحصر تأثير الحركة داخل الصندوق */
  overflow: hidden; 
}
.portfolio .box img {
  width: 100%;
  transition: var(--main-transition);
}
.portfolio .box:hover img {
  /* التعديل: تبسيط التحريك لمنع التشوه */
  transform: scale(1.05); 
}
.portfolio .box h3 {
  color: var(--main-color);
  transition: var(--main-transition);
  font-size: 30px;
}
.portfolio .box:hover h3 {
  /* التعديل: إزالة التحريك الذي يدفع النص خارج الصندوق */
  transform: none; 
}
.portfolio .box p {
  color: #777;
  margin: 30px auto;
  transition: var(--main-transition);
  font-size: 15px;
}
.portfolio .box:hover p {
  /* التعديل: إزالة التحريك الذي يدفع النص خارج الصندوق */
  transform: none; 
}
/* تم الإبقاء على تنسيقات الزوايا الزخرفية كما هي */
.portfolio .bf {
  position: relative;
}
.portfolio .bf::before {
  content: "";
  width: 200px;
  height: 20px;
  position: absolute;
  background-color: var(--main-color);
  left: 0px;
  top: -20px;
  transition: var(--main-transition);
}
.portfolio .bf::after {
  content: "";
  width: 20px;
  height: 200px;
  position: absolute;
  background-color: var(--main-color);
  left: -20px;
  top: -20px;
  transition: var(--main-transition);
}
.portfolio .bf:hover::before,
.portfolio .bf:hover::after {
  background-color: white;
}
.portfolio .af {
  position: relative;
}
.portfolio .af::before {
  content: "";
  width: 200px;
  height: 20px;
  position: absolute;
  background-color: var(--main-color);
  right: 0px;
  bottom: -20px;
  transition: var(--main-transition);
}
.portfolio .af::after {
  content: "";
  width: 20px;
  height: 200px;
  position: absolute;
  background-color: var(--main-color);
  right: -20px;
  bottom: -20px;
  transition: var(--main-transition);
}
.portfolio .af:hover::before,
.portfolio .af:hover::after {
  background-color: white;
}
@media (max-width: 991px) {
  .portfolio .bf::before,
  .portfolio .bf::after {
    display: none;
  }
  .portfolio .af::before,
  .portfolio .af::after {
    display: none;
  }
}
.portfolio a {
  padding: 0;
  color: var(--main-color);
  font-weight: bold;
}
.portfolio i {
  transition: var(--main-transition);
}
.portfolio a:hover i {
  margin-right: 5px;
}
/* End Portfolio */

/* ------------------------------------------------------------------------------------------------------ */

/* Start News */
.news {
  padding-top: 100px;
  padding-bottom: 100px;
  border-bottom: 1px solid var(--main-color);
  margin-top: 0;
  background-color: var(--main-color-alt);
}
.news .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 30px;
  margin-bottom: 100px;
}
.news .box {
  cursor: pointer;
  position: relative;
  /* التعديل: إضافة overflow: hidden لمنع تأثير :before من الخروج عن الحدود */
  overflow: hidden; 
}
.news .box::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  background-color: var(--main-color);
  opacity: 0.6;
  bottom: 0; /* التعديل: البدء من أسفل الصندوق تماماً */
  left: 0; /* التعديل: البدء من اليسار تماماً */
  /* التعديل: إزالة الـ translate X لتجنب المشاكل */
  transform: none; 
  transition: var(--main-transition);
  z-index: 1; /* التعديل: ليكون فوق الصورة وأسفل النص */
}
.news .box:hover::before {
  width: 100%;
  height: 100%; /* التعديل: التغطية الكاملة */
}
.news img {
  width: 100%;
  max-width: 100%;
  display: block; /* التعديل: لضمان إزالة أي تباعد غير مرغوب فيه أسفل الصورة */
}
.news .box p {
  color: white;
  text-align: center;
  font-weight: bold;
  width: 90%; /* التعديل: زيادة عرض النص */
  margin: 0 auto;
  bottom: 20px;
  position: absolute;
  left: 50%; /* التعديل: لتوسيط النص */
  transform: translateX(-50%); /* التعديل: لتوسيط النص */
  z-index: 2; /* التعديل: ليكون فوق التعتيم */
}
.news .info {
  text-align: center;
  margin-bottom: 80px;
}
.news .info h3 {
  color: var(--main-color);
  font-size: 50px;
  margin-top: 0;
}
.news .info p {
  color: var(--main-color);
}
@media (max-width: 767px) {
  .news .info p {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
/* End News */

/* ------------------------------------------------------------------------------------------------------ */

/* Start Footer */
.footer {
  color: white;
  /* التعديل: يجب تغيير هذا اللون في الـ HTML ليظهر النص الأبيض على خلفية داكنة، لكننا سنعدل الـ CSS هنا */
  background-color: var(--main-color); /* التعديل: استخدام اللون الرئيسي (الأزرق الداكن) للخلفية */
  padding-top: 60px; /* التعديل: إضافة تباعد علوي */
}
.footer a {
  color: var(--main-color-alt); /* التعديل: تغيير لون الروابط إلى الأبيض الفاتح لتكون مرئية */
  transition: var(--main-transition);
}
.footer a:hover {
    color: var(--section-background-color);
}
@media (max-width: 767px) {
  .footer {
    text-align: center;
  }
}
.footer .container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  column-gap: 30px;
  row-gap: 30px;
}
.footer .box .icons {
  color: var(--main-color-alt); /* التعديل: تغيير لون الأيقونات */
}
.footer .box .icons i {
  margin-left: 10px;
  font-size: 20px;
}
.footer .box p {
  width: 90%; /* التعديل: زيادة العرض ليتسع المحتوى */
  line-height: 1.6;
  color: var(--main-color-alt); /* التعديل: لون النص يتناسب مع الخلفية الداكنة */
}
@media (max-width: 767px) {
  .footer .box p {
    margin-left: auto;
    margin-right: auto;
  }
}
.footer .one {
  position: relative;
}
.footer .one img {
  width: 100px;
  margin-top: 25px;
}
.footer .one h3 {
  font-size: 30px;
  color: var(--main-color-alt); /* التعديل: لون العنوان يتناسب مع الخلفية الداكنة */
}
.footer .two h3,
.footer .three h3 {
  font-size: 30px;
  color: var(--main-color-alt); /* التعديل: لون العنوان يتناسب مع الخلفية الداكنة */
}
.footer .line i {
  color: var(--main-color-alt); /* التعديل: لون الأيقونة يتناسب مع الخلفية الداكنة */
  font-size: 20px;
}
.footer .line .info {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 20px;
  color: var(--main-color-alt); /* التعديل: لون النص يتناسب مع الخلفية الداكنة */
}
.footer .autograph {
  background-color: #082d47; /* لون أغمق قليلاً من الـ main-color */
  text-align: center;
  padding: 10px 0;
  margin-bottom: 0;
  border-top: 1px solid var(--main-color);
  color: var(--main-color-alt); /* التعديل: إضافة لون للنص في هذا القسم */
}
.footer .autograph i {
  color: red; /* التعديل: جعل رمز القلب أحمر */
  margin: 0 5px;
}
/* End Footer */