@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.fixed-icons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon svg {
  width: 24px;
  height: 24px;
  fill: #ffffff;
}

.icon:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.phone-icon {
  background-color: #0d6efd; /* لون الاتصال */
  color: #fff;
}

.whatsapp-icon {
  background-color: #25d366; /* لون واتساب */
  color: #fff;
}


  .top-bar {
    background-color: rgb(19, 0, 187); /* اللون الأساسي للشريط */
    color: #fff; /* لون النص */
    padding: 10px 20px; /* حشوة داخل الشريط */
    display: flex;
    justify-content: space-between; /* توزيع العناصر على الطرفين */
    align-items: center;
}

/* تنسيق قسم الموقع */
.top-bar__location {
    display: flex;
    align-items: center;
    gap: 5px; /* المسافة بين الأيقونة والنص */
    font-size: 12px;
}

.top-bar__location i {
    font-style: normal; /* إزالة الميل من الأيقونة */
}

/* تنسيق معلومات الاتصال */
.top-bar__contact-info {
  font-size: 12px;
    display: flex;
    align-items: center;
    gap: 15px; /* المسافة بين كل عنصر */
}

.top-bar__contact-item {
    display: flex;
    align-items: center;
    gap: 5px; /* المسافة بين الأيقونة والنص */
}

.top-bar__contact-item i {
    font-style: normal; /* إزالة الميل من الأيقونة */
}
  
/*start header*/
.a6 {
  background-color: #f4f4f4; /* لون خلفية عام */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh; /* ارتفاع 90% من الشاشة */
  padding: 20px;
}

.a7 {
  display: flex;
  flex-direction: row; /* وضع الصورة والنصوص بجانب بعض */
  justify-content: space-between;
  align-items: center;
  max-width: 1200px; /* العرض الكلي للصفحة */
  width: 100%;
}

.a8 {
  max-width: 50%; /* تخصيص عرض النصوص */
  text-align: right; /* محاذاة النصوص لليمين */
}

.a8 h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #222;
  font-weight: bold;
}

.a8 p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  color: #444;
  line-height: 1.6;
}

.a8 .a10 {
  background-color: rgb(10, 23, 143);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.a8 .a10:hover {
  background-color: #d00;
}

.a9 {
  max-width: 50%; /* تخصيص عرض الصورة */
}

.a9 img {
  width: 100%;
  border-radius: 10px; /* جعل الزوايا ناعمة */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ظل للصورة */
}

/* استجابة الشاشات الصغيرة */
@media (max-width: 768px) {
  .a7 {
      flex-direction: column; /* جعل الصورة والنصوص تحت بعض */
  }

  .a8, .a9 {
      max-width: 100%; /* النصوص والصورة عرض كامل */
      text-align: center; /* محاذاة النصوص للوسط على الشاشات الصغيرة */
  }

  .a8 h1 {
      font-size: 2rem; /* تصغير حجم العنوان */
  }

  .a8 p {
      font-size: 1rem; /* تصغير النص */
  }

  .a9 img {
      margin-top: 20px; /* مسافة بين النص والصورة */
  }
}
/*end*/
/* Responsive Design */
@media (max-width: 768px) {
  .nav-links-55 {
    display: none;
    flex-direction: column;
    background-color: #fff;
    position: absolute;
    top: 60px;
    right: 0;
    width: 100%;
    border-top: 1px solid #c00;
  }

  .nav-links-55.active {
    display: flex;
  }

  .menu-toggle-55 {
    display: block;
  }
}

/*end header */

  /* Start Variables */
:root {
  --main-color: #10cab7;
  --secondary-color: #2c4755;
  --section-padding: 60px;
  --section-background: #f6f6f6;
  --main-duration: 0.5s;
}
/* End Variables */
/* Start Global Rules */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

.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 Components */
.special-heading {
  color: #ebeced;
  font-size: 100px;
  text-align: center;
  font-weight: 800;
  letter-spacing: -3px;
  margin: 0;
}
.special-heading + p {
  margin: -30px 0 0;
  font-size: 20px;
  text-align: center;
  color: #797979;
}
@media (max-width: 767px) {
  .special-heading {
    font-size: 60px;
  }
  .special-heading + p {
    margin-top: -20px;
  }
}
/* End Components */

/* Start Landing Section */

.landing {
  background-image: url(images/1\ \(2\).jpg);
  background-position: center;
  background-size: cover;
  height: 80vh;
  position: relative;
}

.btn2{
  display: inline-block;
    padding: 10px 20px; 
    background-color: rgb(2, 6, 255); 
    color: #ffffff; 
    text-decoration: none; 
    border-radius: 5px; 
    font-size: 1rem;
    transition: background-color 0.3s;
    margin-top: 15px;
}

.btn2:hover {
  background-color: #0401a0; 
}




.landing .intro-text {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 100%;
  font-family: tajawal , sans-serif;
}
.landing .intro-text h1 {
  margin: 0;
  font-weight: 600;
  font-size: 40px;
  color: rgb(255, 255, 255);
}
.landing .intro-text p {
  font-size: 25px;
  line-height: 1.8;
  color: white;
  font-style: italic;
}
/* End Landing Section */
/* Start Features */
.x1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 5%;
  background-color: #f9f9f9;
  direction: rtl; /* لجعل الاتجاه من اليمين إلى اليسار */
}

