@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;

}
body {             
  font-family: 'Tajawal', sans-serif;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: url('img/background.jpg') no-repeat center center fixed;
  background-size: cover;
  min-height: 50vh; 
  height: auto; 
  overflow-y: scroll;
  overflow-x: hidden; 
  color: rgb(0, 0, 0);
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0px;
  grid-template-areas: "main" "footer";
  scroll-behavior: smooth;
}

/* المحتوى الرئيسي */
main {
  flex: 1; /* يجعل المحتوى الرئيسي يأخذ المساحة المتبقية */
  width: 100%;
  padding: 0px;
  text-align: center;
}
nav {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.412);
}

nav ul {
  list-style: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

nav ul li {
  float: right;
}

nav ul li a {
  display: block;
  text-decoration: none;
  color: #a6a6a6;
  padding: 14px;
  font-size: 19px;
  text-transform: uppercase;
}

nav ul li a:hover {
  background-color: #9f20cc;
  color: #a6a6a6;
}

nav ul li.dropdownIcon {
  display: none;
}

/* تثبيت الـ navbar في أعلى الصفحة */
#mainNav {
  position: fixed; /* يجعل الـ navbar ثابتًا */
  top: 0; /* يثبته في أعلى الصفحة */
  left: 0; /* يثبته من الجهة اليسرى */
  width: 100%; /* يجعل عرضه كامل الصفحة */
  background-color: rgb(0, 0, 0); /* لون الخلفية مع الشفافية */
  z-index: 1000; /* يجعل الـ navbar فوق العناصر الأخرى */
}

/* تنسيقات القائمة */
#mainNav ul {
  list-style: none; /* إزالة النقاط من القائمة */
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#mainNav ul li {
  float: right; /* جعل العناصر تطفو إلى اليمين */
}

#mainNav ul li a {
  display: block;
  text-decoration: none;
  color: #a6a6a6;
  padding: 14px;
  font-size: 19px;
  text-transform: uppercase;
  transition: background-color 0.3s, color 0.3s; /* تأثيرات انتقالية */
}

#mainNav ul li a:hover {
  background-color: #9f20cc; /* لون الخلفية عند المرور بالفأرة */
  color: white; /* لون النص عند المرور بالفأرة */
}

/* إخفاء أيقونة القائمة المنسدلة في الوضع العادي */
#mainNav ul li.dropdownIcon {
  display: none;
}

/* تنسيق القسم الأول */
.container {
  width: 100%;
  margin: auto;
  padding: 2% 6%;
  display: block;
}


/* أنماط الحاوية الرئيسية */
.container {
  margin-top: 3%;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* قسم النص */
.P_2sec {
  width: 100%;
  float: right;
  text-align: right;
  margin-top: 8%;
  margin-right: 0%;
  margin-bottom: 0px;
  line-height: 1.8;
  
}

.P_2sec h2,
.P_2sec p {
  color: white;
  font-family: 'Tajawal';
}

.P_2sec samp {
  background-color: rgba(0, 0, 0, 0.093);
  font-family: 'Tajawal';
}

.P_2sec strong {
  color: #ff914d;
}

.P_2sec samp strong {
  color: #ff914d;
}

.P_2sec samp strong:first-child {
  color: #9b04e6;
}

/* زر الإنضمام */
.button_color {
  border: solid 2px;
  border-image: linear-gradient(to right, #990cf6, #f46e1a) 1;
  color: orange;
  text-decoration: none;
  margin-right: 25px;
 
  padding: 8px;
  background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.251) 0%,
  rgba(190, 16, 16, 0) 100%
);
}

/* قسم الشعار */
.logo-container {
  width: 25%;
  float: left;
  text-align: right;
}

.main-logo {
  width: 450px;
  padding-bottom: 0;
  margin-bottom: -10px;
  margin-top: -105%;
  margin-right: 250%;
}

/* قسم البنفسجي */
.full_sec {
  margin: 0;
  background-color: #9b04e6;
  text-align: center;
  padding: 0.1% 0.1% 0.1% 0;
  width: 100%;
  clear: both;
}

.full_sec p {
  color: white;
  font-family: Tajawal;
  line-height: 0.2;
  font-size: 16px;
  margin: 0;
  padding: 10px 0;
}

/* القسم الأسود */
.black-section {
  background-color: black;
  height: fit-content;
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
}

