.back-link{
  text-align: center; /* توسيط العنوان */
  color: #333; /* لون النص */
  margin-bottom: 15px; /* تقليل المسافة تحت العنوان */
}
.login-container {
  background-color: white; /* خلفية بيضاء لنموذج الدخول */
  border-radius: 8px; /* زوايا دائرية */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* ظل خفيف */
  padding: 30px; /* تقليل الحواف الداخلية */
  max-width: 350px; /* تحديد العرض الأقصى */
  width: 100%; /* جعل العرض 100% */
  margin: 50px auto; /* توسيط النموذج مع فراغ 50px في الأعلى والأسفل */
}

.login-header h2 {
  text-align: center; /* توسيط العنوان */
  color: #333; /* لون النص */
  margin-bottom: 15px; /* تقليل المسافة تحت العنوان */
}

.input-connect,
.inpute-groupe {
  margin-bottom: 15px; /* تقليل المسافة بين المدخلات */
}

label {
  display: block; /* جعل التسمية كتلة */
  margin-bottom: 5px; /* مسافة تحت التسمية */
  color: #555; /* لون نص التسمية */
}

input[type="email"],
input[type="password"] {
  width: 100%; /* جعل العرض 100% */
  padding: 8px; /* تقليل الحواف الداخلية */
  border: 1px solid #ddd; /* إطار خفيف */
  border-radius: 5px; /* زوايا دائرية */
  transition: border 0.3s; /* تأثير سلس عند تغيير الإطار */
}

input[type="email"]:focus,
input[type="password"]:focus {
  border: 1px solid #f57c00; /* تغيير لون الإطار عند التركيز */
  outline: none; /* إزالة الإطار الخارجي الافتراضي */
}

#submitButton {
  width: 100%; /* جعل الزر يأخذ العرض الكامل */
  padding: 10px; /* حواف داخلية */
  background-color: #f57c00; /* لون الخلفية */
  color: white; /* لون النص */
  border: none; /* إزالة الحدود */
  border-radius: 5px; /* زوايا دائرية */
  font-size: 16px; /* حجم الخط */
  cursor: pointer; /* تغيير المؤشر عند المرور على الزر */
  transition: background-color 0.3s; /* تأثير سلس عند التمرير */
}

#submitButton:hover {
  background-color: #e64a19; /* لون الخلفية عند التمرير */
}

.footer {
  text-align: center; /* توسيط النص */
  margin-top: 15px; /* تقليل المسافة فوق النص */
}

.footer p {
  color: #555; /* لون النص */
  font-size: 14px; /* حجم الخط */
}

.footer a {
  color: #f57c00; /* لون الروابط */
  text-decoration: none; /* إزالة التسطير */
}

.footer a:hover {
  text-decoration: underline; /* إضافة التسطير عند التمرير */
}


.registration-container {
  background-color: white; /* خلفية بيضاء للنموذج */
  border-radius: 8px; /* زوايا دائرية */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* ظل خفيف */
  padding: 30px; /* حواف داخلية */
  max-width: 400px; /* تحديد العرض الأقصى */
  width: 100%; /* جعل العرض 100% */
  margin: 50px auto; /* توسيط النموذج مع فراغ 50px في الأعلى والأسفل */
}

.registration-container h1 {
  text-align: center; /* توسيط العنوان */
  color: #333; /* لون النص */
  margin-bottom: 20px; /* فراغ تحت العنوان */
}

.form-field-group {
  margin-bottom: 15px; /* فراغ بين الحقول */
}

label {
  display: block; /* جعل التسمية كتلة */
  margin-bottom: 5px; /* فراغ تحت التسمية */
  color: #555; /* لون نص التسمية */
}

#password-container-1 {
            display: flex;
            align-items: center;
        }

#toggle-btn {
            margin-left: -30px;
            cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  width: 100%; /* جعل العرض 100% */
  padding: 8px; /* حواف داخلية */
  border: 1px solid #ddd; /* إطار خفيف */
  border-radius: 5px; /* زوايا دائرية */
  transition: border 0.3s; /* تأثير سلس عند تغيير الإطار */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus {
  border: 1px solid #f57c00; /* تغيير لون الإطار عند التركيز */
  outline: none; /* إزالة الإطار الخارجي الافتراضي */
}

button {
  width: 100%; /* جعل الزر يأخذ العرض الكامل */
  padding: 10px; /* حواف داخلية */
  background-color: #f57c00; /* لون الخلفية */
  color: white; /* لون النص */
  border: none; /* إزالة الحدود */
  border-radius: 5px; /* زوايا دائرية */
  font-size: 16px; /* حجم الخط */
  cursor: pointer; /* تغيير المؤشر عند المرور على الزر */
  transition: background-color 0.3s; /* تأثير سلس عند التمرير */
}

button:hover {
  background-color: #e64a19; /* لون الخلفية عند التمرير */
}

/* استعلام وسائط */
@media (max-width: 1000px) {
  .registration-container {
      max-width: 90%; /* جعل العرض الأقصى 90% للشاشات الصغيرة */
  }
}

/* استعلام وسائط */
@media (max-width: 1000px) {
  .login-container {
      max-width: 90%; /* جعل العرض الأقصى 90% للشاشات الصغيرة */
  }
}