.x2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.x3 {
  flex: 1;
  padding: 10px;
}

.x3 img {
  max-width: 100%;
  border-radius: 10px;
}

.x4 {
  flex: 1;
  padding: 10px;
  text-align: right; /* النصوص تكون بمحاذاة اليمين */
  font-family: "Tajawal", "Cairo", "Arial", sans-serif; /* خطوط تدعم العربية */
}

.x4 h2 {
  font-size: 2rem;
  color: #202020;
  margin-bottom: 10px;
}

.x5 {
  width: 80px;
  height: 4px;
  background-color: #1444e0;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.x4 p {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}

.x6 {
  display: inline-block;
  background-color: #1444e0;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.x6:hover {
  background-color: #180364;
}

/* تصميم متجاوب للشاشات الصغيرة */
@media screen and (max-width: 768px) {
  .x2 {
    flex-direction: column; /* النص والصورة عموديين بدلاً من صف */
  }

  .x4 {
    text-align: center; /* النص يكون بمحاذاة الوسط */
  }

  .x3 {
    margin-top: 20px; /* إضافة مسافة بين النص والصورة */
  }
  .x5 {
   margin-right: 166px;
  }
}

/* End Features */
/* Start Services  */
.po1-section {
  padding: 50px 5%;
  background-color: #f9f9f9;
  text-align: center;
}

.po1-title {
  font-size: 2rem;
  color: #202020;
  margin-bottom: 10px;
  font-family: "Tajawal", "Cairo", "Arial", sans-serif;
}

.po1-subtitle {
  font-size: 1rem;
  color: #333;
  margin-bottom: 30px;
  line-height: 1.6;
}

.po2-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.po3-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  width: 300px;
}

.po3-card .po3-icon img {
  max-width: 100%;
  border-radius: 10px;
}

.po3-title {
  font-size: 1.2rem;
  color: #202020;
  margin: 15px 0 10px;
}

.po3-description {
  font-size: 1rem;
  color: #555;
  margin-bottom: 15px;
}

.po3-btn {
  display: inline-block;
  background-color: #1444e0;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
  margin-top: 15px;
}

.po3-btn:hover {
  background-color: #180364;
}

/* تصميم متجاوب */
@media screen and (max-width: 768px) {
  .po2-grid {
    flex-direction: column;
    align-items: center;
  }

  .po3-card {
    width: 100%;
    max-width: 400px;
  }
}
/* Start Services  */
/* Start Portfolio */
.why-us-section {
  background-color: #11152d;
  color: #fff;
  padding: 50px 5%;
  text-align: center;
  position: relative;
}

.section-title {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 20px;
  font-family: "Tajawal", "Cairo", "Arial", sans-serif;
}

