/* General Reset */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  /* Default Styles (for smaller screens, no padding) */
  .main-page {
    padding: 15px; /* No padding by default */
  }

  /* Styles for larger screens (like laptops) */
  @media (min-width: 1024px) {
    .main-page {
      padding: 58px;
    }
  }
  .container {
    width: 95%;
    max-width: 1334px;
    margin: 0 auto;
  }
  body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
  background:#0E0822;
    backgroundd: rgb(14,8,34);
    backgroundd: linear-gradient(90deg, #0E0822 0%, rgba(14,8,34,1) 35%, rgba(30,15,69,1) 100%);
    color: #fff;
  }

  .container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* Header Section */

  .header {
    position: relative;
    height: 200px;
    overflow: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .container.header-container {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px;
    z-index: 2;
  }

  .logo img {
    height: 60px;
  }
  

  /* Navbar Styling */
  .navbar {
    display: flex;
    gap: 20px;
  }

  .navbar a {
    text-decoration: none;
    color: white;
    font-size: 1rem;
    transition: 0.3s;
  }

  .navbar a:hover {
    color: #69CFF9;
  }

  

  /* Responsive Design */
  @media (max-width: 768px) {
    .header-content h1 {
      font-size: 2rem;
    }

    .header-content p {
      font-size: 1rem;
    }

    .btn {
      padding: 8px 15px;
      font-size: 0.9rem;
    }
  }

  .logo img {
    width: 100px;
    height: auto;
  }

  .navbar {
    display: flex;
    gap: 20px;
  }
  
  .navbar a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
  }
  
  .navbar a:hover {
    color: #8a24be;
    text-decoration: none;
    font-weight: 700;
  }
  .header-content h1 {
    font-size: 2rem;
    margin-bottom: 10px;
  }

  .header-content p {
    font-size: 1.2rem;
    margin-bottom: 20px;
  }

  

  .image-content {
    flex: 1;
  }

  .image-content img {
    max-width: 100%;
    border-radius: 10px;
  }

  /* Responsive */
  @media (max-width: 768px) {
    .header-container {
      flex-direction: column;
      text-align: center;
    }

    .navbar {
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .cards-container {
      grid-template-columns: 1fr;
    }

    .overview-container {
      flex-direction: column;
    }
  }



  /* إعداد الكارد */


  /* Section Header */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    margin-bottom: 20px;
  }

  .section-title {
    font-size: 1.8rem;
    color: white;
    font-weight: bold;
  }

  .see-more-link {
    font-size: 1rem;
    color: #a64eee;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
  }

  .see-more-link:hover {
    color: #6e47ff;
  }



  /* Section Header */
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    margin-bottom: 20px;
  }

  .section-title {
    font-size: 1.8rem;
    color: white;
    font-weight: bold;
  }

  .see-more-link {
    font-size: 1rem;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s;
  }

  .see-more-link:hover {
    color:   linear-gradient(90deg, #6a0dad, #9b5df7);;
  }















        /* Footer Styles */
        .footerrr {
          background-image: url('Assets/img/footer.png'); /* مسار الصورة */
          background-size: cover; /* تغطي العنصر بالكامل */
          background-position: center; /* تمركز الصورة */
          background-repeat: no-repeat; /* منع تكرار الصورة */
          width: 100%; /* تغطية عرض العنصر */
          height: auto; /* تغطية كامل الشاشة - يمكنك تعديل الحجم حسب الحاجة */
        }
  .footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }

  /* Footer Logo Section */
  .footer-logo {
    flex: 1;
    max-width: 300px;
  }

  .footer-logo img {
    width: 120px;
    margin-bottom: 10px;
  }

  .footer-logo p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
  }

  /* Footer Links */
  .footer-links {
    flex: 1;
    min-width: 150px;
  }

  .footer-links h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .footer-links ul {
    list-style: none;
    padding: 0;
  }

  .footer-links ul li {
    margin-bottom: 8px;
  }

  .footer-links ul li a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
  }

  .footer-links ul li a:hover {
    color: #a64eee;
  }

  /* Social Media Section */
  .footer-socials {
    flex: 1;
    min-width: 150px;
  }

  .footer-socials h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
  }

  .social-icons {
    display: flex;
    gap: 27px;
  }

  .social-icons a {
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform 0.3s, color 0.3s;
  }

  .social-icons a:hover {
    transform: scale(1.2);
    color: #a64eee;
  }

  /* Footer Bottom */
  .footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
  }

  /* Responsive Styles */
  @media (max-width: 768px) {
    .footer-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .footer-logo,
    .footer-links,
    .footer-socials {
      max-width: 100%;
    }
  }



  /* التأثير عند انتقال الصفحة */
  body.transitioning {
    opacity: 0;
    transform: translateX(-100%); /* تحريك الصفحة الحالية إلى اليسار */
    transition: transform 1s ease, opacity 1s ease; /* الانتقال ببطء */
  }
  
  /* التأثير عند تحميل الصفحة الجديدة */
  body.loaded {
    opacity: 1;
    transform: translateX(0); /* الصفحة تظهر من اليسار */
    transition: transform 1s ease, opacity 1s ease;
  }
  