/* أجزاء المحتوى */
.partH {
  float: right;
  text-align: right;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.text-part {
  width: 37%;
  padding: 100px 7% 0 0;
}

.image-part {
  width: 40%;
  padding-right: 90px;
}

.partH p {
  width: 85%;
  line-height: 1.7;
  font-family: Tajawal;
  color: white;
  font-size: 18px;
  margin: 0 0 20px 0;
}

.profile-image {
  width: 500px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: -40%;
  padding: 10px;
}

/* الإطار البنفسجي */
.purple-border {
  width: 100%;
  height: 27px; /* ارتفاع الإطار */
  background-color: #8A2BE2; /* اللون البنفسجي */
  margin-top: 0px; /* المسافة بين القسم الأسود والإطار */
}

.content {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(190, 16, 16, 0) 100%
  );
  backdrop-filter: blur(30px);
  border-radius: 20px;
  width: min(2000px, 150%);
  box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 10;
  margin-left: -140px;
 margin-top: 180px; 
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  padding: 0 35px;
  text-align: justify;
}
.description {
  text-align: right;
  direction: rtl;
  font-family: 'Tajawal', sans-serif;
  font-size: 1rem;
  color: #fff;
  margin-top: 20px;
  padding: 10px;
  border-radius: 10px;
  max-width: 400px;
}

.info p {
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.5;
  text-align: right; /* محاذاة النص إلى اليمين */
  direction: rtl; /* اتجاه النص من اليمين لليسار */
  font-family: 'Tajawal'; /* نوع الخط تجوال */
}




@keyframes gelatine {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.9, 1.1);
  }
  50% {
    transform: scale(1.1, 0.9);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}

/* SWIPER */

.swiper {
  width: 250px;
  height: 450px;
  padding: 50px 0;
}

.swiper-slide {
  position: relative;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  user-select: none;
}

.swiper-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-position {
  object-position: 100% 0%;
}

.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #0f2027, transparent, transparent);
  background-repeat: no-repeat;
  background-size: cover;

}

.overlay span {
  position: absolute;
  right: 0;
  color: #fff;
  padding: 7px 18px;
  margin: 10px;
  border-radius: 20px;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  background: rgb(0, 0, 0);
  box-shadow: inset 2px -2px 20px rgba(214, 214, 214, 0.2),
    inset -3px 3px 3px rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(74px);
}

.overlay h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: "Tajawal";
  color: #fff;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.4;
  margin: 0 0 20px 20px;
}
/* أنماط رمز اليد */
.hand-icon {
  position: absolute; /* وضعية مطلقة */
  left: 55%; /* وضعية البداية */
  top: 50%; /* وضعية البداية */
  transform: translate(-50%, -50%); /* توسيط الرمز */
  animation: moveHand 2s infinite; /* حركة متكررة */
  cursor: pointer; /* تغيير شكل المؤشر */
  z-index: 20; /* التأكد من ظهور الرمز فوق العناصر الأخرى */
  width: 40px; /* عرض الصورة */
  height: auto; /* ارتفاع تلقائي */
}

.hand-icon img {
  width: 80%; /* عرض الصورة */
  height: auto; /* ارتفاع تلقائي */
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); /* إضافة ظل أبيض */
}

/* حركة الرمز */
@keyframes moveHand {
  0% {
      transform: translateX(0) translateY(-50%); /* البداية */
  }
  50% {
      transform: translateX(-40px) translateY(-50%); /* تحرك إلى اليسار */
  }
  100% {
      transform: translateX(0) translateY(-50%); /* العودة إلى البداية */
  }
}

.new .div {
 
  width: 1440px;
  height: 1000px;
  position: relative;
}

.Rectangle9 {
  position: absolute;
  background: rgba(0, 0, 0, 0.614);
  box-shadow: 100px 100px 100px;
  filter: blur(100px);
  z-index: 0; /* تأكد من أن المستطيلات خلف المحتوى */
}
.Rectangle9 {
  top: 450px; /* اضبط الموضع حسب الحاجة */
  left: 780px; /* اضبط الموضع حسب الحاجة */
  width: 600px; /* اضبط العرض حسب الحاجة */
  height: 550px; /* اضبط الارتفاع حسب الحاجة */
}
.new .wrapper-2,
.new .p1000,
.new .wrapper-3,
.new .wrapper-4,
.new .wrapper-5,
.new .ellipse1000,
.new .ellipse-2000,
.new .ellipse-3000,
.new .wrapper-6,
.new .wrapper-7,
.new .wrapper-8,
.new .wrapper-9,
.new .wrapper-10,
.new .wrapper-11,
.new .wrapper-12,
.new .whatsapp50,
.new .instagram50,
.new .linkedin50 {
  z-index: 1; /* تأكد من أن المحتوى فوق المستطيلات */
}