.section-description {
  font-size: 1rem;
  color: #ccc;
  margin-bottom: 40px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.feature-card {
  background: #1a203f;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.feature-card .icon {
  font-size: 2rem;
  color: #e01414;
  margin-bottom: 15px;
}

.feature-title {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 10px;
}

.feature-description {
  font-size: 1rem;
  color: #ccc;
  line-height: 1.6;
}

/* تصميم متجاوب */
@media screen and (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
}
/* End Portfolio */
/* Start About */
.projects-section {
  background-color: #fff;
  padding: 50px 5%;
  text-align: center;
}

.section-title {
  font-size: 2rem;
  color: #4a4a4a;
  margin-bottom: 30px;
  font-family: "Tajawal", sans-serif;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.project-card {
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-card:hover {
  transform: scale(1.05);
}

.view-more-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 10px 20px;
  background-color: #0427c2;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.view-more-btn:hover {
  background-color: #0c1e5a;
}

/* تصميم متجاوب */
@media screen and (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}
/* End About */
/* Start Contact */
.contact-section {
  background-color: #fff;
  padding: 50px 5%;
  font-family: "Tajawal", sans-serif;
  direction: rtl; /* النصوص من اليمين لليسار */
  text-align: right;
}

.section-title {
  text-align: center;
  font-size: 2rem;
  color: #222;
  margin-bottom: 10px;
}

.section-description {
  text-align: center;
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 30px;
}

.contact-info {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap; /* لدعم الشاشات الصغيرة */
}

.info-card {
  text-align: center;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 200px;
}

.info-card i {
  font-size: 1.5rem;
  color: #0f1894;
  margin-bottom: 10px;
}

.info-card p {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.info-card span {
  font-size: 0.9rem;
  color: #777;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto; /* يجعل النموذج في المنتصف */
  text-align: center;
}

.contact-form h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #222;
}

.contact-form p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
}

.contact-form form input,
.contact-form form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
  text-align: right; /* محاذاة النصوص داخل الحقول */
}

.contact-form form button {
  background-color: #0a2068;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.contact-form form button:hover {
  background-color: #230a69;
}

/* تصميم متجاوب */
@media screen and (max-width: 768px) {
  .contact-info {
    flex-direction: column;
  }

  .info-card {
    width: 100%;
  }
}
/* End Contact */
/* Start Footer */
.footer {
  text-align: center;
  padding: 20px;
  background-color: #ffffff; /* لون خلفية الفوتر */
  color: #000000; /* لون النص */
  font-family: 'Arial', sans-serif;
  font-size: 14px;
}

.footer .encouragement {
  font-size: 20px;
  font-family: tajawal , sans-serif;
  margin-bottom: 10px;
}

.footer .footer-line {
  margin: 10px auto;
  width: 50%; /* عرض الخط */
  border: 0;
  border-top: 1px solid #ddd;
}

.footer .copyright {
  font-family: tajawal , sans-serif;
  font-size: 20px;
  color: #000000;
}

.footer .copyright span {
  color: #000000;
}
.footer .author-name {
  font-weight: bold;
  color: #25d366; /* لون أخضر خاص بالواتساب */
  text-decoration: none; /* إزالة الخط السفلي */
}

.footer .author-name:hover {
  text-decoration: underline; /* خط تحت النص عند التمرير */
}
/* End Footer */






