* {
    box-sizing: border-box;
    max-width: 100%;
}
body {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body * {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
}

.div,
.div * {
  box-sizing: border-box;
}
.div {
  background: var(--colors-neutral-100, #ffffff);
  /*height: 5255px;*/
  position: relative;
  overflow: hidden;
}
.hero-section {
  position: absolute;
  inset: 0;
}
.group-1707480360 {
  width: 100%;
  height: 800px;
  position: static;
}
.image-85 {
  width: 100%;
  height: 800px;
  position: absolute;
  /* left: calc(50% - -1398.53px); */
  /* top: 785px; */
  transform-origin: 0 0;
  /* transform: rotate(90deg) scale(1, -1);
  object-fit: cover; */
}
.image-87 {
  width: 1024px;
  height: 799.26px;
  position: absolute;
  left: calc(50% - 1009px);
  top: 785px;
  transform-origin: 0 0;
  transform: rotate(-90deg) scale(1, 1);
  object-fit: cover;
}
.vector {
  width: 100%;
  height: 800px;
  position: absolute;
  left: -359px;
  top: 0px;
  overflow: visible;
}
.hero-section-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6, 24px);
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  position: absolute;
  /* left: 217px; */
  top: 255px;
}
.div2 {
  text-align: center;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-headings-h-5-font-size, 48px);
  line-height: var(--global-tokens-headings-h-5-line-height, 72px);
  font-weight: var(--global-tokens-headings-h-5-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.div-2-span {
  color: var(--colors-neutral-100, #ffffff);
}
.div-2-span2 {
  color: var(--colors-primary-500, #5181c2);
}
.div3 {
  color: var(--colors-neutral-400, #bbbbbb);
  text-align: center;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 24px;
  font-weight: 400;
  position: relative;
  width: 40%;
}
.frame-1707480371 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-6, 24px);
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.link {
  border-radius: var(--radius-4, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-900, #4a4a4a);
  border-width: 1px;
  padding: 12px 32px 12px 32px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.div4 {
  color: var(--colors-neutral-100, #ffffff);
  text-align: left;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-1-font-size, 16px);
  line-height: var(--global-tokens-body-b-1-line-height, 24px);
  font-weight: var(--global-tokens-body-b-1-font-weight, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.link2 {
  background: var(--colors-primary-500, #5181c2);
  border-radius: var(--radius-4, 16px);
  padding: 12px 32px 12px 32px;
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.link2 a {
    color: #fff; /* لون النص */
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

/* عند المرور بالماوس */
.link2:hover {
    background: #ffffff; /* درجة أغمق أو نفس المتغير لو عندك */
}

.link2:hover a {
    color: var(--colors-primary-500, #5181c2);
}

.frame-1707480386 {
  background: rgb(82 107 187 / 17%);
  border-radius: var(--radius-8, 47px);
  border-style: solid;
  border-color: rgb(51 50 27 / 87%);
  border-width: 1px;
  padding: 16px 24px 16px 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  position: absolute;
  left: 50%;
  translate: -50%;
  top: 24px;
}
.frame-7 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  position: relative;
}
.frame-9 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-3, 12px);
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-6 {
  background: var(--colors-primary-500, #5181c2);
  border-radius: var(--radius-3, 12px);
  padding: 12px 16px 12px 16px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-6 a {
    color: #fff; /* لون النص */
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
}

/* عند المرور بالماوس */
.frame-6:hover {
    background: #ffffff; /* درجة أغمق أو نفس المتغير لو عندك */
}

.frame-6:hover a {
    color: var(--colors-primary-500, #5181c2);
}

.div5 {
  color: var(--colors-neutral-100, #ffffff);
  text-align: left;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-1-font-size, 16px);
  line-height: var(--global-tokens-body-b-1-line-height, 24px);
  font-weight: var(--global-tokens-body-b-1-font-weight, 400);
  position: relative;
}
.frame-8 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-1, 4px);
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.mingcute-earth-2-line {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  aspect-ratio: 1;
}
.group {
  width: 83.33%;
  height: 90.89%;
  position: absolute;
  right: 8.33%;
  left: 8.33%;
  bottom: 0.78%;
  top: 8.33%;
  overflow: visible;
}
.frame-1 {
  display: flex;
  flex-direction: row;
  gap: 9px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.frame-62 {
  padding: 12px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-4 {
  padding: 12px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-3 {
  padding: 12px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.frame-2 {
  padding: 12px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.digitalsas-1-2 {
  flex-shrink: 0;
  width: 100px;
  height: 26px;
  position: relative;
  overflow: hidden;
  aspect-ratio: 100/26;
}
.layer-mc-0 {
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
}
.frame-1707480385 {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-9, 48px);

    /* توسيط محتوى الفريم */
    align-items: center;
    justify-content: center;

    /* الحجم */
    width: 100%;
    max-width: 1280px;

    /* توسيط الفريم نفسه */
    margin: 0 auto;

    /* إلغاء الوضعية المطلقة */
    position: relative;
    top: 30px;
}

.frame-1707480381 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1707480390 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.link3 {
    background: #f3f7fc;
    border-radius: 15px;
    padding: 14px 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    font-size: 42px;
    color: #5181c2;
    font-weight: 500;
    background-image: linear-gradient(#f3f7fc, #f3f7fc), linear-gradient(0deg, #ffffff08 0%, #5181c291 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    transition: 0.3s ease-in-out;
}


.div6 {
  color: var(--colors-primary-500, #5181c2);
  text-align: left;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-3-font-size, 12px);
  line-height: var(--global-tokens-body-b-3-line-height, 18px);
  font-weight: var(--global-tokens-body-b-3-font-weight, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.div7 {
  text-align: center;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-headings-h-9-font-size, 24px);
  line-height: var(--global-tokens-headings-h-9-line-height, 36px);
  font-weight: var(--global-tokens-headings-h-9-font-weight, 700);
  position: relative;
  align-self: stretch;
}
.div-7-span {
  color: var(--colors-primary-500, #5181c2);
}
.div-7-span2 {
  color: var(--colors-neutral-1000, #333333);
}
.frame-1707480380 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1707480384 {
  background: var(--colors-primary-100, #dce6f3);
  border-radius: var(--radius-4, 16px);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.group-1707480361 {
  flex-shrink: 0;
  width: 598px;
  height: 399px;
  position: relative;
  overflow: visible;
}
.frame-1707480379 {
  display: flex;
  flex-direction: column;
  gap: 27px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 634px;
  position: relative;
}
._2030 {
  color: #000000;
  text-align:right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-1-font-size, 16px);
  line-height: var(--global-tokens-body-b-1-line-height, 24px);
  font-weight: var(--global-tokens-body-b-1-font-weight, 400);
  position: relative;
  align-self: stretch;
  
}
.frame-1707480378 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.card {
  background: linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-radius: var(--radius-lg, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--global-spacing-xl, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  flex-shrink: 0;
  width: 634px;
  position: relative;
  overflow: hidden;
}

.card * {
    transition: 0.3s ease; /* تخلي النص يتغير بأناقة */
}

/* عند المرور بالماوس */
.card:hover {
    background: var(--colors-primary-500, #5181c2);
    border-color: var(--colors-primary-500, #5181c2);
}

/* تغيير لون كل النصوص والأيقونات */
.card:hover,
.card:hover * {
    color: #fff !important;
}

.vector2 {
  flex-shrink: 0;
  width: 634px;
  height: 423px;
  position: absolute;
  left: 0px;
  top: -137px;
  overflow: visible;
  aspect-ratio: 634/423;
}
.featured-icon {
  background: var(--colors-primary-alpha-10, rgba(81, 129, 194, 0.1));
  border-radius: var(--radius-2, 8px);
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: relative;
}

/* انتقال ناعم */
.featured-icon,
.featured-icon * {
    transition: 0.3s ease;
}

/* عند المرور بالموس على الكارت */
.card:hover .featured-icon {
    background: #ffffff;
    border: 1px solid var(--colors-primary-500, #5181c2);
}

/* تغيير لون الأيقونات داخل featured-icon */
.card:hover .featured-icon * {
    color: var(--colors-primary-500, #5181c2) !important;
    fill: var(--colors-primary-500, #5181c2) !important;
    stroke: var(--colors-primary-500, #5181c2) !important;
}


.solar-chat-dots-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group2 {
  width: 89.58%;
  height: 89.58%;
  position: absolute;
  right: 5.21%;
  left: 5.21%;
  bottom: 5.21%;
  top: 5.21%;
  overflow: visible;
}
.div8 {
  color: var(--colors-neutral-1000, #333333);
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-headings-h-10-font-size, 20px);
  line-height: var(--global-tokens-headings-h-10-line-height, 30px);
  font-weight: var(--global-tokens-headings-h-10-font-weight, 500);
  position: relative;
  align-self: stretch;
}
.line-1 {
  margin-top: -1px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-image: linear-gradient(
    90deg,
    rgba(220, 230, 243, 1) 27.403846383094788%,
    rgba(81, 129, 194, 1) 50.4807710647583%,
    rgba(220, 230, 243, 1) 73.55769276618958%
  );
  border-image-slice: 1;
  align-self: stretch;
  flex-shrink: 0;
  height: 0px;
  position: relative;
}
.content {
  display: flex;
  flex-direction: column;
  gap: var(--global-spacing-md, 8px);
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div9 {
  color: var(--colors-neutral-800, #606060);
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-1-font-size, 16px);
  line-height: var(--global-tokens-body-b-1-line-height, 24px);
  font-weight: var(--global-tokens-body-b-1-font-weight, 400);
  position: relative;
  align-self: stretch;
}
.vector3 {
  flex-shrink: 0;
  width: 634px;
  height: 423px;
  position: absolute;
  left: 0px;
  top: -137px;
  overflow: visible;
  aspect-ratio: 634/423;
}
.solar-eye-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group3 {
  width: 83.33%;
  height: 66.67%;
  position: absolute;
  right: 8.33%;
  left: 8.33%;
  bottom: 16.67%;
  top: 16.67%;
  overflow: visible;
}
._20302 {
  color: var(--colors-neutral-800, #606060);
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-1-font-size, 16px);
  line-height: var(--global-tokens-body-b-1-line-height, 24px);
  font-weight: var(--global-tokens-body-b-1-font-weight, 400);
  position: relative;
  align-self: stretch;
}
.frame-1707480382 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div-7-span {
  color: var(--colors-primary-500, #5181c2);
}
.div-7-span2 {
  color: var(--colors-neutral-1000, #333333);
}
.frame-17074803782 {
  align-self: stretch;
  flex-shrink: 0;
  display: grid;
  gap: 16px;
  row-gap: 24px;
  position: relative;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.card2 {
  background: linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-radius: var(--radius-lg, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--global-spacing-xl, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  height: 214px;
  position: relative;
  overflow: hidden;
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;
}

.card2 * {
    transition: 0.3s ease; /* تخلي النص يتغير بأناقة */
}

/* عند المرور بالماوس */
.card2:hover {
    background: var(--colors-primary-500, #5181c2);
    border-color: var(--colors-primary-500, #5181c2);
}

/* تغيير لون كل النصوص والأيقونات */
.card2:hover,
.card2:hover * {
    color: #fff !important;
}
/* انتقال ناعم */
.featured-icon,
.featured-icon * {
    transition: 0.3s ease;
}

/* عند المرور بالموس على الكارت */
.card2:hover .featured-icon {
    background: #ffffff;
    border: 1px solid var(--colors-primary-500, #5181c2);
}

/* تغيير لون الأيقونات داخل featured-icon */
.card2:hover .featured-icon * {
    color: var(--colors-primary-500, #5181c2) !important;
    fill: var(--colors-primary-500, #5181c2) !important;
    stroke: var(--colors-primary-500, #5181c2) !important;
}


.vector4 {
  flex-shrink: 0;
  width: 416px;
  height: 278px;
  position: absolute;
  left: 0px;
  top: -64px;
  overflow: visible;
  aspect-ratio: 416/278;
}
.solar-users-group-rounded-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group4 {
  width: 79.17%;
  height: 79.17%;
  position: absolute;
  right: 12.5%;
  left: 8.33%;
  bottom: 12.5%;
  top: 8.33%;
  overflow: visible;
}
.div10 {
  color: var(--colors-neutral-1000, #333333);
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-1-font-size, 16px);
  line-height: var(--global-tokens-body-b-1-line-height, 24px);
  font-weight: var(--global-tokens-body-b-1-font-weight, 400);
  position: relative;
  align-self: stretch;
}
.card3 {
  background: linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-radius: var(--radius-lg, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--global-spacing-xl, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  height: 214px;
  position: relative;
  overflow: hidden;
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
}
.card3 * {
    transition: 0.3s ease; /* تخلي النص يتغير بأناقة */
}

/* عند المرور بالماوس */
.card3:hover {
    background: var(--colors-primary-500, #5181c2);
    border-color: var(--colors-primary-500, #5181c2);
}

/* تغيير لون كل النصوص والأيقونات */
.card3:hover,
.card3:hover * {
    color: #fff !important;
}
/* انتقال ناعم */
.featured-icon,
.featured-icon * {
    transition: 0.3s ease;
}

/* عند المرور بالموس على الكارت */
.card3:hover .featured-icon {
    background: #ffffff;
    border: 1px solid var(--colors-primary-500, #5181c2);
}

/* تغيير لون الأيقونات داخل featured-icon */
.card3:hover .featured-icon * {
    color: var(--colors-primary-500, #5181c2) !important;
    fill: var(--colors-primary-500, #5181c2) !important;
    stroke: var(--colors-primary-500, #5181c2) !important;
}

.vector5 {
  flex-shrink: 0;
  width: 416px;
  height: 278px;
  position: absolute;
  left: 0px;
  top: -64px;
  overflow: visible;
  aspect-ratio: 416/278;
}
.solar-flag-2-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group5 {
  width: 56.26%;
  height: 83.33%;
  position: absolute;
  right: 22.91%;
  left: 20.83%;
  bottom: 8.33%;
  top: 8.33%;
  overflow: visible;
}
.card4 {
  background:linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-radius: var(--radius-lg, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--global-spacing-xl, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  height: 214px;
  position: relative;
  overflow: hidden;
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
}

.card4 * {
    transition: 0.3s ease; /* تخلي النص يتغير بأناقة */
}

/* عند المرور بالماوس */
.card4:hover {
    background: var(--colors-primary-500, #5181c2);
    border-color: var(--colors-primary-500, #5181c2);
}

/* تغيير لون كل النصوص والأيقونات */
.card4:hover,
.card4:hover * {
    color: #fff !important;
}
/* انتقال ناعم */
.featured-icon,
.featured-icon * {
    transition: 0.3s ease;
}

/* عند المرور بالموس على الكارت */
.card4:hover .featured-icon {
    background: #ffffff;
    border: 1px solid var(--colors-primary-500, #5181c2);
}

/* تغيير لون الأيقونات داخل featured-icon */
.card4:hover .featured-icon * {
    color: var(--colors-primary-500, #5181c2) !important;
    fill: var(--colors-primary-500, #5181c2) !important;
    stroke: var(--colors-primary-500, #5181c2) !important;
}

.vector6 {
  flex-shrink: 0;
  width: 416px;
  height: 278px;
  position: absolute;
  left: 0px;
  top: -64px;
  overflow: visible;
  aspect-ratio: 416/278;
}
.solar-lightbulb-bolt-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group6 {
  width: 62.5%;
  height: 83.33%;
  position: absolute;
  right: 18.75%;
  left: 18.75%;
  bottom: 8.33%;
  top: 8.34%;
  overflow: visible;
}
.card5 {
  background: linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-radius: var(--radius-lg, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--global-spacing-xl, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  height: 214px;
  position: relative;
  overflow: hidden;
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
}

.card5 * {
    transition: 0.3s ease; /* تخلي النص يتغير بأناقة */
}

/* عند المرور بالماوس */
.card5:hover {
    background: var(--colors-primary-500, #5181c2);
    border-color: var(--colors-primary-500, #5181c2);
}

/* تغيير لون كل النصوص والأيقونات */
.card5:hover,
.card5:hover * {
    color: #fff !important;
}
/* انتقال ناعم */
.featured-icon,
.featured-icon * {
    transition: 0.3s ease;
}

/* عند المرور بالموس على الكارت */
.card5:hover .featured-icon {
    background: #ffffff;
    border: 1px solid var(--colors-primary-500, #5181c2);
}

/* تغيير لون الأيقونات داخل featured-icon */
.card5:hover .featured-icon * {
    color: var(--colors-primary-500, #5181c2) !important;
    fill: var(--colors-primary-500, #5181c2) !important;
    stroke: var(--colors-primary-500, #5181c2) !important;
}

.vector7 {
  flex-shrink: 0;
  width: 416px;
  height: 278px;
  position: absolute;
  left: 0px;
  top: -64px;
  overflow: visible;
  aspect-ratio: 416/278;
}
.solar-global-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group7 {
  width: 83.34%;
  height: 83.34%;
  position: absolute;
  right: 8.33%;
  left: 8.33%;
  bottom: 8.33%;
  top: 8.33%;
  overflow: visible;
}
._20303 {
  color: var(--colors-neutral-1000, #333333);
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-1-font-size, 16px);
  line-height: var(--global-tokens-body-b-1-line-height, 24px);
  font-weight: var(--global-tokens-body-b-1-font-weight, 400);
  position: relative;
  align-self: stretch;
}
.card6 {
  background: linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-radius: var(--radius-lg, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--global-spacing-xl, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  height: 214px;
  position: relative;
  overflow: hidden;
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}


.card6 * {
    transition: 0.3s ease; /* تخلي النص يتغير بأناقة */
}

/* عند المرور بالماوس */
.card6:hover {
    background: var(--colors-primary-500, #5181c2);
    border-color: var(--colors-primary-500, #5181c2);
}

/* تغيير لون كل النصوص والأيقونات */
.card6:hover,
.card6:hover * {
    color: #fff !important;
}
/* انتقال ناعم */
.featured-icon,
.featured-icon * {
    transition: 0.3s ease;
}

/* عند المرور بالموس على الكارت */
.card6:hover .featured-icon {
    background: #ffffff;
    border: 1px solid var(--colors-primary-500, #5181c2);
}

/* تغيير لون الأيقونات داخل featured-icon */
.card6:hover .featured-icon * {
    color: var(--colors-primary-500, #5181c2) !important;
    fill: var(--colors-primary-500, #5181c2) !important;
    stroke: var(--colors-primary-500, #5181c2) !important;
}


.vector8 {
  flex-shrink: 0;
  width: 416px;
  height: 278px;
  position: absolute;
  left: 0px;
  top: -64px;
  overflow: visible;
  aspect-ratio: 416/278;
}
.solar-lock-keyhole-minimalistic-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group8 {
  width: 83.33%;
  height: 83.33%;
  position: absolute;
  right: 8.33%;
  left: 8.33%;
  bottom: 8.33%;
  top: 8.33%;
  overflow: visible;
}
.card7 {
  background: linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-radius: var(--radius-lg, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--global-spacing-xl, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  height: 214px;
  position: relative;
  overflow: hidden;
  grid-column: 3 / span 1;
  grid-row: 2 / span 1;
}


.card7 * {
    transition: 0.3s ease; /* تخلي النص يتغير بأناقة */
}

/* عند المرور بالماوس */
.card7:hover {
    background: var(--colors-primary-500, #5181c2);
    border-color: var(--colors-primary-500, #5181c2);
}

/* تغيير لون كل النصوص والأيقونات */
.card7:hover,
.card7:hover * {
    color: #fff !important;
}
/* انتقال ناعم */
.featured-icon,
.featured-icon * {
    transition: 0.3s ease;
}

/* عند المرور بالموس على الكارت */
.card7:hover .featured-icon {
    background: #ffffff;
    border: 1px solid var(--colors-primary-500, #5181c2);
}

/* تغيير لون الأيقونات داخل featured-icon */
.card7:hover .featured-icon * {
    color: var(--colors-primary-500, #5181c2) !important;
    fill: var(--colors-primary-500, #5181c2) !important;
    stroke: var(--colors-primary-500, #5181c2) !important;
}


.vector9 {
  flex-shrink: 0;
  width: 416px;
  height: 278px;
  position: absolute;
  left: 0px;
  top: -64px;
  overflow: visible;
  aspect-ratio: 416/278;
}
.solar-rocket-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  overflow: visible;
  aspect-ratio: 1;
}
.frame-1707480383 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div-7-span {
  color: var(--colors-primary-500, #5181c2);
}
.div-7-span2 {
  color: var(--colors-neutral-1000, #333333);
}
.frame-17074803802 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.group-17074803612 {
  flex-shrink: 0;
  width: 598px;
  height: 399px;
  position: relative;
  overflow: visible;
}
.div11 {
  color: #000000;
  text-align: justified;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-1-font-size, 16px);
  line-height: var(--global-tokens-body-b-1-line-height, 24px);
  font-weight: var(--global-tokens-body-b-1-font-weight, 400);
  position: relative;
  align-self: stretch;
}
.frame-1707480389 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.card8 {
  background: linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-radius: var(--radius-lg, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--global-spacing-xl, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}


.card8 * {
    transition: 0.3s ease; /* تخلي النص يتغير بأناقة */
}

/* عند المرور بالماوس */
.card8:hover {
    background: var(--colors-primary-500, #5181c2);
    border-color: var(--colors-primary-500, #5181c2);
}

/* تغيير لون كل النصوص والأيقونات */
.card8:hover,
.card8:hover * {
    color: #fff !important;
}
/* انتقال ناعم */
.featured-icon,
.featured-icon * {
    transition: 0.3s ease;
}

/* عند المرور بالموس على الكارت */
.card8:hover .featured-icon {
    background: #ffffff;
    border: 1px solid var(--colors-primary-500, #5181c2);
}

/* تغيير لون الأيقونات داخل featured-icon */
.card8:hover .featured-icon * {
    color: var(--colors-primary-500, #5181c2) !important;
    fill: var(--colors-primary-500, #5181c2) !important;
    stroke: var(--colors-primary-500, #5181c2) !important;
}


.vector10 {
  flex-shrink: 0;
  width: 634px;
  height: 423px;
  position: absolute;
  left: 0px;
  top: -130px;
  overflow: visible;
  aspect-ratio: 634/423;
}
.solar-monitor-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group9 {
  width: 83.33%;
  height: 83.33%;
  position: absolute;
  right: 8.33%;
  left: 8.33%;
  bottom: 8.33%;
  top: 8.33%;
  overflow: visible;
}
.vector11 {
  flex-shrink: 0;
  width: 634px;
  height: 423px;
  position: absolute;
  left: 0px;
  top: -130px;
  overflow: visible;
  aspect-ratio: 634/423;
}
.solar-bolt-circle-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group10 {
  width: 83.33%;
  height: 83.33%;
  position: absolute;
  right: 8.33%;
  left: 8.33%;
  bottom: 8.33%;
  top: 8.33%;
  overflow: visible;
}
.line-2 {
  margin-top: -1px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-image: linear-gradient(
    90deg,
    rgba(220, 230, 243, 1) 27.403846383094788%,
    rgba(81, 129, 194, 1) 50.4807710647583%,
    rgba(220, 230, 243, 1) 73.55769276618958%
  );
  border-image-slice: 1;
  align-self: stretch;
  flex-shrink: 0;
  height: 0px;
  position: relative;
}
.vector12 {
  flex-shrink: 0;
  width: 634px;
  height: 423px;
  position: absolute;
  left: 0px;
  top: -129px;
  overflow: visible;
  aspect-ratio: 634/423;
}
.solar-chart-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group11 {
  width: 83.33%;
  height: 83.33%;
  position: absolute;
  right: 8.33%;
  left: 8.33%;
  bottom: 8.33%;
  top: 8.33%;
  overflow: visible;
}
.line-22 {
  margin-top: -1px;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-image: var(
    --linear,
    linear-gradient(
      90deg,
      rgba(220, 230, 243, 1) 27.403846383094788%,
      rgba(81, 129, 194, 1) 50.4807710647583%,
      rgba(220, 230, 243, 1) 73.55769276618958%
    )
  );
  border-image-slice: 1;
  align-self: stretch;
  flex-shrink: 0;
  height: 0px;
  position: relative;
}
.vector13 {
  flex-shrink: 0;
  width: 634px;
  height: 423px;
  position: absolute;
  left: 0px;
  top: -129px;
  overflow: visible;
  aspect-ratio: 634/423;
}
.solar-shield-keyhole-line-duotone {
  width: 24px;
  height: 24px;
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  top: 50%;
  aspect-ratio: 1;
}
.group12 {
  width: 75%;
  height: 83.33%;
  position: absolute;
  right: 12.5%;
  left: 12.5%;
  bottom: 8.33%;
  top: 8.33%;
  overflow: visible;
}
.frame-17074803842 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div-7-span {
  color: var(--colors-primary-500, #5181c2);
}
.div-7-span2 {
  color: var(--colors-neutral-1000, #333333);
}
.frame-1707480396 {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 1280px;
  position: relative;
}
.frame-1707480393 {
  background: var(--colors-primary-alpha-10, rgba(81, 129, 194, 0.1));
  border-radius: var(--radius-4, 16px);
  padding: 24px 12px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.frame-1707480391 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2, 8px);
  align-items: flex-end;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.frame-1707480394 {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.mingcute-linkedin-line {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  position: relative;
  aspect-ratio: 1;
}
.group13 {
  width: 75%;
  height: 86.72%;
  position: absolute;
  right: 12.5%;
  left: 12.5%;
  bottom: 0.78%;
  top: 12.5%;
  overflow: visible;
}
.frame-1707480395 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /*align-items: flex-end;*/
  justify-content: center;
  flex: 1;
  position: relative;
}
.digital-sas {
  color: var(--colors-neutral-1000, #333333);
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  position: relative;
  align-self: stretch;
}
.digital-sas2 {
  color: #000000;
  text-align: left;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-3-font-size, 12px);
  line-height: var(--global-tokens-body-b-3-line-height, 18px);
  font-weight: var(--global-tokens-body-b-3-font-weight, 400);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.digitalsas-logo-1 {
  border-radius: var(--radius-1, 4px);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 1;
}
.digital-sas3 {
  color: #000000;
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-3-font-size, 12px);
  line-height: var(--global-tokens-body-b-3-line-height, 18px);
  font-weight: var(--global-tokens-body-b-3-font-weight, 400);
  position: relative;
  /*width: 284px;*/
  display: flex;
  align-items: center;
  /*justify-content: flex-end;*/
}
._1746886930572-1 {
  border-radius: var(--radius-3, 12px);
  align-self: stretch;
  flex-shrink: 0;
  height: 392px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 1;
}
.frame-17074803952 {
  background: var(--colors-primary-alpha-10, rgba(81, 129, 194, 0.1));
  border-radius: var(--radius-4, 16px);
  padding: 24px 12px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.group14 {
  width: 75%;
  height: 86.72%;
  position: absolute;
  right: 12.5%;
  left: 12.5%;
  bottom: 0.78%;
  top: 12.5%;
  overflow: visible;
}
.frame-17074803942 {
  background: var(--colors-primary-alpha-10, rgba(81, 129, 194, 0.1));
  border-radius: var(--radius-4, 16px);
  padding: 24px 12px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.group15 {
  width: 75%;
  height: 86.72%;
  position: absolute;
  right: 12.5%;
  left: 12.5%;
  bottom: 0.78%;
  top: 12.5%;
  overflow: visible;
}
.digital-sas-24-7 {
  color: #000000;
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-3-font-size, 12px);
  line-height: var(--global-tokens-body-b-3-line-height, 18px);
  font-weight: var(--global-tokens-body-b-3-font-weight, 400);
  position: relative;
  width: 284px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.frame-17074803852 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div-7-span {
  color: var(--colors-primary-500, #5181c2);
}
.div-7-span2 {
  color: var(--colors-neutral-1000, #333333);
}
.frame-1707480374 {
  display: flex;
  flex-direction: row;
  gap: 24px;
  row-gap: 40px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: center;
  flex-shrink: 0;
  width: 1280px;
  position: relative;
  overflow: hidden;
}
.frame-1707480403 {
  background: rgba(224, 224, 224, 0.2);
  border-radius: 16px;
  padding: 16px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 101px;
  position: relative;
}
._02-1 {
  align-self: stretch;
  flex-shrink: 0;
  height: 45px;
  position: relative;
  object-fit: cover;
}
.frame-1707480404 {
  background: rgba(224, 224, 224, 0.2);
  border-radius: 16px;
  padding: 16px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 101px;
  position: relative;
}
.u-0-tyi-2-v-96-tdhayftpoltgscdi-3-s-7-m-9-r-1-1 {
  align-self: stretch;
  flex-shrink: 0;
  height: 49.39px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 138.29/49.39;
}
.frame-1707480401 {
  background: rgba(224, 224, 224, 0.2);
  border-radius: 16px;
  padding: 16px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 101px;
  position: relative;
}
.frame-1707480373 {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.fo-x-6-ijs-g-400-x-400-2 {
  flex: 1;
  height: 26.58px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 86.29/26.58;
}
.fo-x-6-ijs-g-400-x-400-1 {
  flex-shrink: 0;
  width: 52px;
  height: 40px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 52/40;
}
.frame-1707480400 {
  background: rgba(224, 224, 224, 0.2);
  border-radius: 16px;
  padding: 16px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 101px;
  position: relative;
}
.pi-tangent-dark-1 {
  align-self: stretch;
  flex-shrink: 0;
  height: 32.8px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 138.29/32.8;
}
.frame-1707480399 {
  background: rgba(224, 224, 224, 0.2);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 101px;
  position: relative;
}
.desktop-logo-01-1 {
  align-self: stretch;
  flex-shrink: 0;
  height: 62.88px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 138.29/62.88;
}
.frame-1707480398 {
  background: rgba(224, 224, 224, 0.2);
  border-radius: 16px;
  padding: 16px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 101px;
  position: relative;
}
.movenpick-seeklogo-1 {
  align-self: stretch;
  flex-shrink: 0;
  height: 44.04px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 138.29/44.04;
}
.frame-1707480397 {
  background: rgba(224, 224, 224, 0.2);
  border-radius: 16px;
  padding: 16px 12px 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  height: 101px;
  position: relative;
}
._2 {
  align-self: stretch;
  flex-shrink: 0;
  height: 55.5px;
  position: relative;
  object-fit: cover;
  aspect-ratio: 138.29/55.5;
}
.card9 {
  background: linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-radius: var(--radius-lg, 16px);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--global-spacing-xl, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1280px;
  height: 300px;
  position: relative;
  overflow: hidden;
}


.card9 * {
    transition: 0.3s ease; /* تخلي النص يتغير بأناقة */
}

/* عند المرور بالماوس */
.card9:hover {
    background: var(--colors-primary-500, #5181c2);
    border-color: var(--colors-primary-500, #5181c2);
}

/* تغيير لون كل النصوص والأيقونات */
.card9:hover,
.card9:hover * {
    color: #fff !important;
}
/* انتقال ناعم */
.featured-icon,
.featured-icon * {
    transition: 0.3s ease;
}

/* عند المرور بالموس على الكارت */
.card9:hover .featured-icon {
    background: #ffffff;
    border: 1px solid var(--colors-primary-500, #5181c2);
}

/* تغيير لون الأيقونات داخل featured-icon */
.card9:hover .featured-icon * {
    color: var(--colors-primary-500, #5181c2) !important;
    fill: var(--colors-primary-500, #5181c2) !important;
    stroke: var(--colors-primary-500, #5181c2) !important;
}


.vector14 {
  flex-shrink: 0;
  width: 1280px;
  height: 854px;
  position: absolute;
  left: 0px;
  top: -64px;
  overflow: visible;
  aspect-ratio: 1280/854;
}
.content2 {
  display: flex;
  flex-direction: column;
  gap: var(--global-spacing-md, 8px);
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.div12 {
  color: var(--colors-primary-500, #5181c2);
  text-align: center;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-headings-h-6-font-size, 40px);
  line-height: var(--global-tokens-headings-h-6-line-height, 60px);
  font-weight: var(--global-tokens-headings-h-6-font-weight, 700);
  position: relative;
}
.div13 {
  color: var(--colors-neutral-400, #bbbbbb);
  text-align: center;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-1-font-size, 16px);
  line-height: var(--global-tokens-body-b-1-line-height, 24px);
  font-weight: var(--global-tokens-body-b-1-font-weight, 400);
  position: relative;
  width: 546px;
}
.card10 {
  background: linear-gradient(
    178deg, rgb(81 129 194 / 19%), transparent);
  border-style: solid;
  border-color: var(--colors-neutral-200, #e8e8e8);
  border-width: 1px;
  padding: var(--spacing-7, 32px) 80px var(--spacing-7, 32px) 80px;
  display: flex;
  flex-direction: column;
  gap: var(--card-card-lg-gap, 24px);
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  position: absolute;
  left: 50%;
  translate: -50%;
  /*top: 4894px;*/
  overflow: hidden;
}
.vector15 {
  flex-shrink: 0;
  width: 1440px;
  height: 961px;
  position: absolute;
  left: 0px;
  top: -143px;
  overflow: visible;
  aspect-ratio: 1440/961;
}
.nav-links {
  padding: var(--spacing-xl, 16px) 0px 0px 0px;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-3xl, 24px);
  row-gap: 24px;
  align-items: flex-start;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.footer-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4xl, 32px);
  align-items: flex-end;
  justify-content: flex-start;
  flex: 1;
  min-width: 180px;
  position: relative;
}
.social-media {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.group-label {
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-image: linear-gradient(90deg, rgba(220, 230, 243, 1) 27.403846383094788%, rgba(81, 129, 194, 1) 50.4807710647583%, rgba(220, 230, 243, 1) 73.55769276618958%);
  border-image-slice: 1;
  padding: 0px 0px var(--spacing-md, 8px) 0px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.div14 {
  color: var(--colors-primary-500, #5181c2);
  text-align: right;
  font-family:'IBM Plex Sans Arabic', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  position: relative;
}
.social-media2 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-md, 8px);
  row-gap: 8px;
  align-items: flex-start;
  /*justify-content: flex-end;*/
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.button {
  border-radius: var(--radius-radius-sm, 4px);
  border-style: solid;
  border-color: var(--colors-primary-500, #5181c2);
  border-width: 1px;
  padding: var(--global-spacing-none, 0px)
    var(--button-buttons-md-padding, 12px) var(--global-spacing-none, 0px)
    var(--button-buttons-md-padding, 12px);
  display: flex;
  flex-direction: row;
  gap: var(--button-buttons-md-gap, 4px);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /*width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;*/
  min-height: 32px;
  max-height: 32px;
  position: relative;
  overflow: hidden;
}
.leading-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
}
.elements {
  width: 81.25%;
  height: 81.25%;
  position: absolute;
  right: 9.37%;
  left: 9.37%;
  bottom: 9.38%;
  top: 9.38%;
  overflow: visible;
}
.elements2 {
  width: 89.58%;
  height: 89.58%;
  position: absolute;
  right: 5.21%;
  left: 5.21%;
  bottom: 5.21%;
  top: 5.21%;
  overflow: visible;
}
.elements3 {
  width: 85.42%;
  height: 85.42%;
  position: absolute;
  right: 7.29%;
  left: 7.29%;
  bottom: -78.13%;
  top: 92.71%;
  transform: translate(0px, -17.08px);
  overflow: visible;
}
.accessibility-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /*align-items: flex-end;*/
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.elements4 {
  width: 72.92%;
  height: 81.26%;
  position: absolute;
  right: 13.82%;
  left: 13.26%;
  bottom: 9.36%;
  top: 9.37%;
  overflow: visible;
}
.elements5 {
  width: 89.58%;
  height: 89.58%;
  position: absolute;
  right: 5.21%;
  left: 5.21%;
  bottom: 5.21%;
  top: 5.21%;
  overflow: visible;
}
.elements6 {
  width: 89.58%;
  height: 64.58%;
  position: absolute;
  right: 5.21%;
  left: 5.21%;
  bottom: 17.71%;
  top: 17.71%;
  overflow: visible;
}
.footer-group2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 8px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  flex: 1;
  min-width: 180px;
  position: relative;
}
.frame-22 {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-3xl, 24px);
  align-items: flex-start;
  /*justify-content: flex-end;*/
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.link-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 8px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.link4 {
  display: flex;
  flex-direction: row;
  gap: var(--link-link-sm-gap, 4px);
  align-items: center;
  /*justify-content: flex-end;*/
  flex-shrink: 0;
  position: relative;
}
.link-text {
  color: var(--colors-primary-500, #5181c2);
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--global-tokens-body-b-2-font-size, 14px);
  line-height: var(--global-tokens-body-b-2-line-height, 21px);
  font-weight: var(--global-tokens-body-b-2-font-weight, 400);
  position: relative;
}
.legal {
  padding: var(--spacing-xl, 16px) 0px var(--spacing-xl, 16px) 0px;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-3xl, 24px);
  align-items: center;
  /*justify-content: flex-end;*/
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.logos {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xl, 16px);
  align-items: center;
  /*justify-content: flex-end;*/
  flex-shrink: 0;
  position: relative;
}
.frame-143 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 404px;
  position: relative;
}
.layer-mc-02 {
  height: auto;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: visible;
}
.links-legal-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl, 24px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  flex: 1;
  position: relative;
}
.links-legal-info2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 8px);
  /*align-items: flex-end;*/
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.legal-caption {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: flex-start;
  /*justify-content: flex-end;*/
  flex-shrink: 0;
  position: relative;
}
._2025 {
  color: var(--colors-neutral-500, #a4a4a4);
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--text-sm-semibold-font-size, 14px);
  line-height: var(--text-sm-semibold-line-height, 20px);
  font-weight: var(--text-sm-semibold-font-weight, 600);
  position: relative;
}
.extra-link-list {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
  /*justify-content: flex-end;*/
  flex-wrap: wrap;
  align-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.link-text2 {
  color: var(--colors-neutral-500, #a4a4a4);
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-size: var(--text-sm-regular-font-size, 14px);
  line-height: var(--text-sm-regular-line-height, 20px);
  font-weight: var(--text-sm-regular-font-weight, 400);
  position: relative;
}



.benefits-grid-exact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.benefit-item-content {
    text-align: right;
}
/******** Responsive - تصميم متجاوب لجميع الشاشات ********/

/* شاشات كبيرة جداً - Extra Large Screens (1440px+) */
@media (max-width: 1600px) {
    .frame-1707480385 {
        max-width: 1200px;
        padding: 0 40px;
    }
}

/* شاشات كبيرة - Large Screens (1200px - 1440px) */
@media (max-width: 1440px) {
    .frame-1707480386 {
        width: 70%;
    }

    .div3 {
        width: 90%;
        max-width: 879px;
    }

    .frame-1707480385 {
        max-width: 90%;
        padding: 0 30px;
    }
}

/* شاشات متوسطة كبيرة - Large-Medium Screens (1024px - 1199px) */
@media (max-width: 1199px) {
    .div {
        height: auto;
        min-height: 100vh;
    }

    .group-1707480360 {
        height: 700px;
    }

    .image-85 {
        height: 700px;
    }

    .vector {
        height: 700px;
    }

    .hero-section-content {
        top: 200px;
        padding: 0 30px;
    }

    .div2 {
        font-size: 40px;
        line-height: 60px;
    }

    .div3 {
        font-size: 22px;
        width: 95%;
    }

    .frame-1707480386 {
        width: 80%;
        padding: 14px 22px;

    }

    .frame-1707480385 {
        padding: 0 30px;
        gap: 40px;
        top: 40px;
    }

    .frame-1707480381,
    .frame-1707480390,
    .frame-1707480380,
    .frame-1707480384,
    .frame-1707480379 {
        width: 100%;
    }

    .card,
    .card2,
    .card3,
    .card4,
    .card5,
    .card6,
    .card7 {
        width: 100% !important;
    }

    .frame-17074803782 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* شاشات متوسطة - Medium Screens (768px - 1023px) */
@media (max-width: 1023px) {
    .group-1707480360 {
        height: 600px;
    }

    .image-85 {
        height: 600px;
    }

    .vector {
        height: 600px;
    }

    .hero-section-content {
        top: 150px;
    }

    .div2 {
        font-size: 36px;
        line-height: 54px;
    }

    .div3 {
        font-size: 20px;
    }

    .frame-1707480386 {
        width: 90%;
        flex-direction: column;
        gap: 16px;

    }

    .frame-7 {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .frame-9 {
        width: 100%;
        justify-content: center;
    }

    .frame-1 {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* شاشات صغيرة - Small Screens & Tablets (576px - 767px) */
@media (max-width: 767px) {
    .group-1707480360 {
        height: 500px;
    }

    .image-85 {
        height: 500px;
    }

    .vector {
        height: 500px;
        left: -50px;
    }

    .hero-section-content {
        top: 100px;
        padding: 0 20px;
        gap: 16px;
    }

    .div2 {
        font-size: 30px;
        line-height: 45px;
    }

    .div3 {
        font-size: 18px;
        line-height: 27px;
        width: 100%;
    }

    .frame-1707480371 {
        flex-direction: column;
        gap: 16px;
        width: 40%;
    }

    .link, .link2 {
        width: 100%;
        justify-content: center;
        padding: 12px 28px;
    }

    .frame-1707480386 {
        width: 95%;
        padding: 12px 16px;
        top: 16px;
        left: 99%;
    }

    .digitalsas-1-2 {
        width: 85px;
        height: auto;
    }

    .frame-6 {
        padding: 10px 14px;
    }

    .div5 {
        font-size: 14px;
    }

    .frame-62, .frame-4, .frame-3, .frame-2 {
        padding: 10px;
    }

    .frame-1707480385 {
        padding: 0 20px;
        gap: 32px;
        top: 30px;
    }

    .div7 {
        font-size: 22px;
        line-height: 33px;
    }

    .frame-1707480380,
    .frame-17074803802 {
        flex-direction: column;
        gap: 24px;
    }

    .frame-1707480384 {
        width: 100%;
    }

    .group-1707480361 {
        width: 100%;
        height: auto;
    }

    .frame-1707480379 {
        width: 100%;
    }

    .card {
        width: 100%;
    }

    .vector2, .vector3 {
        width: 100%;
        height: auto;
    }

    .frame-17074803782 {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }

    .card2 {
        height: auto;
        min-height: 180px;
    }

    .div8 {
        font-size: 18px;
        line-height: 27px;
    }

    .div9, ._20302 {
        font-size: 15px;
        line-height: 22.5px;
    }

    .frame-22 {
        flex-direction: column;
        gap: 20px;
    }

    .link-list {
        width: 100%;
    }

    .frame-143 {
        width: 100%;
    }
}

/* جوالات - Mobile Screens (480px - 575px) */
@media (max-width: 575px) {
    .group-1707480360 {
        height: 450px;
    }

    .image-85 {
        height: 450px;
    }

    .vector {
        height: 450px;
        left: -40px;
    }

    .hero-section-content {
        top: 80px;
        padding: 0 16px;
        gap: 14px;
    }

    .div2 {
        font-size: 26px;
        line-height: 39px;
    }

    .div3 {
        font-size: 16px;
        line-height: 24px;
    }

    .frame-1707480371 {
        gap: 14px;
    }

    .link, .link2 {
        padding: 11px 26px;
        font-size: 15px;
    }

    .frame-1707480386 {
        width: 96%;
        padding: 11px 14px;
        top: 14px;
        left: 99%;
    }

    .digitalsas-1-2 {
        width: 75px;
    }

    .frame-6 {
        padding: 8px 12px;
    }

    .div5 {
        font-size: 13px;
    }

    .frame-1 {
        gap: 7px;
    }

    .frame-62, .frame-4, .frame-3, .frame-2 {
        padding: 8px;
    }

    .mingcute-earth-2-line {
        width: 22px;
        height: 22px;
    }

    .frame-1707480385 {
        padding: 0 16px;
        gap: 28px;
        top: 25px;
    }

    .div7 {
        font-size: 20px;
        line-height: 30px;
    }

    .div6 {
        font-size: 11px;
    }

    .link3 {
        padding: 7px 26px;
    }

    ._2030 {
        font-size: 15px;
        line-height: 22.5px;
    }

    .card {
        padding: 14px;
        gap: 18px;
    }

    .featured-icon {
        width: 44px;
        height: 44px;
    }

    .solar-chat-dots-line-duotone,
    .solar-eye-line-duotone,
    .solar-users-group-rounded-line-duotone {
        width: 22px;
        height: 22px;
    }

    .div8 {
        font-size: 17px;
        line-height: 25.5px;
    }

    .div9, ._20302 {
        font-size: 14px;
        line-height: 21px;
    }

    .card2 {
        padding: 14px;
        gap: 18px;
        min-height: 170px;
    }
}

/* جوالات صغيرة - Small Mobile (375px - 479px) */
@media (max-width: 479px) {
    .group-1707480360 {
        height: 400px;
    }

    .image-85 {
        height: 400px;
    }

    .vector {
        height: 400px;
        left: -30px;
    }

    .hero-section-content {
        top: 70px;
        padding: 0 14px;
        gap: 12px;
    }

    .div2 {
        font-size: 24px;
        line-height: 36px;
    }

    .div3 {
        font-size: 15px;
        line-height: 22.5px;
    }

    .frame-1707480371 {
        gap: 12px;
    }

    .link, .link2 {
        padding: 10px 24px;
        font-size: 14px;
    }

    .frame-1707480386 {
        width: 98%;
        padding: 10px 12px;
        top: 12px;
        left: 99%;
    }

    .digitalsas-1-2 {
        width: 70px;
    }

    .frame-6 {
        padding: 7px 11px;
    }

    .div5 {
        font-size: 12px;
    }

    .frame-1 {
        gap: 6px;
    }

    .frame-62, .frame-4, .frame-3, .frame-2 {
        padding: 7px;
    }

    .mingcute-earth-2-line {
        width: 20px;
        height: 20px;
    }

    .frame-1707480385 {
        padding: 0 14px;
        gap: 24px;
        top: 22px;
    }

    .div7 {
        font-size: 19px;
        line-height: 28.5px;
    }

    .div6 {
        font-size: 10.5px;
    }

    .link3 {
        padding: 6px 24px;
    }

    ._2030 {
        font-size: 14px;
        line-height: 21px;
    }

    .card {
        padding: 13px;
        gap: 17px;
    }

    .featured-icon {
        width: 42px;
        height: 42px;
    }

    .solar-chat-dots-line-duotone,
    .solar-eye-line-duotone,
    .solar-users-group-rounded-line-duotone {
        width: 21px;
        height: 21px;
    }

    .div8 {
        font-size: 16px;
        line-height: 24px;
    }

    .div9, ._20302 {
        font-size: 13.5px;
        line-height: 20.25px;
    }

    .card2 {
        padding: 13px;
        gap: 17px;
        min-height: 165px;
    }
}

/* جوالات صغيرة جداً - Extra Small Mobile (320px - 374px) */
@media (max-width: 374px) {
    .group-1707480360 {
        height: 360px;
    }

    .image-85 {
        height: 360px;
    }

    .vector {
        height: 360px;
        left: -20px;
    }

    .hero-section-content {
        top: 60px;
        padding: 0 12px;
        gap: 10px;
    }

    .div2 {
        font-size: 22px;
        line-height: 33px;
    }

    .div3 {
        font-size: 14px;
        line-height: 21px;
    }

    .link, .link2 {
        padding: 9px 22px;
        font-size: 13px;
    }

    .frame-1707480386 {
        width: 100%;
        padding: 9px 11px;
        top: 10px;
        left: 99%;
    }

    .digitalsas-1-2 {
        width: 65px;
    }

    .div5 {
        font-size: 11px;
    }

    .frame-1707480385 {
        padding: 0 12px;
        gap: 20px;
        top: 20px;
    }

    .div7 {
        font-size: 18px;
        line-height: 27px;
    }

    .card {
        padding: 12px;
        gap: 16px;
    }

    .featured-icon {
        width: 40px;
        height: 40px;
    }

    .solar-chat-dots-line-duotone,
    .solar-eye-line-duotone,
    .solar-users-group-rounded-line-duotone {
        width: 20px;
        height: 20px;
    }

    .div8 {
        font-size: 15px;
        line-height: 22.5px;
    }

    .div9, ._20302 {
        font-size: 13px;
        line-height: 19.5px;
    }

    .card2 {
        padding: 12px;
        gap: 16px;
        min-height: 160px;
    }
}

/* تحسينات عامة للريسبونسيف */
@media (max-width: 1199px) {
    /* جعل الصور مرنة */
    img {
        max-width: 100%;
        height: auto;
    }

    /* تحسين الأزرار */
    .link, .link2, .link3 {
        white-space: nowrap;
    }
}

/* تحسينات للموبايل */
@media (max-width: 767px) {
    /* منع التمرير الأفقي */
    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* تحسين حجم النصوص */
    body {
        font-size: 14px;
    }

    /* تحسين الكروت */
    .card, .card2, .card3, .card4, .card5, .card6, .card7 {
        border-radius: 12px;
    }
}


/* ====================================
   إصلاحات إضافية للمشاكل المحددة
   ==================================== */

/* إصلاح قسم "نشارككم" - frame-17074803842 */
.frame-17074803842 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    padding: 40px 20px;
}

.frame-1707480396 {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    flex-wrap: wrap;
    position: relative;
}

.frame-17074803942,
.frame-17074803952,
.frame-1707480393 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: calc(33.333% - 16px);
    min-width: 300px;
    position: relative;
}

/* إصلاح الـ Footer - card10 */
.card10 {
    position: relative;
    width: 100%;
    padding: 80px 190px;
    margin-top: 44px;
}

.nav-links {
    display: flex;
    flex-direction: row;
    gap: 40px;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}

.footer-group,
.footer-group2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-width: 200px;
}

/* تعديلات للشاشات الكبيرة */
@media (max-width: 1199px) {
    .frame-17074803942,
    .frame-17074803952,
    .frame-1707480393 {
        width: calc(50% - 12px);
    }

    .frame-1707480389 {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .card8 {
        width: 100% !important;
    }
}

/* تعديلات للشاشات المتوسطة */
@media (max-width: 1023px) {
    .frame-1707480396 {
        flex-direction: column;
        align-items: center;
    }

    .frame-17074803942,
    .frame-17074803952,
    .frame-1707480393 {
        width: 100%;
        max-width: 600px;
    }

    .frame-17074803802 {
        flex-direction: column;
        gap: 30px;
    }

    .frame-1707480389 {
        width: 100%;
    }
}

/* تعديلات للتابلت والشاشات الصغيرة */
@media (max-width: 767px) {
    /* إصلاح الـ Navbar */
    .frame-1707480386 {
        flex-direction: column;
        gap: 12px;
        padding: 10px 14px;
        width: 96%;
        left: 99%;
    }

    .frame-7 {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        align-items: center;
    }

    .frame-1 {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        align-items: center;
    }

    .frame-2, .frame-3, .frame-4, .frame-62 {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .frame-9 {
        flex-direction: row;
        gap: 10px;
        width: 100%;
        justify-content: center;
    }

    .frame-6 {
        /*flex: 1;8
    */
    }

    .digitalsas-1-2 {
        margin-bottom: 8px;
    }

    /* إصلاح قسم "قيمنا" */
    .frame-1707480382 {
        width: 100%;
        padding: 0 16px;
    }

    .frame-17074803782 {
        grid-template-columns: 1fr !important;
        gap: 20px;
        width: 100%;
    }

    .card2, .card3, .card4, .card5, .card6, .card7 {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: 200px;
    }

    /* إصلاح قسم "نشارككم" */
    .frame-17074803842 {
        padding: 30px 16px;
        gap: 20px;
    }

    .frame-1707480396 {
        gap: 20px;
        padding: 0;
    }

    .frame-17074803942,
    .frame-17074803952,
    .frame-1707480393 {
        width: 100%;
        min-width: auto;
        max-width: 100%;
    }

    .frame-1707480391 {
        padding: 16px;
    }

    .frame-1707480394 {
        flex-direction: row;
        gap: 10px;
        align-items: center;
    }

    .digitalsas-logo-1 {
        width: 50px;
        height: 50px;
    }

    .digital-sas,
    .digital-sas2,
    .digital-sas3 {
        font-size: 14px;
        line-height: 21px;
    }

    ._1746886930572-1 {
        width: 100%;
        height: auto;
    }

    /* إصلاح الـ Footer */
    .card10 {
        padding: 30px 16px;
        margin-top: 40px;
    }

    .nav-links {
        flex-direction: column;
        gap: 24px;
    }

    .footer-group,
    .footer-group2 {
        width: 100%;
        min-width: auto;
    }

    .frame-22 {
        flex-direction: column;
        gap: 16px;
    }

    .link-list {
        width: 100%;
        align-items: flex-start;
    }

    .link4 {
        width: 100%;
    }

    .legal {
        flex-direction: column-reverse;
        gap: 20px;
        align-items: center;
        text-align: center;
    }

    .logos {
        justify-content: center;
    }

    .frame-143 {
        width: 100%;
        align-items: center;
    }

    .links-legal-info {
        width: 100%;
        align-items: center;
    }

    .links-legal-info2 {
        align-items: center;
        text-align: center;
    }

    .legal-caption {
        justify-content: center;
    }

    ._2025 {
        text-align: center;
        font-size: 13px;
    }

    .extra-link-list {
        justify-content: center;
    }

    .link-text2 {
        font-size: 12px;
        text-align: center;
    }

    .social-media,
    .accessibility-tools {
        width: 100%;
    }

    .social-media2 {
        justify-content: center;
        gap: 12px;
    }

    .group-label {
        text-align: center;
    }

    .div14 {
        text-align: center;
    }
}

/* تعديلات للجوالات */
@media (max-width: 575px) {
    /* تحسين الـ Navbar للجوالات */
    .frame-1707480386 {
        width: 98%;
        padding: 8px 12px;
        gap: 10px;
        left: 99%;
    }

    .frame-1, .frame-9 {
        gap: 6px;
    }

    .frame-2, .frame-3, .frame-4, .frame-62 {
        padding: 8px;
    }

    .div5 {
        font-size: 13px;
    }

    /* تحسين قسم "قيمنا" */
    .frame-1707480382 {
        padding: 0 14px;
    }

    .frame-17074803782 {
        gap: 16px;
    }

    .card2, .card3, .card4, .card5, .card6, .card7 {
        padding: 14px;
        gap: 14px;
        min-height: 180px;
    }

    /* تحسين قسم "نشارككم" */
    .frame-17074803842 {
        padding: 24px 14px;
    }

    .frame-1707480396 {
        gap: 16px;
    }

    .frame-1707480391 {
        padding: 14px;
    }

    .digitalsas-logo-1 {
        width: 45px;
        height: 45px;
    }

    .digital-sas {
        font-size: 13px;
    }

    .digital-sas2 {
        font-size: 12px;
    }

    .digital-sas3 {
        font-size: 13px;
        line-height: 19.5px;
    }

    /* تحسين الـ Footer */
    .card10 {
        padding: 24px 14px;
        margin-top: 30px;
    }

    .nav-links {
        gap: 20px;
    }

    .legal {
        gap: 16px;
        padding: 12px 0;
    }

    ._2025 {
        font-size: 12px;
        line-height: 18px;
    }

    .link-text2 {
        font-size: 11px;
    }

    .link-text {
        font-size: 13px;
    }

    .div14 {
        font-size: 14px;
    }
}

/* تعديلات للجوالات الصغيرة */
@media (max-width: 479px) {
    /* Navbar للجوالات الصغيرة */
    .frame-1707480386 {
        width: 100%;
        padding: 8px 10px;
        left: 99%;
    }

    .digitalsas-1-2 {
        width: 70px;
    }

    .div5 {
        font-size: 12px;
    }

    /* قسم "قيمنا" للجوالات الصغيرة */
    .frame-1707480382 {
        padding: 0 12px;
    }

    .card2, .card3, .card4, .card5, .card6, .card7 {
        padding: 12px;
        gap: 12px;
        min-height: 170px;
    }

    .div10, ._20303 {
        font-size: 13px;
        line-height: 19.5px;
    }

    /* قسم "نشارككم" للجوالات الصغيرة */
    .frame-17074803842 {
        padding: 20px 12px;
    }

    .frame-1707480391 {
        padding: 12px;
    }

    .digitalsas-logo-1 {
        width: 40px;
        height: 40px;
    }

    .digital-sas {
        font-size: 12px;
    }

    .digital-sas2 {
        font-size: 11px;
    }

    .digital-sas3 {
        font-size: 12px;
        line-height: 18px;
    }

    /* Footer للجوالات الصغيرة */
    .card10 {
        padding: 20px 12px;
    }

    ._2025 {
        font-size: 11px;
        line-height: 16.5px;
    }

    .link-text2 {
        font-size: 10px;
    }

    .link-text {
        font-size: 12px;
    }

    .div14 {
        font-size: 13px;
    }
}

/* تعديلات للجوالات الصغيرة جداً */
@media (max-width: 374px) {
    .frame-1707480386 {
        padding: 7px 9px;
        left: 99%;
    }

    .digitalsas-1-2 {
        width: 65px;
    }

    .div5 {
        font-size: 11px;
    }

    .card2, .card3, .card4, .card5, .card6, .card7 {
        padding: 11px;
        min-height: 165px;
    }

    .frame-17074803842 {
        padding: 18px 10px;
    }

    .card10 {
        padding: 18px 10px;
    }
}

/* تحسينات عامة إضافية */
@media (max-width: 1023px) {
    /* منع تداخل الأقسام */
    .frame-1707480385 > * {
        margin-bottom: 20px;
    }

    .frame-17074803842 {
        clear: both;
        margin-top: 40px;
    }

    .card10 {
        clear: both;
        margin-top: 50px;
    }
}

@media (max-width: 767px) {
    /* ضمان عدم تداخل Footer مع المحتوى */
    .frame-17074803842 {
        margin-bottom: 40px;
    }

    .card10 {
        margin-top: 60px;
        position: relative;
        z-index: 1;
    }

    /* تحسين المسافات بين الأقسام */
    .frame-1707480382,
    .frame-1707480383,
    .frame-17074803842 {
        padding-bottom: 30px;
    }
}

/* ====================================
   تعديلات خاصة: قسم قيمنا + Navbar للجوال
   ==================================== */

/* جعل قسم "قيمنا" مثل قسم "حلولنا" على الجوال */
@media (max-width: 1023px) {
    /* تحويل قسم قيمنا إلى تخطيط عمودي مع نص جانبي */
    .frame-1707480382 {
        width: 100%;
        padding: 40px 20px;
    }


    .frame-17074803782 {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
    }

    /* جعل كل card تأخذ العرض الكامل */
    .card2, .card3, .card4, .card5, .card6, .card7 {
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: auto;
        grid-column: unset !important;
        grid-row: unset !important;
    }
}

@media (max-width: 767px) {
    /* تحسين قسم قيمنا للجوال */
    .frame-1707480382 {
        padding: 8px 0px;
    }

    .frame-17074803782 {
        gap: 16px;
    }

    .benefits-grid-exact {
        display: contents;
    }

    .card2, .card3, .card4, .card5, .card6, .card7 {
        padding: 16px;
        gap: 16px;
    }

    .div10, ._20303 {
        font-size: 14px;
        line-height: 21px;
    }
}

/* ====================================
   Navbar للجوال - نسخة منفصلة تماماً
   ==================================== */

/* إخفاء Navbar الأصلي على الجوال وإظهار نسخة جديدة */
@media (max-width: 1023px) {
    /* تعديل Navbar للجوال */
    .frame-1707480386 {
        display: flex !important;
        flex-direction: column;
        background: rgb(82 107 187 / 17%);
        border-radius: 16px;
        border: 1px solid rgb(51 50 27 / 87%);
        padding: 12px 16px;
        width: 95%;
        position: fixed;
        left: 97%;
        transform: translateX(-50%);
        top: 12px;
        z-index: 1000;
        gap: 12px;
    }

    /* الصف الأول: اللوجو + الأزرار */
    .frame-7 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 12px;
    }

    /* اللوجو */
    .digitalsas-1-2 {
        width: 80px;
        height: auto;
        order: 1;
    }

    /* القائمة المخفية */
    .frame-1 {
        display: none;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        order: 3;
    }

    /* عناصر القائمة */
    .frame-2, .frame-3, .frame-4, .frame-62 {
        width: 100%;
        padding: 10px;
        text-align: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
    }

    /* الأزرار على اليمين */
    .frame-9 {
        display: flex;
        flex-direction: row;
        gap: 8px;
        order: 2;
        justify-content: flex-end;
        flex-shrink: inherit;
    }

    .frame-6 {
        padding: 8px 16px;
        white-space: nowrap;
    }

    .frame-8 {
        gap: 4px;
    }

    .mingcute-earth-2-line {
        width: 20px;
        height: 20px;
    }

    .div5 {
        font-size: 13px;
    }
}

/* Navbar للجوالات الصغيرة */
@media (max-width: 767px) {
    .frame-1707480386 {
        width: 96%;
        padding: 10px 14px;
        top: 10px;
        left: 99%;
    }
    .benefits-grid-exact {
        display: contents;
    }
    .digitalsas-1-2 {
        width: 75px;
    }

    .frame-6 {
        padding: 7px 14px;
        font-size: 12px;
    }

    .div5 {
        font-size: 12px;
    }

    .frame-2, .frame-3, .frame-4, .frame-62 {
        padding: 9px;
    }
}

@media (max-width: 575px) {
    .frame-1707480386 {
        width: 98%;
        padding: 9px 12px;
        left: 99%;
    }
    .benefits-grid-exact {
        display: contents;
    }
    .digitalsas-1-2 {
        width: 70px;
    }

    .frame-6 {
        padding: 6px 12px;
        font-size: 11px;
    }

    .frame-8 .div5 {
        font-size: 11px;
    }

    .mingcute-earth-2-line {
        width: 18px;
        height: 18px;
    }
}

/* تحسينات إضافية */
@media (max-width: 1023px) {
    /* إضافة مسافة للمحتوى تحت الـ navbar الثابت */
    .hero-section-content {
        margin-top: 80px;
    }

    /* تحسين الروابط */
    .frame-2 a, .frame-3 a, .frame-4 a, .frame-62 a {
        display: block;
        width: 100%;
        color: #ffffff;
    }
}

@media (max-width: 767px) {
    .hero-section-content {
        margin-top: 70px;
    }
}

@media (max-width: 575px) {
    .hero-section-content {
        margin-top: 20px;
    }
}

/* تأكد من أن الكروت في قسم قيمنا تظهر بشكل صحيح */
@media (max-width: 1023px) {
    .card2, .card3, .card4, .card5, .card6, .card7 {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        max-width: 100%;
        height: auto !important;
        min-height: 180px;
        padding: 16px;
        gap: 16px;
        background: linear-gradient(178deg, rgb(81 129 194 / 19%), transparent);
        border-radius: 16px;
        border: 1px solid #e8e8e8;
        position: relative;
        overflow: hidden;
    }

    .card2 .content,
    .card3 .content,
    .card4 .content,
    .card5 .content,
    .card6 .content,
    .card7 .content {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 767px) {
    .card2, .card3, .card4, .card5, .card6, .card7 {
        min-height: 160px;
        padding: 14px;
    }
}

@media (max-width: 575px) {
    .card2, .card3, .card4, .card5, .card6, .card7 {
        min-height: 150px;
        padding: 13px;
    }
}

.section-title-left {
    font-size: 2rem;
    font-weight: 700;
    text-align: right;
}

/* Navbar for Mobile - Mobile Navigation */
@media (max-width: 1023px) {
    /* Hide the menu by default on mobile */
    .frame-1707480386 .frame-1 {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 8px;
        order: 3; /* To appear below the logo and buttons */
        margin-top: 12px; /* Spacing from the top row */
        background-color: rgba(255, 255, 255, 0.05); /* Slight background for the menu area */
        padding: 10px;
        border-radius: 12px;
    }

    /* Show the menu when the 'menu-open' class is added */
    .frame-1707480386.menu-open .frame-1 {
        display: flex;
    }

    /* Add a menu icon (Hamburger) */
    .menu-toggle {
        display: flex; /* Show the hamburger icon */
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
        cursor: pointer;
        order: 2; /* Position between logo and buttons */
    }

    .menu-toggle .bar {
        width: 100%;
        height: 3px;
        background-color: #ffffff; /* White color for the bars */
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    /* Animation for the hamburger icon when the menu is open */
    .frame-1707480386.menu-open .menu-toggle .bar:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .frame-1707480386.menu-open .menu-toggle .bar:nth-child(2) {
        opacity: 0;
    }
    .frame-1707480386.menu-open .menu-toggle .bar:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }
}

@media (min-width: 1024px) {
    .menu-toggle {
        display: none; /* Hide hamburger icon on desktop */
    }

}