/* Styles for the logo */
/*
.logo {
  position: fixed;
  top: 100px;
  left: 100px;
  transform: translate(-50%, -50%);
}

.logo img {
  width: 100px; 
  max-width: 110px; 
  height: auto; 
  border-radius: 50%;
} */

/* Styles for the navigation bar */
.bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #68c6d9d0;
  padding: 1em; /* Use relative padding for responsiveness */
}

.bar a {
  text-decoration: none;
  color: #000;
  margin: 0 1em; /* Use relative margin for responsiveness */
  font-size: 1em; /* Use relative font size for responsiveness */
}

.bar a:hover {
  color: #fff;
}

/* Styles for the content section */
.content {
  display: flex;
  flex-wrap: wrap;
  justify-content:left;
  align-items:last baseline;
  padding: 1em;
  margin: 0 auto;
}

.content a {
  text-decoration: none;
  color: #067796;
  font: inherit;
  margin: 0.5em; /* Use relative margin for responsiveness */
  font-size: 1.7em; /* Use relative font size for responsiveness */
}

.content a:hover {
  color: #00000009;
}

.content img {
  max-width: 360px; /* تحديد أقصى عرض للصورة */
  max-height: 360px; /* تحديد أقصى ارتفاع للصورة */
  height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
  border-radius: 10px; /* إضافة حواف مستديرة إذا كانت الصورة مربعة */
  margin: 0.5em; /* Use relative margin for responsiveness */
  border-style:initial;
}

/* Styles for the image grid */
.rang1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1em; /* Use relative gap for responsiveness */
}

.rang1 img {
  width: 130px; /* Use relative width for responsiveness */
  
  height: 130px; /* Maintain aspect ratio */
  margin: 0.5em; /* Use relative margin for responsiveness */
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.rang1 img:hover {
  transform: scale(1.05);
}
.rang2 img:hover{
  transform: scale(1.05);}
.rang2{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 1em; /* Use relative gap for responsiveness */

}
.rang2 img{
  max-width: 80%; /* تحديد أقصى عرض للصورة */
  max-height: 40vh; /* تحديد أقصى ارتفاع للصورة */
  height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
  border-radius: 10px; /* إضافة حواف مستديرة إذا كانت الصورة مربعة */
  margin: 0.5em; /* Use relative margin for responsiveness */
  
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;


}

/* Overlay styles */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
}

.overlay img.enlarged {
  max-width: 80%;
  max-height: 80%;
  border-radius: 10px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease-in-out;
}

.overlay img.enlarged:hover {
  transform: scale(1.05);
}

/* Styles for video */
video {
  width: 90%; /* Use relative width for responsiveness */
  max-width: 800px;
  height: auto; /* Maintain aspect ratio */
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}





 /*  
.navbar a {
width:auto ;
color:#000;
text-align: center;
padding: 1.4%;
text-decoration: none;
border-right:1px solid #91e4e8;

}
.navbar{
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  position: fixed;
  justify-content: center;
  top: 13%;
  left: 35%; 
  width: 50%;
  z-index: 9999;
  transition: background-color 0.3s;
} 
.navbar a:hover{
background-color: rgba #a9edf1;
} 
*/
.show,
.show1 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh; /* اختصار 100vh لتجنب تجاوز المحتوى */
  margin: 0 6px; /* استخدام هامش واحد فقط لسهولة الصيانة */
}

.show img,
.show1 img {
  max-width: 100%;
  max-height: 100%; /* تغيير الارتفاع الأقصى ليكون 100% ليتناسب مع الارتفاع */
  width: auto; /* ضمان الحفاظ على نسبة العرض إلى الارتفاع */
  border-radius: 10px;
  margin: 0 10px; /* تعيين هامش للصورة والتي تليها */
}

@media (max-width: 768px) {
  .show,
  .show1 {
    flex-direction: column; /* تغيير ترتيب العناصر إلى عمودي عندما تكون الشاشة أصغر من 768 بكسل */
    height: auto; /* إعادة تعيين الارتفاع إلى التلقائي لضمان عرض كافة المحتوى */
  }
}