/* who usssss page start*/
.t1 {
  position: relative;
  width: 100%;
  height: 400px; /* يمكن تعديل الارتفاع حسب الحاجة */
  background-image: url('who_images/1.jpg'); /* استبدل "your-image.jpg" بمسار الصورة */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* طبقة التعتيم */
.t2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* تأثير التعتيم */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* تصميم النص */
.t3 {
  font-size: 2.5rem;
  color: #fff;
  font-family: "Tajawal", "Cairo", sans-serif;
  text-align: center;
}

/*section started */
.g1 {
  padding: 50px 20px;
  background-color: #fff;
}

.g2 {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.g3 {
  display: flex;
  width: 100%;
}

.g4,
.g6 {
  flex: 1;
  padding: 20px;
}

.g5 img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.g7 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #0e1b4d;
}

.g8 {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
  color: #555;
}

.g9 {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #0d0080;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
  transition: 2s;
}

.g9:hover {
  background-color: #a00000;
}

/* Responsiveness */
@media (max-width: 768px) {
  .g3 {
    flex-direction: column;
  }

  .g4,
  .g6 {
    padding: 10px;
  }

  .g7 {
    font-size: 24px;
  }

  .g8 {
    font-size: 14px;
  }

  .g9 {
    font-size: 14px;
  }
}

/* section ended*/


/*section 2 start*/
.s100 {
  background-image: url('who_images/1.jpg'); /* ضع مسار الصورة هنا */
  background-size: cover;
  background-position: center;
  padding: 60px 20px;
}

.s200 {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.s200 h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #333;
}

.s200 p {
  font-size: 16px;
  color: #555;
}

.s100 .container {
  max-width: 1200px;
  margin: auto;
}

.s100 .row {
  display: flex;
  flex-wrap: wrap; /* يسمح للعناصر بالانتقال إلى سطر جديد */
  gap: 20px;
  justify-content: center; /* محاذاة العناصر في المنتصف */
}

.s100 .col-md-4 {
  flex: 1 1 calc(33.333% - 20px); /* اجعل العرض 33% مع فراغ */
  min-width: 250px; /* تحديد الحد الأدنى للعرض */
  max-width: 400px; /* تحديد الحد الأقصى للعرض */
}

@media (max-width: 768px) {
  .s100 .col-md-4 {
    flex: 1 1 calc(50% - 20px); /* اجعل العرض 50% للشاشات الصغيرة */
  }
}

@media (max-width: 576px) {
  .s100 .col-md-4 {
    flex: 1 1 100%; /* اجعل العرض 100% للشاشات الصغيرة جدًا */
  }
}

/*section 2 end*/


/*testimonials start*/


.c1 {
  background-color: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

.c1 h2 {
  font-size: 32px;
  color: #000000;
  margin-bottom: 40px;
}

/* حاوية الشهادات */
.c3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* عناصر الشهادات */
.c4 {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 350px;
  flex: 1 1 calc(33.333% - 20px);
  text-align: center;
}

.c4 img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.c4 h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #333333;
}

.c4 p {
  font-size: 16px;
  color: #555555;
}


.c4 {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 350px;
  flex: 1 1 calc(33.333% - 20px);
  text-align: center;
  display: flex; /* تفعيل Flexbox */
  flex-direction: column; /* ترتيب العناصر عموديًا */
  align-items: center; /* محاذاة العناصر في المنتصف أفقياً */
  justify-content: center; /* محاذاة العناصر في المنتصف عموديًا */
}

.c4 img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

/* استعلامات الوسائط للشاشات الصغيرة */
@media (max-width: 768px) {
  .c4 {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 576px) {
  .c4 {
    flex: 1 1 100%;
  }
}
/*testimonials end*/
/*  التفاصيل */

/* الخلفية */
/* الخلفية مع الغطاء */
.y1 {
  background-image: url('who_images/1.jpg'); /* استبدل بمسار الصورة الخلفية */
  background-size: cover;
  background-position: top;
  padding: 60px 20px;
  color: #fff;
  text-align: center;
  position: relative; /* لتحديد الطبقات داخل الحاوية */
  overflow: hidden; /* لمنع أي تجاوز خارج الحاوية */
}

/* الغطاء الأسود الشفاف */
.y1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* اللون الأسود مع الشفافية */
  z-index: 1; /* خلف النص والمحتوى */
}

/* الحاوية */
.y2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  position: relative; /* لضمان أن المحتوى فوق الغطاء */
  z-index: 2; /* النص والمحتوى أعلى من الغطاء */
}

/* العناصر */
.y2-item {
  flex: 1 1 calc(25% - 40px);
  max-width: 200px;
  text-align: center;
  margin: 10px;
  box-sizing: border-box;
}

.y2-item .icon {
  background-color: #ff9500;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px auto;
  font-size: 28px;
  color: #fff;
}

.y2-item h3 {
  font-size: 28px;
  margin: 10px 0;
  color: #fff;
}

.y2-item p {
  font-size: 16px;
  color: #fff;
  margin: 0;
}