.new .wrapper-2 {
  top: 140px;
  left: 580px;
  color: #ffffff;
  font-size: 55px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .p1000 {
  top: 250px;
  left: 310px;
  color: #8a7f95;
  font-size: 30px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .wrapper-3 {
  top: 375px;
  left: 1090px;
  color: #ffffff;
  font-size: 35px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .wrapper-4 {
  top: 375px;
  left: 190px;
  color: #ffffff;
  font-size: 35px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .wrapper-5 {
  width: 425px;
  top: 460px;
  left: 858px;
  color: #8a7f95;
  font-size: 22px;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .ellipse1000 {
  top: 550px;
  position: absolute;
  width: 40px;
  height: 40px;
  left: 1259px;
  background-color: #9f20cc;
  border-radius: 20px;
  z-index: 1;
}
.new .ellipse-2000 {
  top: 630px;
  position: absolute;
  width: 40px;
  height: 40px;
  left: 1259px;
  background-color: #9f20cc;
  border-radius: 20px;
}

.new .ellipse-3000 {
  top: 720px;
  position: absolute;
  width: 40px;
  height: 40px;
  left: 1259px;
  background-color: #9f20cc;
  border-radius: 20px;
}
.new .icon {
  width: 28px; /* الحجم الافتراضي */
  height: 28px; /* الحجم الافتراضي */
  margin-left: 5px; /* إزاحة الأيقونة الثانية قليلاً إلى اليمين */
  transform: translateX(1px) translateY(4px);
}



.new .icon-2 {
  width: 28px; /* تغيير حجم الأيقونة الثانية */
  height: 28px;
  margin-left: 5px; /* إزاحة الأيقونة الثانية قليلاً إلى اليمين */
  transform: translateX(2px) translateY(4px);
}

.new .icon-3 {
  width: 28px; /* تغيير حجم الأيقونة الثالثة */
  height:28px;
  margin-top: 8px; /* إزاحة الأيقونة الثالثة قليلاً إلى الأسفل */
  transform: translateX(2px) translateY(0.5px);
}

.new .wrapper-6 {
  top: 552px;
  left: 1161px;
  color: #ffffff;
  font-size: 27px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .wrapper-7 {
  top: 635px;
  left: 1160px;
  color: #ffffff;
  font-size: 27px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .wrapper-8 {
  top: 722px;
  left: 1070px;
  color: #ffffff;
  font-size: 27px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .wrapper-9 {
  top: 592px;
  left: 1030px;
  color: #8a7f95;
  font-size: 18px;
  position: absolute;
  font-family: "Tajawal-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .wrapper-10 {
  position: absolute;
  top: 665px;
  left: 1125px;
  font-family: "Tajawal";
  font-weight: 400;
  color: #8a7f95;
  font-size: 18px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
}

.new .wrapper-11 {
  position: absolute;
  top: 755px;
  left: 1040px;
  font-family: "Tajawal";
  font-weight: 400;
  color: #8a7f95;
  font-size: 18px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
}


.new .wrapper-12 {
  top: 815px;
  left: 820px;
  color: #ffffff;
  font-size: 32px;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .whatsapp50,
.new .instagram50,
.new .linkedin50 {
  position: absolute;
  width: 38px;
  height: 38px;
  top: 870px;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: brightness(1);
}

.new .whatsapp50 {
  left: 1050px;
}

.new .instagram50 {
  left: 1220px;
}

.new .linkedin50 {
  left: 1130px;
  width: 42px;
  height: 42px;
}

.new .whatsapp50:hover,
.new .instagram50:hover,
.new .linkedin50:hover {
  transform: scale(1.1);
  filter: brightness(1.2) drop-shadow(0 0 5px rgb(159, 32, 204));
}

.new .whatsapp50:active,
.new .instagram50:active,
.new .linkedin50:active {
  transform: scale(0.9);
}


.new .overlap-group1000 {
  position: absolute;
  width: 580px;
  height: 547px;
  top: 490px;
  left: 120px;
  background-color: #ffffff1c;
  border-radius: 45px;
  border: 3px solid;
  border-color: #9f20cc;
  padding: 20px;
}

.new .wrapper-13 {
  width: 458px;
  top: 383px;
  left: 50px;
  color: rgb(255, 117, 4);
  font-size: 20px;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .user-box {
  position: relative;
  margin-bottom: 30px;
}

.new .user-box input {
  width: 100%;
  padding: 10px 0px;
  font-size: 18px;
  color: #fff;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  direction: rtl;
}

.new .user-box label {
  position: absolute;
  top: 10px;
  right: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: 0.5s;
  font-family: "Tajawal";
  direction: rtl;
}

.new .user-box input:focus ~ label,
.new .user-box input:valid ~ label {
  top: -28px;
  right: 0;
  color: #ffffff;
  font-size: 18px;
}

.new .overlap1000 {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #9f20cc;
  font-size: 10px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: 0.5s;
  margin-top: 40px;
  letter-spacing: 4px;
  font-family: "Tajawal";
  cursor: pointer; /* إضافة cursor: pointer */
}

.new .overlap1000 {
  position: absolute;
  width: 179px;
  height: 55px;
  top: 420px;
  left: 200px;
  background-color: #9f20cc;
  border: 3px solid #9f20cc;
  border-radius: 35px;
}

.new .wrapper-19 {
  top: 8px;
  left: 43px;
  color: #ffffff;
  font-size: 24px;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .overlap1000::before {
  content: '';
  width: 0;
  height: 325%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: rgba(255, 255, 255, 0.2);
  transition: width 0.5s ease;
  display: block;
  z-index: 0; /* تأكد من أن z-index أقل من الزر */
}

.new .overlap1000:hover::before {
  width: 125%;
}

.new .overlap1000:hover {
  background-color: #9f20cc;
}

.new .wrapper-20 {
  top: 1108px;
  left: 150px;
  color: #8a7f95;
  font-size: 22px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
}

.new .user-box input {
  width: 100%;
  padding: 10px 0px;
  font-size: 18px;
  color: #fff;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  direction: rtl;
}

.new .user-box input:focus {
  border-bottom: 2px solid #9f20cc;
  transition: 0.5s;
}

.new .user-box input:valid {
  border-bottom: 2px solid #9f20cc;
  transition: 0.5s;
}



.foot {
  display: grid;
  z-index: 1;
  --footer-background: linear-gradient(90deg, #07030c, #07030c); /* التدرج لوني الزهري والبنفسجي */
  position: relative;
  grid-area: footer;
  min-height: 34rem;
  width: 100%; /* عرض الفوتر بكامل الشاشة */
  left: 0;
  padding: 0px 0;
  margin-top: 200px; /* يلتصق الفوتر بأسفل الصفحة */
  top: auto;
}

.foot .bubbles {
position: absolute;
top: 0px;
left: 0;
right: 0;
height: 5rem;
background: var(--footer-background);
filter: blur(0.5px); animation: floatUp 128s infinite, fadeInOut 128s infinite;
z-index: -1; /* أقل قيمة z-index */
pointer-events: none; /* تجعل الفقاعات غير قابلة للنقر */
}


.foot .bubbles .bubble {
position: absolute;
width: 40px;
height: 40px;
left: var(--position, 50%);
background: 
radial-gradient(circle at 15% 20%, rgba(148, 112, 219, 0.63) 0%, rgba(148, 112, 219, 0) 30%), /* بنفسجي شفاف */
radial-gradient(circle at 50% 25%, rgba(255, 105, 180, 0.574) 0%, rgba(255, 105, 180, 0) 25%), /* زهري شفاف */
radial-gradient(circle at 70% 60%, rgba(0, 0, 139, 0.474) 0%, rgba(0, 0, 139, 0) 35%),       /* أزرق غامق شفاف */
radial-gradient(circle at 30% 75%, rgba(173, 216, 230, 0.571) 0%, rgba(173, 216, 230, 0) 20%), /* أزرق فاتح شفاف */
radial-gradient(circle at 40% 40%, rgba(255, 166, 0, 0.444) 0%, rgba(255, 165, 0, 0) 25%),    /* برتقالي فاتح شفاف */
rgba(255, 255, 255, 0); 
 border-radius: 100%;
 animation: bubble-size var(--time, 128s) ease-in infinite var(--delay, 0s),
            bubble-move var(--time, 128s) ease-in infinite var(--delay, 0s);
 transform: translate(-50%, 100%);
 z-index: -1; /* أقل قيمة z-index */
pointer-events: none; /* تجعل الفقاعات غير قابلة للنقر */
}


/* الفوتر */
.foot {
position: relative;
z-index: 1; /* أعلى من الفقاعات */
}
/* المحتوى الرئيسي */
.content500 {
  position: relative;
  z-index: 2; /* أعلى من الفقاعات */
}

/* أي عناصر أخرى */
/* العناصر الأخرى */
.container, 
.new, 
section {
  position: relative;
  z-index: 2; /* تأكد من وجودها فوق الفقاعات */
}

/* الأقسام الرئيسية */
.full_sec, 
.black-section {
  position: relative;
  z-index: 2; /* رفع قيمة الـ z-index للمحتوى */
 
}


.foot .content500 {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 4rem;
padding: 2rem;
background: var(--footer-background);
}
.text-wrapper500{
position: absolute;
top: 15px;
left: 40px;
font-family: "Raleway";
font-weight: 400;
color: #ffffff;
font-size: 60px;
letter-spacing: 0;
line-height: normal;

}

.rectangle-202 {
position: absolute;
width: 37%;
height: 40vh;
top: 105px;
left: 11%;
background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.28) 0%,
  rgba(190, 16, 16, 0) 100%
);
border: 6px solid;
border-image-source: linear-gradient(90deg, #380e6b, #ff8750);
border-image-slice: 1;
box-shadow: inset 0px 0px 250px #52505040;
animation: gradient-border 3s infinite; 
}
.rectangle-103 {
position: absolute;
width: 18%;
height: 40vh;
top: 105px;
left: 65%;
background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.28) 0%,
  rgba(190, 16, 16, 0) 100%
);
border: 6px solid;
border-image: linear-gradient(90deg, #380e6b, #ff8750) 1;
box-shadow: inset 0px 0px 250px #00000040;
animation: gradient-border 3s infinite;
}
.p500 {
   position: absolute;
   top: 134px;
   left: 280px;
   font-size: 28px;
   text-align: left;
   white-space: nowrap;
   direction: rtl;
   font-family: "Tajawal";
   font-weight: 400;
   color: #ffffff;
   letter-spacing: 0;
   line-height: normal;
}
.text-wrapper-102 {
   position: absolute;
   width: 425px;
   top: 200px;
   left: 230px;
   font-size: 18px;
   direction: rtl;
   font-family: "Tajawal";
   font-weight: 400;
   color: #ffffff;
   letter-spacing: 0;
   line-height: normal;
}
.rectangle-104 {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.8em 1.1em;
position: absolute;
width: 165px;
height: 40px;
top: 310px;
left: 355px;
font-size: 24px;
text-transform: uppercase;
background-color: rgba(237, 142, 54, 0.677);
border: 3px solid rgba(199, 131, 53, 0.752);
color: #ffffff;
text-align: center;
overflow: hidden;
font-family: "Tajawal";
transition: all 0.3s ease-in-out;
z-index: 1;
cursor: pointer;
direction: rtl;
}

.rectangle-104::before {
content: '';
width: 0;
height: 355%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background-color: rgb(148, 71, 7);
transition: .5s ease;
display: block;
z-index: -1;
}

.rectangle-104:hover::before {
width: 125%;
}

.rectangle-104:hover {
color: #ffffff;
}

.text-wrapper-104 {
   position: absolute;
   top: 119.5px;
   left: 1145px;
   font-size: 28px;
   white-space: nowrap;
   direction: rtl;
   font-family: "Tajawal";
   font-weight: 400;
   color: #ffffff;
   letter-spacing: 0;
   line-height: normal;
}
.flexcontainer500 {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 17.5px;
   position: absolute;
   width: 208px;
   height: 360px;
   top: 169.5px;
   left: 1017px;
}
.text500 {
   position: relative;
   align-self: stretch;
   font-size: 18px;
   text-align: right;
   font-family: "Tajawal";
   font-weight: 400;
   color: #ffffff;
   letter-spacing: 0;
   line-height: normal;
}
.span500 a{
   font-family: "Tajawal";
   font-weight: 400;
   color: #ffffff;
   font-size: 18px;
   letter-spacing: 0;
   text-decoration: none;
}


.programmed {
  position: absolute;
  top: 435px;
  left: 80px;
  font-size: 15px;
  white-space: nowrap; /* يمنع النص من الانتقال إلى سطر جديد */
  direction: rtl; /* النص العام مبرر إلى اليمين */
  font-family: "Tajawal"; /* إضافة fallback font */
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
  text-align: left;
}

.programmed .left-align {
  text-align: left; /* محاذاة النص إلى اليسار */
  margin-left: 2px; /* إزالة أي إزاحة */
  display: inline; /* يجعل النص يظهر في نفس السطر */
}   
@keyframes bubble-size {
100%, 75% {
 width: var(--size, 4rem);
height: var(--size, 4rem);
}
100% {
width: 0rem;
 height: 0rem;
      }
}

@keyframes bubble-move {
  0% {
    transform: translate(-50%, 100%); 
     }
     100% {
      transform: translate(-250%, -450vh);
 }
}
.group500 {
  position: absolute;
  width: 340px;
  height: 47px;
  top: 40px;
  left: 1140px;
  
}
.whatsapp {
position: absolute;
width: 28px;
height: 28px;
top: -16.5px;
left: 10px;
object-fit: cover;

}
.instagram {
position: absolute;
width: 25px;
height: 25px;
top: -16px;
left: 79px;
object-fit: cover;

}
.linkedin {
position: absolute;
width: 25px;
height: 25px;
top: -17px;
left: 145px;
object-fit: cover;


}

.email {
position: absolute;
width: 35px;
height: 35px;
top: -23px;
left: 210px;
object-fit: cover;


}

.youtube {
position: absolute;
width: 35px;
height: 35px;
top: -16.5px;
left: 280px;
object-fit: cover;

}
@media (max-width: 1280px) {
  .foot {
    margin-top: -450px;
    min-height: 29rem;
  }

  .bubbles {
    height: 8rem;
  }

  .content500 {
    padding: 1rem;
  }

  .text-wrapper500 {
    font-size: 55px;
    top: 15px;
    left: 40px;
  }

  .group500 {
    top: 30px;
    left: 900px;
  }

  .whatsapp {
    width: 28px;
    height: 28px;
    top: -10px;
    left: -220px;
  }

  .instagram {
    width: 28px;
    height: 28px;
    top: -10px;
    left: -160px;
  }

  .linkedin {
    width: 28px;
    height: 28px;
    top: -10px;
    left: -95px;
  }

  .email {
    width: 39px;
    height: 39px;
    top: -17px;
    left: -28px;
  }

  .youtube {
    width: 35px;
    height: 35px;
    top: -8px;
    left: 45px;
  }

  .rectangle-202 {
    width: 35%;
    height: 40vh;
    top: 115px;
    left: 12%;
  }

  .rectangle-103 {
    width: 17%;
    height: 40vh;
    top: 115px;
    left: 62%;
  }

  .p500 {
    font-size: 24px;
    top: 140px;
    left: 250px;
  }

  .text-wrapper-102 {
    width: 410px;
    top: 210px;
    left: 165px;
    font-size: 17px;
  }

  .rectangle-104 {
    width: 140px;
    height: 35px;
    top: 320px;
    left: 300px;
    font-size: 18px;
  }

  .rectangle-104::before {
    height: 370%;
  }

  .rectangle-104:hover::before {
    width: 100%;
  }

  .text-wrapper-104 {
    font-size: 24px;
    top: 140px;
    left: 900px;
  }

  .flexcontainer500 {
    width: 180px;
    height: 280px;
    top: 190px;
    left: 790px;
  }

  .text500 {
    font-size: 18px;
  }

  .span500 a {
    font-size: 18px;
  }

  .programmed {
    top: 435px;
    left: 45px;
    font-size: 14px;
  }
}

@media (min-width: 1025px) and (max-width: 1200px) {

  .whatsapp, .instagram, .linkedin, .email, .youtube {
    width: 28px;
    height: 28px;
    top: -10px;
  }
  .email {
    width: 39px;
    height: 39px;
    top: -17px;
    left: -120px;
  }
  .youtube {
    width: 35px;
    height: 35px;
    top: -8px;
    left: -50px;
  }

  /* المستطيلات */
  .rectangle-202 {
    width: 41%;
    height: 40vh;
    top: 115px;
    left: 12%;
  }

  .rectangle-103 {
    width: 19%;
    height: 40vh;
    top: 115px;
    left: 67%;
  }

  .foot {
    margin-top: -450px;
    min-height: 29rem;
  }
  .foot{
        display: grid;
        z-index: 1;
        --footer-background: linear-gradient(90deg, #07030c, #07030c);
        position: relative;
        grid-area: footer;
        min-height: 29rem;
        width: 100%;
        left: 0;
        padding: 0;
        margin-top: 0; /* Remove negative margin */
        z-index: 9999;
       bottom: 0; /* Ensure footer stays at bottom */

    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
  .foot {
      margin-top: 0;
      min-height: 29rem;
      position: relative;
      bottom: 0;
}
}