/* Styles for the logo */
.logo {
  text-align: center; /* توسيط الشعار أفقيًا */
  margin: bottom 6px;; /* تباعد بين الشعار والقائمة */
}

.logo img {
  width: 100px; /* تحديد عرض الشعار */
  height: auto; /* الحفاظ على نسبة العرض إلى الارتفاع */
  border-radius: 50%;
}

/* Styles for the navbar */
.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #68c6d900; /* تغيير لون الخلفية */
  padding: 1rem 0; /* هامش داخلي للقائمة */
  transition: background-color 0.3s;
  margin-bottom: 1rem; /* مسافة بين القائمة والعنصر الذي يليها */
}

.navbar a {
  text-decoration: none;
  color: #000;
  margin: 0 1rem; /* تباعد بين الروابط */
  font-size: 1rem; /* حجم النص */
  border-right: 1px solid #91e4e8;
}

/* تغيير استخدام الوحدات النسبية للحفاظ على التوافق مع الأجهزة */
@media (min-width: 768px) {
  .navbar {
    padding: 1.5rem 0;
  }

  .navbar a {
    margin: 0 1.5rem;
    font-size: 1.1rem;
  }
}

/* إزالة الخط السفلي عندما يتم وضع المؤشر على الروابط */
.navbar a:hover {
  text-decoration: none;
}



/* Styles for the bars icon */
.fa-bars {
  display: none; /* إخفاء الأيقونة في العرض الافتراضي */
}

/* Responsive design using media queries */
@media screen and (max-width: 768px) {
  /* Adjustments for smaller screens */
  .navbar {
    flex-direction: column; /* ترتيب الروابط بشكل عمودي عند الشاشات الصغيرة */
    padding: 10px; /* تعديل الهامش الداخلي للقائمة */
  }

  .logo {
    order: -1; /* ترتيب الشعار أولاً عند الشاشات الصغيرة */
    margin-bottom: 0; /* إزالة التباعد بين الشعار والقائمة */
  }

  .fa-bars {
    display: block; /* عرض الأيقونة عند الشاشات الصغيرة */
    margin-bottom: 10px; /* تباعد بين الأيقونة والقائمة */
    cursor: pointer; /* تغيير شكل المؤشر ليدل على أنها قابلة للنقر */
  }

  .navbar a {
    margin: 10px 0; /* تباعد بين الروابط عند الشاشات الصغيرة */
  }
}
h1{
color: #2b2929;
text-align: center;
}
h3{
  color:rgb(202, 6, 6);
  text-align: center;
}
h5{color: #2b2929;  text-align: center;
}
h2{
color:rgb(8, 106, 171);
text-align: center;
font-style: inherit;
}
p{
  color: #067796;
  font-size: 10ch;
  font: inherit;
  text-align: center;
}
/* تنسيق العنصر الذي يحتوي على الصور */
.rang2 {
  display: flex; /* تعيين العرض بنمط الـ Flexbox */
  flex-wrap: wrap; /* السماح بالتفاف الصور إذا كانت الشاشة صغيرة جدا */
  justify-content: center; /* محاذاة الصور في المنتصف أفقيًا */
}

/* تنسيق الصور */
.rang2 img {
  width: 200px; /* تحديد عرض الصور */
  height: auto; /* السماح لارتفاع الصور بالتعديل تلقائيًا */
  margin: 10px; /* تحديد هامش بين الصور */
  border-radius: 10px; /* إضافة حواف مستديرة للصور */
  transition: transform 0.3s ease; /* تأثير تحويل الصور */
}

/* تأثير تحويل الصور عند التحويل */
.rang2 img:hover {
  transform: scale(1.1); /* تكبير الصورة عند تحويل المؤشر */
}
.rang1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px; /* يمكنك تغيير هذا الرقم حسب الفراغ الذي ترغب في وضعه بين الصور */
}

.content img {
  max-width: 100%;
  height: auto;
  display: block;
}

.content img:hover {
  transform: scale(1.1); /* تكبير الصورة عند تحويل المؤشر */
}
.content {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 10px; /* يمكنك تغيير هذا الرقم حسب الفراغ الذي ترغب في وضعه بين الصور */
}

.content img {
  max-width: 100%;
  height: auto;
  display: block;
}