/* Fix overlapping issues with other content */
.header-content,
.header-container {
  position: relative;
  z-index: 1; /* Ensure other content is below the icon */
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
  .floating-icon {
    width: 40px;
    height: 40px;
  }
  .floating-icon i {
    font-size: 18px; /* Smaller icon size */
  }
}


/* تنسيق شاشة التحميل */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-family: 'Poppins', sans-serif;
  color: white;
  text-align: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#loading-screen h2 {
  margin-top: 20px;
  font-size: 24px;
}

#loading-screen .fa-rocket {
  animation: spin 2s infinite linear;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




/* Floating Icon on the Left */
.left-icon-link {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

.left-icon {
  position: relative;
  display: inline-block;
}

/* الصورة الرئيسية */
.main-image {
  width: 50px;  /* يمكنك تعديل الحجم حسب الحاجة */
  height: auto;
  display: block;
}

/* الأيقونة داخل الصورة الرئيسية */
.secondary-icon {
  position: absolute;
  top: 50%;  /* توسيط الأيقونة في المنتصف عموديًا */
  left: 50%;  /* توسيط الأيقونة في المنتصف أفقيًا */
  transform: translate(-50%, -50%); /* تعويض الحجم لجعلها تمامًا في المنتصف */
  width: auto; /* يمكنك تعديل الحجم حسب الحاجة */
  height: auto;
}

/* Navigation Button Style */
.navigate-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 20px;
  font-size: 1.5rem;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  z-index: 2;
  transition: 0.3s;
}

.right-btn {
  right: 10px;
}







/* Reset */

.box-container-xy {
  padding: 1rem; /* مسافة بسيطة لتجنب الالتصاق الكامل */
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.text-wrapper-ab {
  max-width: 900px;
  width: 100%;
}

.title-content-mn {
  margin-bottom: 2rem;
  text-align: left; /* محاذاة النصوص إلى اليسار */
}

.main-title-op {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: left; /* محاذاة النص إلى اليسار */
}

.sub-title-qr {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  text-align: left; /* محاذاة النص إلى اليسار */
}

.description-st {
  font-size: 1rem;
  color: #b0b0b0;
  text-align: left; /* محاذاة النص إلى اليسار */
}

.students-section-uv, .education-section-gh {
  margin-top: 2rem;
  text-align: left; /* محاذاة النصوص إلى اليسار */
}

.section-title-wx, .section-title-kl {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  text-align: left; /* محاذاة النصوص إلى اليسار */
}

.section-description-yz, .section-description-mv {
  font-size: 1rem;
  color: #b0b0b0;
  text-align: left; /* محاذاة النصوص إلى اليسار */
}

/* Responsive Design */
@media (max-width: 768px) {
  .main-title-op {
    font-size: 2rem;
  }

  .sub-title-qr {
    font-size: 1.5rem;
  }

  .description-st, .section-description-yz, .section-description-mv {
    font-size: 0.9rem;
  }
}



/* Reset */

.contact-section-rx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
  padding: 1rem;
}

