@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;

}
body {
  font-family: 'Tajawal', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* توزيع المساحة بين العناصر */
  align-items: center;
  background: url('img/background.jpg') no-repeat center center fixed;
  background-size: cover;
  height: 100vh; /* الطول الأدنى للصفحة */
  overflow-y: auto; /* التمرير العمودي */
  overflow-x: hidden;
  color: rgb(0, 0, 0);
  margin: 0px;
  padding: 0;
  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: 0px;
  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;
  transform: translate(0%);
}

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;
}
.frame {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.frame .div {
    width: 1450px;
    height: 1800px;
    position: relative;
}

.frame .ellipse {
    position: absolute;
    width: 137px;
    height: 279px;
    top: 100px; /* تعديل القيمة */
    left: 677px;
    background-color: #9f20cc;
    border-radius: 68.5px/139.5px;
    border: 2px solid #000000;
    filter: blur(150px);
}

.frame .text-wrapper {
    height: 72px;
    top: 200px; /* تعديل القيمة */
    left: 375px;
    color: #ffffff;
    font-size: 55px;
    text-align: center;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5; /* تعديل القيمة */
    direction: rtl;
}

.frame .p {
    position: absolute;
    height: 42px;
    top: 300px; /* تعديل القيمة */
    left: 300px;
    color: #a59d9d;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5; /* تعديل القيمة */
}
    .frame .overlap {
    position: absolute;
    width: 297px;
    height: 38px;
    top: 380px;
    left: 915px;
    }
    .frame .text-wrapper-2 {
    position: absolute;
    width: 262px;
    height: 8px;
    top: 27px;
    left: 0;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: Truepx;
    }
    .frame .user {
    width: 35px;
    height: 35px;
    top: 28px;
    left: 245px;
    position: absolute;
    object-fit: cover;
    }
    .frame .group {
    position: absolute;
    width: 333px;
    height: 49px;
    top: 380px;
    left: 536px;
    }
    .frame .text-wrapper-3 {
    position: absolute;
    width: 282px;
    height: 5px;
    top: 29.5px;
    left: 17px;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: Truepx;
    }
    .frame .paper-clip {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 33px;
    left: 305px;
    object-fit: cover;
    transform: rotate(-45deg);
    }
    .frame .overlap-group {
    position: absolute;
    width: 312px;
    height: 38px;
    top: -250px;
    left: 68px;
    }
    .frame .div-wrapper {
    position: absolute;
    width: 286px;
    height: 5px;
    top: 29px;
    left: 0;
    }
    .frame .text-wrapper-4 {
    position: absolute;
    width: 284px;
    height: 5px;
    top: -250px;
    left: -800px;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal" ;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 'Truepx';
    }
    .frame .target-arrow {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -215px;
    left:-528px;
    object-fit: cover;
    }
    .frame .overlap-2 {
    position: absolute;
    width: 504px;
    height: 89px;
    top: 200px;
    left: 423px;
    }
    .frame .overlap-group-wrapper {
    position: absolute;
    width: 504px;
    height: 89px;
    top: 0;
    left: 0;
    }
    .frame .overlap-group-2 {
    position: relative;
    height: 89px;
    }
    .frame .rectangle {
    width: 280px;
    left: 90px;
    background-color: #555050;
    position: absolute;
    height: 60px;
    top: 350px;
    border-radius: 100px;
    }
    .frame .rectangle-2 {
    width: 230px;
    left: 252px;
    background-color: #ffffff;
    position: absolute;
    height: 60px;
    top:350px;
    border-radius: 100px;
    transform: rotate(0deg);
    }
    .frame .text-wrapper-5 {
    position: absolute;
    height: 44px;
    top: 362px;
    left: 320px;
    color: #000000;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: 'Truepx';
    }
    .frame .text-wrapper-6 {
    position: absolute;
    height: 44px;
    top: 362px;
    left: 104px;
    color: #000000;
    font-size: 29px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal" ;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 'Truepx';
    }
    .frame .overlap-wrapper {
    position: absolute; /* التحكم باتجاه البطاقة تحربة  الكجانية يمين ويسار */
    width: 566px;
    height: 605px;
    top: 780px;
    left: 999px;
   
    }
    .frame .overlap-3 {
    position: relative;      /*التحكم بعرض شكل البطاقات*/
    width: 420px;
    height: 600px;
    background: linear-gradient(to bottom right, #00000000, #a028cc);
    border-radius: 65px;
    border: 2px solid;
    border-color: #ffffff;
    }
    .frame .text-wrapper-7 {
    position: absolute;
    height: 102px;
    top: 315px;
    left: 210px;
    color: #ffffff;
    font-size: 70px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: Truepx;
    }
    .frame .text-wrapper-8 {
    position: absolute;
    width: 472px;
    height: 87px;
    top: 186px;
    left:-108px;
    color: #ffffff;
    font-size: 20px;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: Truepx;
    }
    .frame .text-wrapper-9 {
    position: absolute;
    height: 29px;
    top: 459px;
    left: 12px;
    color: #ffffff;
    font-size: 18px;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: Truepx;
    }
    .frame .overlap-group-3 {/*التحكم بشكل بحجم الازرار*/
    position: absolute;
    width: 250px;
    height: 60px;
    top: 500px;
    left: 86px;
    background-color: #8a7f95;
    border-radius: 45px;
    }
    
   .frame .text-wrapper-10 {
    position: absolute;
    height: 54px;
    top: 0px;
    left: 55px;
    color: #f5f5f5;
    font-size: 38px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: 'Truepx';
    }
    .frame .text-wrapper-1000 {
      position: absolute;
      height: 54px;
      top: 1px;
      left: 40px;
      color: #f5f5f5;
      font-size: 38px;
      text-align: center;
      white-space: nowrap;
      direction: rtl;
      font-family: "Tajawal";
      font-weight: 400;
      letter-spacing: 0;
      line-height: 'Truepx';
      }

    .frame .text-wrapper-11 {
    position: absolute;
    height: 36px;
    top: 33px;
    left: 254px;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: 'Truepx';
    }
    
    .frame .up10 {
      position: absolute;
      height: 36px;
      top: 90px;
      left: 125px;
      color: #ffffff;
      font-size: 40px;
      text-align: center;
      white-space: nowrap;
      direction: rtl;
      font-family: "Tajawal";
      font-weight: 400;
      letter-spacing: 0;
      line-height: 'Truepx';
      }

    .frame .check-wrapper {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 34px;
    left: 330px;
    background-color: #8a7f95;
    border-radius: 22.5px;
    }
    .frame .check {
    position: absolute;
    width: 28px;
    height: 28px;
    top: 6px;
    left: 5px;
    object-fit: cover;
    }
    .frame .radar {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 457px;
    left: 366px;
    object-fit: cover;
    }
    .frame .overlap-4 {
    position: absolute; /*التجكم باالبطاقة المبتدئ الجانبية*/
    width: 360px;
    height: 600px;
    top: 780px;
    left:27px;
    }
    .frame .group-2 {
    position: absolute;
    width: 566px;
    height: 605px;
    top: 0;
    left: 0;
    }
    .frame .text-wrapper-12 {
    height: 102px;
    top: 313px;         
    left: 205px;
    color: #ffffff;
    font-size: 70px;
    text-align: center;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 500;
    letter-spacing: 0;
    line-height: Truepx;
    white-space: nowrap;
    }
    .frame .text-wrapper-13 {
    width: 472px;
    height: 58px;
    top: 190px;
    left: -108px;
    color: #ffffff;
    font-size: 20px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: Truepx;
    direction: rtl;
    line-height: 1.2;
    }
    .frame .text-wrapper-14 {
    position: absolute;
    height: 29px;
    top: 458px;
    left: 5px;
    color: #ffffff;
    font-size: 18px;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: Truepx;
    }
    .frame .text-wrapper-15 {
    position: absolute;
    height: 36px;
    top: 32px;
    left: 237px;
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    white-space: nowrap;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: Truepx;
    }

    .frame .up100{
      position: absolute;
      height: 36px;
      top: 90px;
      left: 145px;
      color: #ffffff;
      font-size: 40px;
      text-align: center;
      white-space: nowrap;
      direction: rtl;
      font-family: "Tajawal";
      font-weight: 400;
      letter-spacing: 0;
      line-height: 'Truepx';
    }
    .frame .ellipse-2 {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 32px;
    left: 330px;
    background-color: #8a7f95;
    border-radius: 22.5px;
    }
    .frame .img {
    top: 458px;
    position: absolute;
    width: 28px;
    height: 28px;
    left: 379px;
    object-fit: cover;
    }
    .frame .user-2 {
    width: 30px;
    height: 30px;
    top: 35px;
    left: 333px;
    position: absolute;
    object-fit: cover;
    }
    .frame .text-wrapper-16 {
      position: absolute;
      width: 314px;
      height: 24px;
      top: 390px;
      left: 110px;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ff8750;
      font-size: 18px;
      text-align: center;
      letter-spacing: 0;
      line-height: Truepx;
      direction: rtl;
    }
    .frame .text-wrapper-17 {
    position: absolute;
    height: 29px;
    top: 362px;
    left: 18px;
    color: #ffffff;
    font-size: 20px;
    direction: rtl;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: 'Truepx';
    }
    .frame .group-3 {
        position: absolute; /* التحكم بالبطاقة الوسط  */
        width: 581px;
        height: 706px;
        top: 710px; /* تم تعديل القيمة */
        left: 514px; /* تم تعديل القيمة */
    }
    
    .frame .overlap-5 {
        position: relative;
        height: 706px;
    }
    
    .frame .group-4 {
        position: absolute;
        width: 581px;
        height: 706px;
        top: 0; /* تم تعديل القيمة */
        left: 0px; /* تم تعديل القيمة */
    }
    
    .frame .overlap-6 {
        position: relative; /* التحكم بعرض البطاقة الأخيرة */
        width: 424px;
        height: 680px;
        background: linear-gradient(45deg, #fbce5d, #9f20cc);
        border-radius: 60px;
    }
    
    .frame .group-5 {
        position: absolute; /* التحكم باتجاه البطاقة الملونة */
        width: 540px;
        height: 606px;
        top: 75px; /* تم تعديل القيمة */
        left: 3px; /* تم تعديل القيمة */
    }
    
    .frame .overlap-group-4 {
        position: relative;
        width: 418px;
        height: 600px;
        background: linear-gradient(to bottom right, #000000, #a028cc);
        border-radius: 60px;
        border: 2px solid;
        border-color: #ffffff;
    }
    
    .frame .text-wrapper-18 {
        width: 214px;
        height: 102px;
        top: 308px; /* تم تعديل القيمة */
        left: 188px; /* تم تعديل القيمة */
        color: #ffffff;
        font-size: 70px;
        text-align: center;
        position: absolute;
        font-family: "Tajawal";
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.5; /* تم تعديل القيمة */
        white-space: nowrap;
    }
    
    .frame .text-wrapper-19 {
        position: absolute;
        width: 490px;
        height: 29px;
        top: 457px; /* تم تعديل القيمة */
        left: -115px; /* تم تعديل القيمة */
        color: #ffffff;
        font-size: 18px;
        direction: rtl;
        font-family: "Tajawal";
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.5; /* تم تعديل القيمة */
    }
    
    .frame .overlap-7 {
        position: absolute;
        width: 250px;
        height: 60px;
        top: 505px; /* تم تعديل القيمة */
        left: 80px; /* تم تعديل القيمة */
        background: linear-gradient(45deg, #fbce5d, #9f20cc);
        border-radius: 60px;
    }
    
    .frame .text-wrapper-20 {
        position: absolute;
        width: 160px;
        height: 54px;
        top: 1px; /* تم تعديل القيمة */
        left: 52px; /* تم تعديل القيمة */
        color: #f5f5f5;
        font-size: 38px;
        text-align: center;
        direction: rtl;
        font-family: "Tajawal";
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.5; /* تم تعديل القيمة */
        white-space: nowrap;
    }
    
    .frame .text-wrapper-21 {
        position: absolute;
        width: 91px;
        height: 36px;
        top: 30px; /* تم تعديل القيمة */
        left: 230px; /* تم تعديل القيمة */
        color: #ffffff;
        font-size: 30px;
        text-align: center;
        white-space: nowrap;
        direction: rtl;
        font-family: "Tajawal";
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.5; /* تم تعديل القيمة */
    }
    
    .frame .up1000{
      position: absolute;
      height: 36px;
      top: 90px;
      left: 305px;
      color: #ffffff;
      font-size: 40px;
      text-align: center;
      white-space: nowrap;
      direction: rtl;
      font-family: "Tajawal";
      font-weight: 400;
      letter-spacing: 0;
      line-height: 'Truepx';
    }
    .frame .ellipse-3 {
        position: absolute;
        width: 35px;
        height: 35px;
        top: 32px; /* تم تعديل القيمة */
        left: 330px; /* تم تعديل القيمة */
        background-color: #8a7f95;
        border-radius: 22.5px;
    }
    
    .frame .radar-2 {
        top: 457px; /* تم تعديل القيمة */
        position: absolute;
        width: 28px;
        height: 28px;
        left: 380px; /* تم تعديل القيمة */
        object-fit: cover;
    }
    
    .frame .VIP {
        position: absolute;
        width: 314px;
        height: 24px;
        top: 458px; /* تم تعديل القيمة */
        left: 90px; /* تم تعديل القيمة */
        font-family: "Tajawal";
        font-weight: 400;
        color: #ff8750;
        font-size: 18px;
        text-align: center;
        letter-spacing: 0;
        line-height: 1.5; /* تم تعديل القيمة */
        direction: rtl;
    }
    
    .frame .text-wrapper-22 {
        position: absolute;
        height: 29px;
        top: 430px; /* تم تعديل القيمة */
        left: 33px; /* تم تعديل القيمة */
        color: #ffffff;
        font-size: 20px;
        direction: rtl;
        font-family: "Tajawal";
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.5; /* تم تعديل القيمة */
    }
    
    .frame .text-wrapper-23 {
        position: absolute;
        height: 48px;
        top: 10px; /* تم تعديل القيمة */
        left: 115px; /* تم تعديل القيمة */
        color: #ffffff;
        font-size: 40px;
        white-space: nowrap;
        direction: rtl;
        font-family: "Tajawal";
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.5; /* تم تعديل القيمة */
    }
    
    .frame .text-wrapper-24 {
        height: 40px;
        top: 100px; /* تم تعديل القيمة */
        left: 344px; /* تم تعديل القيمة */
        color: #ffffff;
        font-size: 35px;
        text-align: right;
        position: absolute;
        font-family: "Tajawal";
        font-weight: 400;
        letter-spacing: 0;
        line-height: 1.5; /* تم تعديل القيمة */
        white-space: nowrap;
    }
    
    .frame .flexcontainer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
        position: absolute;
        width: 1372px;
        height: 176px;
        top: 100px; /* تم تعديل القيمة */
        left: 34px; /* تم تعديل القيمة */
    }
    .frame .flexcontainer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    position: absolute;
    width: 1372px;
    height: 176px;
    top: 1500px;
    left: 34px;
    }
    .frame .text {
    position: relative;
    align-self: stretch;
    color: #000000;
    font-size: 30px;
    text-align: center;
    font-family: "Tajawal";
    font-weight: 400;
    letter-spacing: 0;
    line-height: Truepx;
    }
    .frame .span {
    font-family: "Tajawal";
    font-weight: 100;
    color: #ffffff;
    font-size: 27px;
    letter-spacing: 0;
    
    }
  /**/
  
    .frame .overlap-group {
    position: absolute;
    width: 439px;
    height: 702px;
    top: 632px;
    left: 969px;
    }
   
    .frame .overlap-group100 {
      top: 780px;
      left: 26px;
      position: absolute;
      width: 420px;
      height: 620px;
      background-color: #9f20cc;/*البطاقة الاحيرة*/
      border-radius: 65px;
  }
  
  
  
  .frame .test {
      position: absolute;
      width: 346px;
      height: 182px;
      top: 115px;
      left: 15px;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ffffff;
      font-size: 20px;
      letter-spacing: 0;
      line-height: normal;
      direction: rtl;
  }
  
  .frame .text-wrapper70 {
      position: absolute;
      height: 36px;
      top: 309px;
      left: 230px;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ffffff;
      font-size: 26px;
      letter-spacing: 0;
      line-height: normal;
      white-space: nowrap;
      direction: rtl;
  }
  
  .frame .flexcontainer50 {
      height: 234px;
      top: 455px;
      left: 84px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 25px;
      position: absolute;
      width: 323px;
      line-height: 1.2;
  }
  
  .frame .text100{
      position: relative;
      align-self: stretch;
      font-size: 18px;
      text-align: right;
      font-family: "Tajawal";
      color: #ffffff;
      letter-spacing: 0;
      top: -100px;
      left: -40px;
      
  }
  
  .frame .span10 {
      font-family: "Tajawal";
      color: #ffffff;
      font-size: 20px;
      letter-spacing: 0;
  }

  .high {
    color: #ff8750; /* اللون المطلوب */
     /* لجعل الكلمات أكثر وضوحًا (اختياري) */
}
  
  .frame .test-2 {
      position: absolute;
      height: 36px;
      top: 75px;
      left: 201px;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ffffff;
      font-size: 26px;
      letter-spacing: 0;
      line-height: normal;
      white-space: nowrap;
      direction: rtl;
  }
  
  .frame .overlap50 {
      top: 780px;
      left: 508px;
      position: absolute;
      width: 420px;
      height: 620px;
      background-color: #9f20cc;/*البطاقة الوسط */
      border-radius: 65px;
  }
  
  .frame .ellipse50 {
      top: 30px;
      left: 340px;
      position: absolute;
      width: 35px;
      height: 35px;
      background-color: #8a7f95;
      border-radius: 22.5px;
  }
  
  .frame .p50 {
      position: absolute;
      width: 346px;
      height: 156px;
      top: 125px;
      left: 20px;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ffffff;
      font-size: 20px;
      letter-spacing: 0;
      line-height: normal;
      direction: rtl;
  }
  
  .frame .test-3 {
      position: absolute;
      height: 36px;
      top: 75px;
      left: 145px;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ffffff;
      font-size: 26px;
      letter-spacing: 0;
      line-height: normal;
      white-space: nowrap;
      direction: rtl;
  }
  
  .frame .test-4 {
      position: absolute;
      height: 36px;
      top: 300px;
      left: 230px;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ffffff;
      font-size: 26px;
      letter-spacing: 0;
      line-height: normal;
      white-space: nowrap;
      direction: rtl;
  }
  
  .frame .flexcontainer100 {
      height: 182px;
      top: 458px;
      left: 67px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 25px;
      position: absolute;
      width: 323px;
  }
  
  .frame .overlap100 {
      top: 780px;
      left: 1001px;
      position: absolute;
      width: 420px;
      height: 620px;
      background-color: #9f20cc;/*البطاقة الاولى*/
      border-radius: 65px;
  }
  
  .frame .ellipse150 {
      top: 30px;
      left: 340px;
      position: absolute;
      width: 35px;
      height: 35px;
      background-color: #8a7f95;
      border-radius: 22.5px;
  }
  
  .frame .test-5 {
      position: absolute;
      height: 36px;
      top: 75px;
      left: 115px;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ffffff;
      font-size: 26px;
      text-align: center;
      letter-spacing: 0;
      line-height: normal;
      white-space: nowrap;
      direction: rtl;
  }
  
  .frame .test-6 {
      position: absolute;
      width: 346px;
      height: 182px;
      top: 127px;
      left: 18px;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ffffff;
      font-size: 20px;
      letter-spacing: 0;
      line-height: normal;
      direction: rtl;
  }
  
  .frame .text-wrapper200 {
      position: absolute;
      height: 36px;
      top: 300px;
      left: 233px;
      font-size: 26px;
      white-space: nowrap;
      direction: rtl;
      font-family: "Tajawal";
      font-weight: 400;
      color: #ffffff;
      letter-spacing: 0;
      line-height: normal;
  }
  
  .frame .flexcontainer350 {
      height: 208px;
      top: 451px;
      left: 79px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 25px;
      position: absolute;
      width: 323px;
  }

  a {
    text-decoration: none;
}



.new15 .group555 {
    position: relative;
    width: 1347px;
    height: 968px;
    top: 0px;
    left: -15px;
}
.new15 .rectangle555 {
    position: absolute;
    width: 1370px;
    height: 730px;
    top: 0px;
    left: 0px;
    background-color:#ffffff1c;
    border-radius: 40px 40px 40px 40px;
    filter: blur(0px);
}

.new15 .div555 {
    position: absolute;
    width: 220px;
    height: 150px;
    top: 0;
    left: 1000px;
    background: linear-gradient(45deg, #fbce5d, #9f20cc);
    border-radius: 0px 0px 75px 75px;
}
.box55 {
    width: 10px;
    height: 965px;
}

.box55 .line55 {
    position: fixed;
    width: 3px;
    height: 965px;
    background-color: #ffffff;
    top: 10px;
    left: 1000px;
}



.new15 .text-wrapper555 {
    top: 50px;
    left: 1005px;
    font-size: 35px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal" ;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-255 {
    top: 200px;
    left: 975px;
    font-size: 25px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-355 {
    top: 200px;
    left: 710px;
    font-size: 25px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-455 {
    width: 312px;
    top: 200px;
    left: 305px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-555 {
    top: 200px;
    left: 77px;/**/
    font-size: 25px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-655 {
    top: 270px;
    left: 745px;
    font-size: 25px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-755 {
    top: 270px;
    left: 410px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal" ;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-855 {
    top: 270px;
    left: 77px;/**/
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-955 {
    top: 340px;
    left: 745px;
    font-size: 25px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1055 {
    top: 340px;
    left: 380px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1155 {
    top: 340px;
    left: 55px;/**/
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1255 {
    top: 410px;
    left: 745px;
    font-size: 25px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal" ;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1355 {
    top: 410px;
    left: 420px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1455 {
    top: 410px;
    left: 71px;/**/
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1555 {
    top: 485px;
    left: 745px;
    font-size: 25px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1655 {
    top: 485px;
    left: 410px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1755 {
    top: 485px;
    left: 71px;/**/
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1855 {
    top: 555px;
    left: 745px;
    font-size: 25px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-1955 {
    top: 555px;
    left: 410px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2055 {
    top: 555px;
    left: 71px;/**/
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2155 {
    top: 615px;
    left: 745px;
    font-size: 25px;
    white-space: nowrap;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2255 {
    top: 615px;
    left: 410px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2355 {
    top: 615px;
    left: 71px;/**/
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2455 {
    top: 270px;
    left: 965px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2555 {
    top: 340px;
    left: 1015px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2655 {
    top: 410px;
    left: 990px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal", ;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2755 {
    top: 485px;
    left: 975px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2855 {
    top: 555px;
    left: 1000px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-2955 {
    top: 615px;
    left: 1015px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal" ;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .line55 {
    position: absolute;
    width: 1px;
    height: 731px;
    background-color: #ffffff;
    top: 0;
    left: 912px;
}

.new15 .img55 {
    position: absolute;
    width: 1px;
    height: 731px;
    background-color: #ffffff;
    top: 0;
    left: 658px;
}

.new15 .line-255 {
    position: absolute;
    width: 1px;
    height: 731px;
    background-color: #ffffff;
    top: 1px;
    left: 319px;
}

.new15 .rectangle-255 {
  position: absolute;
  width: 240px;
  height: 50px;
  top: 670px;
  left: 666px;
  background-color: rgb(84, 82, 82);;
  border-radius: 40px 40px 40px 40px;
  cursor: pointer; /* تغيير شكل الماوس إلى يد */
}

.new15 .text-wrapper-3555 {
  top: 668px;
  left: 725px;
  font-size: 35px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
  cursor: pointer; /* تغيير شكل الماوس إلى يد */
  z-index: 1;
}

.new15 .rectangle-355 {
  position: absolute;
  width: 240px;
  height: 50px;
  top: 670px;
  left: 370px;
  background-color: rgb(84, 82, 82);;
  border-radius: 40px 40px 40px 40px;
  cursor: pointer; /* تغيير شكل الماوس إلى يد */
}

.new15 .text-wrapper-3655 {
  top: 668px;
  left: 425px;
  font-size: 35px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
  cursor: pointer; /* تغيير شكل الماوس إلى يد */
  z-index: 1; /* إضافة هذا السطر لجعل النص يظهر فوق الزر */
}

.new15 .rectangle-455 {
  position: absolute;
  width: 240px;
  height: 50px;
  top: 670px;
  left: 30px;
  background: linear-gradient(45deg, #fbce5d, #9f20cc);
  border-radius: 40px 40px 40px 40px;
  cursor: pointer; /* تغيير شكل الماوس إلى يد */
}

.new15 .text-wrapper-3755 {
  top: 670px;
  left: 62px;
  font-size: 35px;
  white-space: nowrap;
  position: absolute;
  font-family: "Tajawal";
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0;
  line-height: normal;
  direction: rtl;
  cursor: pointer; /* تغيير شكل الماوس إلى يد */
  z-index: 1; /* إضافة هذا السطر لجعل النص يظهر فوق الزر */
}

.new15 .p555 {
    top: 20px;
    left: 753px;
    font-size: 25px;
    position: absolute;
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .span555 {
    font-family: "Tajawal";
    font-weight: 400;
    color: #ffffff;
    font-size: 23px;
    letter-spacing: 0;
    left: 90px;
    position: absolute;
}

.new15 .text-wrapper-3055 {
    font-size: 50px;
    position: absolute;
    left:  -15px;
    top: 75px;
}

.new15 .element {
    top: 18px;
    left: 355px;
    font-size: 40px;
    position: absolute;
    font-family: "Tajawal";
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .text-wrapper-3155 {
    font-family: "Tajawal";
    color: #ffffff;
    font-size: 40px;
    letter-spacing: 0;
}

.new15 .text-wrapper-3255 {
    font-size: 23px;
    left: 220px;
    position: absolute;
}

.new15 .text-wrapper-3355 {
    font-size: 50px;
    top: 75px;
    position: absolute;
    left: 165px;
    font-weight: 520;
}

.new15 .text-wrapper-3455 {
    font-size: 18px;
    position: absolute;
    top: 104px;
    left:  0px;
    white-space: nowrap;

}

.new15 .element-2 {
    top: 15px;
    left: 10px;
    font-size: 40px;
    position: absolute;
    font-family: "Tajawal", ;
    color: #ffffff;
    letter-spacing: 0;
    line-height: normal;
    direction: rtl;
}

.new15 .horizontal-line55 {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #ffffff;
    top: 180px; /* قم بتعديل قيمة top لتحديد موضع الخط */
  }
  /* تنسيق العنصر الرئيسي */
.BkG {
  display: block;
  margin: auto;
  width: 1350px;
  position: static;
  background-color:#ffffff1c;
  direction: rtl;
  margin-left: 5%;
  height: fit-content;
  border-radius: 20px;
  margin-right: 0%;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: -400px;
}



.outline {
  color: #c46c36;
  border: solid #c46c36;
  border-radius: 25px;
  height: 40px;
  width: 130pX;
  position: absolute;
  padding: 1px 15px 1px 0px ;
  left: 220px;
  top: -300px;
 

}


/* تنسيق الأقسام الفارغة */
.empty_sec {
  display: block;
  margin: auto;
  width: 1120px;
  position: static;
  margin-left: 16.2%;
  height: fit-content;
  direction: rtl;
  margin-right: 150px;
  padding-top: 200px;
  padding-bottom: 30px;
  margin-top: -650px;

}

.empty_sec h2, .empty_sec h2 samp {
  color: white;
  font-family: 'Tajawal';
  font-size: 32px;
  text-align: center;
  padding: 0px;
  margin-right: 39px;
}

.empty_sec h4, .empty_sec h4 samp {
  color: #380e6b;
  font-family: 'Tajawal';
  font-size: 20px;
  text-align: center;
  line-height: 3.5;
}

.empty_sec h4 samp {
  color: #919191;
  margin-right: 39px;
}

.empty_sec samp {
  background-color: rgba(0, 0, 0, 0);
}

/* تنسيق فئات الخدمات الإضافية */
.FDiv2 {
  width: 37%;
  float: right;
  height: 240px;
  background: linear-gradient(to bottom right, #000000, #9f28cc);
  color: white;
  border-radius: 30px;
  padding: 2.5%;
  display: block;
  position: static;
  font-size: 'Tajawal';
  line-height: 1.5; /* تزيد المسافة بنسبة 50% */
  margin-right: 140px;
  
}

/* تنسيق جدول التدريب المخصص */
.info-table {
  width: 95%;
  margin-right: 12px;
  text-align: center;
  border-spacing: 0 15px;
  text-align: right;
}

.icon-cell {
  width: 15%;
}

.icon-cell i {
  font-size: 90px;
  color: rgba(255, 255, 255, 0.966);
  background-color: #c46c36;
  border-radius: 50%;
  padding: 25px 43px;
  width: 150px;
  height: 140px;
  margin-right: 20px;
  
}

.info-text {
  width: 50%;
  text-align: right;
  line-height: 1.5;
}

.info-text h2 {
  color: white;
  font-family: 'Tajawal';
  font-size: 25px;
}

.info-text h4 {
  color: #919191;
  font-family: 'Tajawal';
  font-size: 18px;
  line-height: 1.5;
}

.btn-cell {
  width: 20%;
}

/* تنسيق الأقسام المساعدة */
.container {
  width: 100%;
  margin: 70px auto;
  padding: 0px 0;
  transform: translateX(0px);
  margin-top: 300px;
  
}

.no-padding {
  padding-bottom: 0px;
}

.no-margin {
  margin-bottom: 0;
  margin-top: 0px;
 padding: 70px 5px;
 
}
/* تنسيق فقرة الأسعار داخل خدمات إضافية */
.price-info {
  color: #7d3507;
  margin-top: 30px;
  font-size: 23px;
  font-family: 'Tajawal';
  font-weight: 600; /* نص أخف */
}

.price-info strong {
  color: white;
  font-size: 20px;
  font-family: 'Tajawal';
  margin-right: 5px;
}

/* تنسيق زر تواصل معنا */
.btn.contact {
  background-color: #1e1e1e;
  border-radius: 50px;
  padding: 2% 5%;
  margin-right: 30px;
  font-family: 'Tajawal';
  color: white;
  
  
}


/* تنسيق عنوان الأسئلة */
.faq-title {
  color: white;
  text-align: center;
  font-size: 30px;
  margin-bottom: 3px;
  font-family: 'Tajawal';
  margin-top: -450px;
  margin-left: -50px;
}

.faq-title span {
  background-color: rgba(0, 0, 0, 0);
}
.faq-container {
  display: flex;
  justify-content: space-between;
  padding: 100px;
  margin-bottom:0px;
  margin-right: 125px;
  gap: 20px; /* تحديد المسافة الأفقية بين العناصر */
}

.faq-column {
  width: 600px;
  margin-top: -520px;
  padding: 40px;
}

/* إزالة السهم الافتراضي من نهاية السؤال */
summary {
  list-style: none; /* إخفاء السهم الافتراضي */
  z-index: 1;
  margin-left: 10px;
  text-align: right; /* محاذاة النص إلى اليمين */
  position: relative; /* لجعل السهم يظهر بشكل صحيح */
}

summary::-webkit-details-marker {
  display: none; /* إخفاء السهم الافتراضي في المتصفحات التي تستخدم WebKit */
  z-index: 1;
}

details {
  font-family: 'Tajawal';
  margin: 14px 0px 0px 50px; /* تعديل الهوامش */
  color: white;
  border: solid 3px;
  width: 100%;
  padding: 14px;
  border-radius: 50px;
  background-color: #9f20cc;
  box-shadow: 0 0 10px #9f20cc;
  line-height: 1.8;
  z-index: 1;
}

.Q details {
  margin: 15px 0 0 25%; /* تعديل الهوامش */
}

summary {
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  right: 25px;
}

details[open] summary {
  color: white;
  z-index: 1;
}

details[open] {
  background-color: black;
  color: white;
  text-align: right; /* محاذاة النص إلى اليمين */
  z-index: 1;
}

.join-button-container {
  display: block;
  padding-bottom: 25px;
  width: 100%;
  text-align: center;
  margin-top: -1000px;
  z-index: -1;
}

.join-button15 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 20px;
  text-transform: uppercase;
  background-color: rgba(237, 142, 54, 0.677);
  border: 5px solid rgba(199, 131, 53, 0.752);
  color: white;
  text-align: center;
  overflow: hidden;
  font-family: "Tajawal";
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  position: relative;
  z-index: 3;
  cursor: pointer;
  text-decoration: none;
  margin-top: 660px;
  margin-right: 35px;
  pointer-events: auto; /* إضافة هذه الخاصية */
}

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

.join-button15:hover::before {
  width: 105%;
}

.join-button15:hover {
  color: #ffffff;
}

/* وضع السهم على اليمين */
summary::after {
  content: "▶"; /* سهم يشير إلى السؤال */
  font-size: 12px;
  margin-left: 10px; /* المسافة بين النص والسهم */
  transition: transform 0.3s ease; /* تأثير تحويل السهم */
  display: inline-block;
  transform: rotate(180deg); /* تدوير السهم ليشير لليمين */
  position: absolute;
  right: -15px; /* تعديل موضع السهم */
}

details[open] summary::after {
  transform: rotate(90deg); /* تدوير السهم ليشير للأسفل عند فتح السؤال */
}
  .foot {
    display: grid;
    z-index: 1;
    --footer-background: linear-gradient(90deg, #07030c, #07030c); /* التدرج لوني الزهري والبنفسجي */
    position: relative;
    grid-area: footer;
    min-height: 34rem;
    width: 100%; /* عرض الفوتر بكامل الشاشة */
    left: 0px;
    padding: 0px 0;
    margin-top: 100px; /* يلتصق الفوتر بأسفل الصفحة */
    top: 0;
    }
   
   .foot .bubbles {
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    height: 5rem;
    background: var(--footer-background);
    filter: blur(0.5px);
        animation: floatUp 8s infinite, fadeInOut 8s infinite;
        
    }
    
  
   .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, 4s) ease-in infinite var(--delay, 30s),
    bubble-move var(--time, 4s) ease-in infinite var(--delay, 30s);
    transform: translate(-50%, 100%);
    
    
    }
   
   .foot .content500 {
    z-index: 2;
    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: 40.1vh;
    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: 40.1vh;
    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: 200.5px;
       left: 230px;
       font-size: 18px;
       direction: rtl;
       font-family: "Tajawal";
       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: white;
    text-align: center;
    overflow: hidden;
    font-family: inherit;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; /* تحديد الانتقال فقط للألوان */
    z-index: 1;
    cursor: pointer;
    font-family: "Tajawal";
    
  }
  
  .rectangle-104::before {
    content: '';
    width: 0;
    height: 352%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: rgb(148, 71, 7);
    transition: width 0.5s ease; /* تحديد وقت الانتقال فقط للعرض */
    display: block;
    z-index: -1;
  }
  
  .rectangle-104:hover::before {
    width: 135%;
  }
  
  .rectangle-104:hover {
    color: #ffffff;
  }
  
  
  
   .text-wrapper-104 {
       position: absolute;
       top: 120px;
       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: 12px;
       position: absolute;
       width: 208px;
       height: 360px;
       top: 165px;
       left: 1017px;
   }
   .text500 {
       position: relative;
       align-self: stretch;
       font-size: 22px;
       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;
    } 
    .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% {
   bottom: -4rem;
         }
         100% {
   bottom: var(--distance, 10rem);
     }
    }
    .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;
}
}