/* تحسين التناسق على الشاشات الصغيرة */
@media screen and (max-width: 768px) {
  .y2-item {
    flex: 1 1 calc(50% - 20px);
    max-width: 100%;
  }

  .y2 {
    gap: 20px;
  }
}

@media screen and (max-width: 480px) {
  .y2-item {
    flex: 1 1 100%;
  }
}
/*  التفاصيل */


/*clints section */
/* قسم العملاء */
.clients-section {
  background-color: #ffffff; /* لون الخلفية */
  padding: 60px 20px; /* تباعد داخلي */
  position: relative;
}

/* أيقونة الخلفية */
.clients-section::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 20px;
  width: 80px;
  height: 80px;
  background-image: url('path-to-icon.png'); /* استبدل بمسار الأيقونة */
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.3; /* شفافية الأيقونة */
  z-index: 1; /* خلف النص */
}

/* العناوين */
.container {
  position: relative;
  z-index: 2; /* فوق الخلفية */
  text-align: center;
}

.section-title {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.section-subtitle {
  font-size: 18px;
  color: #777;
  margin-bottom: 40px;
}

/* الشعارات */
.clients-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.clients-logos img {
  max-width: 120px;
  height: auto;
  transition: transform 0.3s ease; /* تأثير عند المرور */
}

.clients-logos img:hover {
  transform: scale(1.1); /* تكبير عند التمرير */
}

/* تحسين العرض على الشاشات الصغيرة */
@media screen and (max-width: 768px) {
  .clients-logos img {
    max-width: 100px;
  }
}
/*clints section end */




/*contact section start*/
/* القسم الرئيسي */
.k1 {
  background-color: #fff;
  padding: 40px 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* الحاوية الداخلية */
.k2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

/* النصوص والمعلومات */
.k3 {
  flex: 1 1 45%;
  max-width: 500px;
}

.k3 h2 {
  font-size: 24px;
  margin-bottom: 10px;
  color: #333;
}

.k3 p {
  font-size: 16px;
  margin-bottom: 8px;
  color: #555;
}

.contact-info strong {
  color: #000;
}

/* الفورم */
.k3-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.k3-form input {
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.k3-form button {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.k3-form button:hover {
  background-color: #218838;
}

/* الخريطة */
.k3-map {
  flex: 1 1 100%;
  margin-top: 20px;
}
/*contact section end*/

/* who usssss page end */


/*fotter section*/
.sw1-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 25px;
  font-family: tajawal , sans-serif;
  text-align: center;
}
.sw1-links {
  display: flex;
  gap: 15px;
}
.sw1-links a {
  text-decoration: none;
  color: #000;
  font-size: 14px;
}
.sw1-links a:hover {
  color: #d68102; /* لون مميز عند التمرير */
}
.sw1-text {
  font-size: 14px;
  color: #333;
  text-align: right;
}

/*fotter section*/




/*slider start*/

/*slider end*/




/* تنسيق القسم الرئيسي */
.uu1 {
  text-align: center;
  padding: 50px 20px;
  background-color: #f9f9f9;
}

/* تنسيق العنوان والنص */
.uu1 h2 {
  font-size: 32px;
  margin-bottom: 15px;
  color: #333;
}

.uu1 p {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
}

/* تنسيق البطاقات */
.uu2 {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.uu2-card {
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  width: 300px;
  max-width: 100%;
  transition: transform 0.3s ease;
}

.uu2-card:hover {
  transform: translateY(-10px);
}

/* تنسيق الأيقونات */
.uu2-card i {
  font-size: 40px;
  color: #a0181a;
  margin-bottom: 15px;
}

/* تنسيق العناوين داخل البطاقات */
.uu2-card h3 {
  font-size: 20px;
  color: #a0181a;
  margin-bottom: 10px;
}

/* تنسيق النصوص داخل البطاقات */
.uu2-card p {
  font-size: 16px;
  color: #333;
}

/* استجابة للأجهزة الصغيرة */
@media (max-width: 768px) {
  .uu2 {
    flex-direction: column;
    align-items: center;
  }

  .uu2-card {
    width: 100%;
    max-width: 90%;
  }
}