.contact-content-yt {
  flex: 1;
  max-width: 500px;
}

.contact-title-gh {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.contact-description-qw {
  font-size: 1rem;
  color: #b0b0b0;
  margin-bottom: 2rem;
}

.contact-form-lm {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group-jk {
  position: relative;
}

.form-input-nv,
.form-textarea-op {
  width: 100%;
  padding: 1rem;
  border: 2px solid #585858;
  border-radius: 10px;
  background-color: #0e1a2b00;
  color: #ffffff;
  font-size: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.form-input-nv::placeholder,
.form-textarea-op::placeholder {
  color: #b0b0b0;
}

.form-textarea-op {
  height: 150px;
  resize: none; /* لمنع تغيير الحجم */
}

.form-button-xy {
  padding: 1rem;
  border:2px solid #838383;  /* تحديد الحد الأبيض */
  border-radius: 50px;
  background: linear-gradient(to right, #6a11cb, #2575fc);
  color: #ffffff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.form-button-xy:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
.contact-image-zx {
  flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;

  text-align: center;
  overflow: hidden;
  margin-left: 146px;
}

.contact-image-zx img {
  width: 121%;
  max-width: 744px;
  height: auto;
}

/* تعديل خاص بالموبايل */
@media (max-width: 768px) {
  .contact-section-rx {
    flex-direction: column;
    text-align: center;
    overflow: hidden; /* منع أي تجاوز */
  }

  .contact-image-zx img {
    max-width: 90%; /* الصورة أصغر لتناسب عرض الشاشة */
    margin: 0 auto; /* توسيط الصورة */
  }
}


.main-service{
  padding: 60px;
}





.btn {
  background: linear-gradient( #69CFF9, #B430F3);
  padding: 12px 30px;
  border: none;
  border-radius: 30px;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  width: 146px;
}
.btn:hover {
  background: linear-gradient(90deg, #9b5df7, #6a0dad);
  transition: 0.3s ease;
}
.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition-duration: .3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
          background: linear-gradient(45deg, #69CFF9, #B430F3);
}
/* hover effect on button width */
.Btn:hover {
  width: 204px;
  border-radius: 40px;
  transition-duration: .3s;
}

.Btn:hover .sign {
  width: 30%;
  transition-duration: .3s;
  padding-left: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: .3s;
  padding-right: 10px;
}
/* button click effect*/
.Btn:active {
  transform: translate(2px ,2px);
}



.contact-main{
  padding: 197px;
}

.right-section {
  display: flex;
  justify-content: flex-end; /* يضع المحتوى في أقصى اليمين */
  margin-top: 20px;
}

.info-section {
  margin-bottom: 20px;
  margin-right: 244px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.info-item img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.contact-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.contact-btn .icon-container {
  margin-right: 10px;
}

.contact-btn:hover {
  background-color: #45a049;
}

@media (max-width: 1024px) {
  .navbar {
    width: 379px;  }
    .info-section {
      margin-bottom: 30px;
      margin-right: -19px;
    }
    .contact-image-zx{
      display: none;
    }
    .main-service {
      padding: 22px;
    }
}



.social-icons {
  display: flex;
  gap: 21px; /* إضافة مسافة بين الأيقونات */
  align-items: center;
}

.social-icons a {
  text-decoration: none; /* إزالة أي خط تحت الرابط */
  color: inherit; /* جعل لون الأيقونة بنفس لون النص أو اللون الذي تختاره */
}

.social-icons i {
  font-size: 24px; /* حجم الأيقونات */
}

.social-icons img {
  width: 24px; /* ضبط عرض الـ SVG */
  height: auto; /* الحفاظ على النسبة */
  max-height: 24px; /* التأكد من أن الأيقونة لا تتجاوز هذا الارتفاع */
}