/* تعيين إعدادات الصفحة لتوسيط المحتوى */
body,
html {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9; /* خلفية الصفحة */
  font-family: Arial, sans-serif; /* خط عام للمحتوى */
}

/* الحاوية المركزية */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.box {
  background-color: #fff; /* لون خلفية الصندوق */
  border-radius: 10px; /* زوايا مدورة للصندوق */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ظل خفيف للصندوق */
  padding: 20px; /* المسافة داخل الصندوق */
  max-width: 600px; /* عرض الصندوق الأقصى */
  width: 75%;/* عرض الصندوق نسبةً إلى عرض الشاشة */
  text-align: center; /* توسيط النصوص داخل الصندوق */
}
.logo img {
  width: 50%;
  height: 30%;
}

/* تنسيق العنوان */
h1 {
  font-size: 24px; /* حجم الخط للعناوين */
  margin-bottom: 15px; /* المسافة أسفل العنوان */
  color: #333; /* لون النص */
}

/* تنسيق الفقرة */
p {
  font-size: 16px; /* حجم الخط للنصوص */
  color: #666; /* لون النص */
}

/* تنسيق الأيقونات */
.social-login-icons {
  display: flex;
  justify-content: center; /* توسيط الأيقونات أفقياً */
  align-items: center;
  gap: 10px;
  margin-top: 20px; /* إضافة مسافة بين النص والأيقونات */
  -webkit-box-reflect: below 5px linear-gradient(transparent, #00000055);
}
.social-login-icons svg {
  width: 26px;
}

.social-icon-1,
.social-icon-1-1,
.social-icon-2,
.social-icon-2-2,
.social-icon-3,
.social-icon-3-3,
.social-icon-4,
.social-icon-4-4,
.social-icon-5,
.social-icon-5-5,
.social-icon-6,
.social-icon-6-6,
.social-icon-7,
.social-icon-7-7 {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  margin: 20px 0 0px 0;
}

.icon svg {
  fill: #111;
}

.socialcontainer {
  height: 80px;
  overflow: hidden;
}
.social-icon-1 {
  transition-duration: 0.4s;
  background-color: rgb(78, 184, 249);
  transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
}
.social-icon-1 svg,
.social-icon-2 svg,
.social-icon-3 svg,
.social-icon-4 svg,
.social-icon-5 svg,
.social-icon-6 svg,
.social-icon-7 svg {
  opacity: 0;
  transition-duration: 0.5s;
  transition-delay: 0.2s;
}
.social-icon-1-1 {
  transition-duration: 0.4s;
  background-color: rgb(0, 0, 0, 0);
}
.socialcontainer:hover .social-icon-1 {
  transform: translateY(-70px);
}
.socialcontainer:hover .social-icon-1 svg,
.socialcontainer:hover .social-icon-2 svg,
.socialcontainer:hover .social-icon-3 svg,
.socialcontainer:hover .social-icon-4 svg,
.socialcontainer:hover .social-icon-5 svg,
.socialcontainer:hover .social-icon-6 svg,
.socialcontainer:hover .social-icon-7 svg {
  opacity: 1;
}
.social-icon-2 {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
  background: linear-gradient(
    72.44deg,
    #ff7a00 11.92%,
    #ff0169 51.56%,
    #d300c5 85.69%
  );
}
.socialcontainer:hover .social-icon-2 {
  transform: translateY(-70px);
}
.social-icon-3 {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
  background: #316ff6;
}

.socialcontainer:hover .social-icon-3 {
  transform: translateY(-70px);
}
.social-icon-4 {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);

  background: linear-gradient(
    180deg,
    rgb(34, 144, 109) 0%,
    rgb(34, 124, 71) 91%
  );
}

.socialcontainer:hover .social-icon-4 {
  transform: translateY(-70px);
}
/* أيقونة البريد الإلكتروني */
.social-icon-5 {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
  background: linear-gradient(
    180deg,
    rgb(0, 123, 255) 0%,
    /* لون أزرق */ rgb(0, 96, 200) 91% /* لون أزرق داكن */
  );
}

/* تفاعل عند التمرير فوق الأيقونة */
.socialcontainer:hover .social-icon-5 {
  transform: translateY(-70px);
}

/* أيقونة الاتصال */
.social-icon-6 {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
  background: linear-gradient(
    180deg,
    rgb(255, 87, 34) 0%,
    /* لون برتقالي */ rgb(200, 54, 23) 91% /* لون برتقالي داكن */
  );
}

/* تفاعل عند التمرير فوق الأيقونة */
.socialcontainer:hover .social-icon-6 {
  transform: translateY(-70px);
}
.social-icon-7 {
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
  background: linear-gradient(
    180deg,
    rgb(255, 0, 0) 0%,
    /* لون أحمر فاتح */ rgb(179, 0, 0) 91% /* لون أحمر داكن */
  );
}

/* تفاعل عند التمرير فوق الأيقونة */
.socialcontainer:hover .social-icon-7 {
  transform: translateY(-70px);
}