.about-us {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.about-us .div {
  background-color: #ffffff;
  width: 100% ;
}

.about-us .footer {
  display: flex;
  width: 100% !important;
  gap: 10px;
  background-color: var(--blue-500);
  margin: 0 !important;
  padding: 0 !important;
}

.about-us .frame {
  display: flex;
  flex-direction: column;
  height: 245px;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.about-us .frame-2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-us .frame-3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.about-us .frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}


.about-us .text-wrapper {
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: #ffffff;
  font-size: var(--body-bold-font-size);
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}


.about-us .text-wrapper-2 {
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.about-us .mail {
  width: 14px;
  height: 10px;
}

.about-us .overlap-group-wrapper {
  width: 13px;
  height: 9px;
  top: 1px;
  left: 1px;
}

.about-us .overlap-group {
  position: relative;
  width: 14px;
  height: 10px;
  background-image: url(https://c.animaapp.com/1lwzhgBv/img/vector.svg);
  background-size: 100% 100%;
}

.about-us .vector {
  position: absolute;
  width: 14px;
  height: 5px;
  top: 1px;
  left: 0;
}

.about-us .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.about-us .vector-wrapper {
  position: relative;
  width: 16px;
  height: 16px;
}

.about-us .img {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
}

.about-us .vector-2 {
  position: absolute;
  width: 11px;
  height: 13px;
  top: 1px;
  left: 3px;
}

.about-us .frame-7 {
  display: flex;
  flex-direction: column;
  width: 89px;
  align-items: flex-end;
  gap: 16px;
  position: relative;
}

.about-us .div-wrapper {
  height: 19px;
}

.about-us .text-wrapper-4 {
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.about-us .text-wrapper-5 {
  align-self: stretch;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.about-us .text-wrapper-6 {
  width: 119px;
  margin-left: -30.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.about-us .frame-8 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.about-us .logo {
  height: 87px;
  background-image: url(https://c.animaapp.com/1lwzhgBv/img/------@2x.png);
  background-size: 100% 100%;
}

.about-us .p {
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}


.about-us .frame-10 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.about-us .line {
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-top: -0.50px;
}

.about-us .text-wrapper-7 {
  align-self: stretch;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--white);
  font-size: var(--body-font-size);
  text-align: center;
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.about-us .overlap {
  width: 100%;
  height: 872px;
  top: 0;
  left: 0;
}

.about-us .overlap-2 {
  width: 100%;
  height: 834px;
  top: 0;
  left: 0;
}

.about-us .group-2 {
  width: 100%;
  height: 724px;
  top: 0;
  left: 0;
  box-shadow: 0px 4px 4px #00000040;
  background-image: url(https://c.animaapp.com/1lwzhgBv/img/475662958-18492881281031837-8072314904864626091-n-2.png);
  background-size: 100% 100%;
}

.about-us .element {
  width: 282px;
  height: 282px;
  top: 552px;
  left: 91px;
  object-fit: cover;
}

.about-us .bg {
  height: 138px;
  background-color: #0000000f;
  border-radius: 27px;
  border: 1px solid;
  border-color: #ffffff4a;
  backdrop-filter: blur(6.6px) brightness(100%);
  -webkit-backdrop-filter: blur(6.6px) brightness(100%);
}

.about-us .text-wrapper-8 {
  height: 138px;
  font-family: "Cairo", Helvetica;
  font-weight: 500;
  color: var(--neutral-0);
  font-size: 31px;
  line-height: 40.9px;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .overlap-wrapper {
  height: 83px;
}

.about-us .overlap-3 {
  height: 83px;
  border-radius: 29px;
}

.about-us .group-3 {
  height: 83px;
  background-color: #ffffff0f;
  border-radius: 29px;
  border: 1px solid;
  border-color: #ffffff4a;
  backdrop-filter: blur(6.6px) brightness(100%);
  -webkit-backdrop-filter: blur(6.6px) brightness(100%);
}

.about-us .logo-2 {
  height: 48px;
  background-image: url(https://c.animaapp.com/1lwzhgBv/img/-------5@2x.png);
  background-size: 100% 100%;
}

.about-us .group-4 {
  height: 32px;
}

.about-us .frame-11 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.about-us .text-wrapper-9 {
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-bold-font-family);
  font-weight: var(--details-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-bold-font-size);
  text-align: left;
  line-height: var(--details-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--details-bold-letter-spacing);
  direction: rtl;
  font-style: var(--details-bold-font-style);
}

.about-us .overlap-group-2 {
  height: 22px;
}

.about-us .vector-3 {
  width: 9px;
  height: 7px;
}

.about-us .text-wrapper-10 {
  width: 39px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-0);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
}

.about-us .navbar {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.about-us .text-wrapper-11 {
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-0);
  font-size: var(--body-font-size);
  text-align: left;
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  white-space: nowrap;
  direction: rtl;
  font-style: var(--body-font-style);
}

.about-us .text-wrapper-12 {
  width: fit-content;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: var(--blue-100);
  font-size: var(--body-bold-font-size);
  text-align: left;
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  white-space: nowrap;
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.about-us .text-wrapper-13 {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-500);
  font-size: 48px;
  line-height: 57.6px;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .group-wrapper {
  flex-direction: column;
  align-items: center;
  gap: 19px;
}

.about-us .group-5 {
  height: 37px;
}

.about-us .text-wrapper-14 {
  font-family: var(--header-bold-font-family);
  font-weight: var(--header-bold-font-weight);
  color: var(--blue-500);
  font-size: var(--header-bold-font-size);
  text-align: center;
  line-height: var(--header-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--header-bold-letter-spacing);
  direction: rtl;
  font-style: var(--header-bold-font-style);
}

.about-us .overlap-4 {
  width: 100%;
  height: 515px;
}

.about-us .frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 515px;
  align-items: center;
  gap: 29px;
  padding: 69px 32px 24px;
  background-color: #f3f3f3;
}

.about-us .frame-12 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}

.about-us .group-6 {
  height: 50px;
}

.about-us .group-7 {
  height: 50px;
}

.about-us .text-wrapper-15 {
  top: 0;
  left: 0;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-500);
  font-size: 37px;
  text-align: center;
  line-height: 50.0px;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .text-wrapper-16 {
  width: fit-content;
  font-family: "DIN Next LT Arabic-Regular", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 30px;
  text-align: center;
  line-height: 40.5px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .frame-13 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 46px;
  overflow: hidden;
  overflow-x: scroll;
}

.about-us .frame-13::-webkit-scrollbar {
  width: 0;
  display: none;
}

.about-us .element-2 {
  height: 195px;
  object-fit: cover;
}

.about-us .overlap-5 {
  height: 699px;
  background-image: url(https://c.animaapp.com/1lwzhgBv/img/aerial-view-container-cargo-ship-sea--2-.png);
  background-size: 100% 100%;
}



.about-us .overlap-8 {
  height: 154px;
}

.about-us .text-wrapper-17 {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--neutral-0);
  font-size: 45px;
  text-align: center;
  line-height: 54.0px;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .text-wrapper-18 {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-100);
  font-size: 45px;
  text-align: center;
  line-height: 54.0px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .frame-14 {
  display: flex;
  height: 39px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  background-color: #ed2126;
  border-radius: 100px;
}

.about-us .text-wrapper-19 {
  width: fit-content;
  margin-top: -6.50px;
  margin-bottom: -4.50px;
  font-family: "Cairo", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  text-align: left;
  line-height: normal;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .arrow {
  width: 24px;
  height: 24px;
  margin-top: -2.50px;
  margin-bottom: -2.50px;
}

.about-us .overlap-9 {
  height: 124px;
  top: 0;
  left: 0;
}

.about-us .text-wrapper-20 {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--neutral-0);
  font-size: 96px;
  text-align: right;
  letter-spacing: 0;
  line-height: 115.2px;
  white-space: nowrap;
}

.about-us .text-wrapper-21 {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--neutral-0);
  font-size: 24px;
  line-height: 28.8px;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .frame-15 {
  display: flex;
  height: 39px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px;
  background-color: #0056a0;
  border-radius: 100px;
}

.about-us .text-wrapper-22 {
  width: fit-content;
  margin-top: -4.50px;
  margin-bottom: -2.50px;
  font-family: "Cairo", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 14px;
  text-align: left;
  line-height: normal;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .div-2 {
  font-family: "Cairo", Helvetica;
  font-weight: 400;
  color: var(--neutral-0);
  font-size: 45px;
  text-align: center;
  line-height: 54.0px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .span {
  font-weight: 900;
}

.about-us .text-wrapper-23 {
  font-weight: 700;
}

.about-us .text-wrapper-24 {
  font-family: "Cairo", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 45px;
  letter-spacing: 0;
  line-height: 54.0px;
}

.about-us .overlap-10 {
  height: 200px;
}

.about-us .bg-2 {
  height: 154px;
  background-color: #ffffff0f;
  border-radius: 29px;
  border: 1px solid;
  border-color: #ffffff4a;
  backdrop-filter: blur(6.6px) brightness(100%);
  -webkit-backdrop-filter: blur(6.6px) brightness(100%);
}

.about-us .text-wrapper-25 {
  font-family: "Cairo", Helvetica;
  font-weight: 500;
  color: var(--neutral-0);
  font-size: 24px;
  text-align: justify;
  line-height: 35.8px;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .layer {
  height: 43px;
  background-image: url(https://c.animaapp.com/1lwzhgBv/img/layer-1@2x.png);
  background-size: 100% 100%;
}

.about-us .rectangle {
  height: 534px;
}

.about-us .EFB-wrapper {
  height: 443px;
  background-color: #0056a0;
  border-radius: 20px;
}

.about-us .EFB {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-100);
  font-size: 40px;
  letter-spacing: 0;
  line-height: 63.2px;
  direction: rtl;
}

.about-us .rectangle-2 {
  height: 321px;
  object-fit: cover;
}

.about-us .overlap-11 {
  height: 368px;
}

.about-us .rectangle-3 {
  height: 352px;
  background-color: #51c4f1;
  border-radius: 20px;
}

.about-us .text-wrapper-26 {
  top: 66px;
  left: 9px;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-100);
  font-size: 40px;
  line-height: 63.2px;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .rectangle-4 {
  height: 443px;
}

.about-us .ISO-wrapper {
  height: 565px;
  background-color: #0056a0;
  border-radius: 20px;
}

.about-us .ISO {
  font-weight: 700;
  color: var(--blue-100);
  font-size: 40px;
  line-height: 63.2px;
  font-family: "Cairo", Helvetica;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .text-wrapper-27 {
  font-family: var(--header-bold-font-family);
  font-weight: var(--header-bold-font-weight);
  color: var(--blue-500);
  font-size: var(--header-bold-font-size);
  text-align: center;
  line-height: var(--header-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--header-bold-letter-spacing);
  direction: rtl;
  font-style: var(--header-bold-font-style);
}

.about-us .element-3 {
  font-weight: 400;
  color: var(--neutral-500);
  font-size: 20px;
  line-height: 35px;
  font-family: "Cairo", Helvetica;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .element-4 {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--heavenly-500);
  font-size: 25px;
  line-height: 30.0px;
  letter-spacing: 0;
  direction: rtl;
}

.about-us .text-wrapper-28 {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: #32b1e6;
  font-size: 25px;
  letter-spacing: 0;
  line-height: 30.0px;
}

.about-us .text-wrapper-29 {
  font-size: 40px;
  line-height: 48.0px;
}

.about-us .overlap-12 {
  height: 777px;
}

.about-us .vector-4 {
  width: 3px;
  height: 10px;
}

.about-us .vector-5 {
  width: 3px;
  height: 7px;
}

.about-us .vector-6 {
  width: 4px;
  height: 6px;
}

.about-us .vector-7 {
  width: 4px;
  height: 9px;
}

.about-us .vector-8 {
  width: 5px;
  height: 5px;
}

.about-us .vector-9 {
  width: 4px;
  height: 5px;
}

.about-us .vector-10 {
  width: 5px;
  height: 5px;
}

.about-us .layer-2 {
  height: 777px;
}

.about-us .text-wrapper-30 {
  font-family: var(--header-bold-font-family);
  font-weight: var(--header-bold-font-weight);
  color: var(--blue-500);
  font-size: var(--header-bold-font-size);
  text-align: center;
  line-height: var(--header-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--header-bold-letter-spacing);
  direction: rtl;
  font-style: var(--header-bold-font-style);
}

.about-us .element-5 {
  height: 342px;
  object-fit: cover;
}

.about-us .element-6 {
  height: 360px;
}

.about-us .element-7 {
  height: 342px;
  object-fit: cover;
}

.about-us .element-8 {
  height: 342px;
  object-fit: cover;
}

.about-us .element-9 {
  height: 65px;
}

.about-us .bpykpatms {
  width: 69px;
  height: 69px;
  object-fit: cover;
}

.about-us .element-10 {
  width: 103px;
  height: 75px;
}

.about-us .layer-3 {
  width: 63px;
  height: 62px;
  background-image: url(https://c.animaapp.com/1lwzhgBv/img/rectangle@2x.png);
  background-size: 100% 100%;
}
.about-us .frame-16 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.about-us .frame-17 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.about-us .text-wrapper-11 {
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-0);
  font-size: var(--body-font-size);
  white-space: nowrap;
}

.about-us .arrow {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}
.about-us .vector-4 {
  width: 9px;
  height: 5px;
  transform: rotate(90deg);
}

@media (max-width: 1025px) {
.about-us .overlap-wrapper {
left: 750px !important;
}}
:root {
  --blue-100: rgba(255, 255, 255, 1);
  --blue-200: rgba(205, 206, 229, 1);
  --blue-300: rgba(114, 134, 188, 1);
  --blue-400: rgba(73, 108, 173, 1);
  --blue-500: #0056a0;
  --red-400: rgba(241, 92, 66, 1);
  --red-500: rgba(237, 33, 38, 1);
  --heavenly-500: rgba(50, 177, 230, 1);
  --green-300: rgba(119, 192, 67, 1);
  --neutral-0: rgba(255, 255, 255, 1);
  --neutral-100: rgba(247, 247, 247, 1);
  --neutral-200: rgba(209, 211, 213, 1);
  --neutral-300: rgba(153, 158, 161, 1);
  --neutral-400: rgba(117, 117, 117, 1);
  --neutral-500: rgba(75, 75, 75, 1);
  --neutral-900: rgba(27, 27, 27, 1);
  --white: rgba(255, 255, 255, 1);
  --header-font-family: "Cairo", Helvetica;
  --header-font-weight: 400;
  --header-font-size: 31px;
  --header-letter-spacing: 0px;
  --header-line-height: 120.00000476837158%;
  --header-font-style: normal;
  --header-bold-font-family: "Cairo", Helvetica;
  --header-bold-font-weight: 700;
  --header-bold-font-size: 31px;
  --header-bold-letter-spacing: 0px;
  --header-bold-line-height: 120.00000476837158%;
  --header-bold-font-style: normal;
  --title-font-family: "Cairo", Helvetica;
  --title-font-weight: 400;
  --title-font-size: 25px;
  --title-letter-spacing: 0px;
  --title-line-height: 120.00000476837158%;
  --title-font-style: normal;
  --titlebold-font-family: "Cairo", Helvetica;
  --titlebold-font-weight: 700;
  --titlebold-font-size: 25px;
  --titlebold-letter-spacing: 0px;
  --titlebold-line-height: 120.00000476837158%;
  --titlebold-font-style: normal;
  --sub-title-font-family: "Cairo", Helvetica;
  --sub-title-font-weight: 400;
  --sub-title-font-size: 20px;
  --sub-title-letter-spacing: 0px;
  --sub-title-line-height: 120.00000476837158%;
  --sub-title-font-style: normal;
  --sub-bold-font-family: "Cairo", Helvetica;
  --sub-bold-font-weight: 700;
  --sub-bold-font-size: 20px;
  --sub-bold-letter-spacing: 0px;
  --sub-bold-line-height: 120.00000476837158%;
  --sub-bold-font-style: normal;
  --body-font-family: "Cairo", Helvetica;
  --body-font-weight: 400;
  --body-font-size: 18px;
  --body-letter-spacing: 0px;
  --body-line-height: 120.00000476837158%;
  --body-font-style: normal;
  --body-bold-font-family: "Cairo", Helvetica;
  --body-bold-font-weight: 700;
  --body-bold-font-size: 16px;
  --body-bold-letter-spacing: 0px;
  --body-bold-line-height: 120.00000476837158%;
  --body-bold-font-style: normal;
  --details-font-family: "Cairo", Helvetica;
  --details-font-weight: 400;
  --details-font-size: 13px;
  --details-letter-spacing: 0px;
  --details-line-height: 120.00000476837158%;
  --details-font-style: normal;
  --details-bold-font-family: "Cairo", Helvetica;
  --details-bold-font-weight: 700;
  --details-bold-font-size: 13px;
  --details-bold-letter-spacing: 0px;
  --details-bold-line-height: 120.00000476837158%;
  --details-bold-font-style: normal;
  --caption-font-family: "Cairo", Helvetica;
  --caption-font-weight: 400;
  --caption-font-size: 10px;
  --caption-letter-spacing: 0px;
  --caption-line-height: 120.00000476837158%;
  --caption-font-style: normal;
  --caption-bold-font-family: "Cairo", Helvetica;
  --caption-bold-font-weight: 700;
  --caption-bold-font-size: 10px;
  --caption-bold-letter-spacing: 0px;
  --caption-bold-line-height: 120.00000476837158%;
  --caption-bold-font-style: normal;
  --drop-shadow: 0px 5px 10px 0px rgba(36, 36, 36, 0.2);
}
.contact-us {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.contact-us .div {
  background-color: #ffffff;
  width: 100%;
  height: 1384px;
  position: relative;
}

.contact-us .footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  gap: 10px;
  padding: 40px 97px;
  position: absolute;
  top: 1057px;
  left: 0;
  background-color: var(--blue-500);
}

.contact-us .frame {
  display: flex;
  flex-direction: column;
  height: 245px;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.contact-us .frame-2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.contact-us .frame-3 {
  display: flex;
  width: 652px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.contact-us .frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.contact-us .group {
  position: relative;
  width: 269px;
  height: 19px;
  margin-right: -2.00px;
}

.contact-us .text-wrapper {
  position: absolute;
  width: 267px;
  top: 0;
  left: 0;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: #ffffff;
  font-size: var(--body-bold-font-size);
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.contact-us .frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.contact-us .frame-6 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.contact-us .text-wrapper-2 {
  position: relative;
  width: 135px;
  height: 18px;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.contact-us .mail {
  position: relative;
  width: 14px;
  height: 10px;
}

.contact-us .overlap-group-wrapper {
  position: relative;
  width: 13px;
  height: 9px;
  top: 1px;
  left: 1px;
}

.contact-us .overlap-group {
  position: relative;
  width: 14px;
  height: 10px;
  background-image: url(https://c.animaapp.com/Ey7bjgxp/img/vector.svg);
  background-size: 100% 100%;
}

.contact-us .vector {
  position: absolute;
  width: 14px;
  height: 5px;
  top: 1px;
  left: 0;
}

.contact-us .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.contact-us .vector-wrapper {
  position: relative;
  width: 16px;
  height: 16px;
}

.contact-us .img {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
}

.contact-us .vector-2 {
  position: absolute;
  width: 11px;
  height: 13px;
  top: 1px;
  left: 3px;
}

.contact-us .frame-7 {
  display: flex;
  flex-direction: column;
  width: 89px;
  align-items: flex-end;
  gap: 16px;
  position: relative;
}

.contact-us .div-wrapper {
  position: relative;
  width: 269px;
  height: 19px;
  margin-left: -178.00px;
  margin-right: -2.00px;
}

.contact-us .text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.contact-us .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.contact-us .text-wrapper-6 {
  position: relative;
  width: 119px;
  margin-left: -30.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.contact-us .frame-8 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.contact-us .logo {
  position: relative;
  width: 454px;
  height: 87px;
  background-image: url(https://c.animaapp.com/Ey7bjgxp/img/------@2x.png);
  background-size: 100% 100%;
}

.contact-us .p {
  position: relative;
  width: 341px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.contact-us .frame-9 {
  position: relative;
  width: 319px;
  flex: 0 0 auto;
}

.contact-us .frame-10 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.contact-us .line {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-top: -0.50px;
}

.contact-us .text-wrapper-7 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--white);
  font-size: var(--body-font-size);
  text-align: center;
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .frame-11 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 116px;
  left: 1217px;
}

.contact-us .frame-12 {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  position: relative;
  flex: 0 0 auto;
}

.contact-us .text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--neutral-300);
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.contact-us .frame-13 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.contact-us .vector-3 {
  position: absolute;
  width: 5px;
  height: 9px;
  top: 4px;
  left: 5px;
}

.contact-us .text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--neutral-500);
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.contact-us .header {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 42px 96px 16px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fcfcff;
  box-shadow: var(--drop-shadow-100);
}

.contact-us .frame-14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 1;
  flex-grow: 1;
  margin-top: -3.00px;
  margin-bottom: -3.00px;
}

.contact-us .frame-15 {
  display: flex;
  width: 120px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.contact-us .text-wrapper-10 {
  position: relative;
  width: 104px;
  height: 20px;
  margin-top: -1.00px;
  font-family: var(--details-bold-font-family);
  font-weight: var(--details-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-bold-font-size);
  text-align: left;
  line-height: var(--details-bold-line-height);
  letter-spacing: var(--details-bold-letter-spacing);
  direction: rtl;
  font-style: var(--details-bold-font-style);
}

.contact-us .frame-16 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 2px;
  position: relative;
  flex: 0 0 auto;
}

.contact-us .frame-17 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.contact-us .text-wrapper-11 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  white-space: nowrap;
  font-style: var(--body-font-style);
}

.contact-us .arrow {
  position: relative;
  width: 16px;
  height: 16px;
  transform: rotate(-90.00deg);
}

.contact-us .vector-4 {
  position: absolute;
  width: 9px;
  height: 5px;
  top: 6px;
  left: 3px;
  transform: rotate(90.00deg);
}

.contact-us .frame-18 {
  display: flex;
  width: 906px;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.contact-us .frame-19 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 21px;
  position: relative;
  flex: 0 0 auto;
}

.contact-us .frame-20 {
  display: flex;
  width: 110px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
}

.contact-us .text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .frame-21 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
  flex: 0 0 auto;
}

.contact-us .text-wrapper-13 {
  position: relative;
  width: 95px;
  height: 21px;
  margin-top: -1.00px;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-500);
  font-size: 16px;
  text-align: left;
  line-height: 19.2px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.contact-us .rectangle {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 3px;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.contact-us .frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 83px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
}

.contact-us .frame-22 {
  display: inline-flex;
  height: 21px;
  align-items: center;
  gap: 8px;
  position: relative;
}

.contact-us .text-wrapper-14 {
  position: relative;
  width: 62px;
  height: 21px;
  margin-top: -1.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .frame-23 {
  display: flex;
  width: 59px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
}

.contact-us .text-wrapper-15 {
  position: relative;
  width: 96px;
  height: 28px;
  margin-top: -1.00px;
  margin-left: -18.50px;
  margin-right: -18.50px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .frame-24 {
  display: flex;
  width: 61px;
  height: 39px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
}

.contact-us .text-wrapper-16 {
  position: relative;
  width: 83px;
  height: 24px;
  margin-top: -1.50px;
  margin-left: -11.00px;
  margin-right: -11.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .frame-25 {
  display: flex;
  width: 57px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
}

.contact-us .text-wrapper-17 {
  position: relative;
  width: 77px;
  height: 17px;
  margin-top: -1.00px;
  margin-left: -10.00px;
  margin-right: -10.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .untitled {
  position: relative;
  width: 279px;
  height: 42px;
  object-fit: cover;
}

.contact-us .form-contact-us {
  position: absolute;
  width: 579px;
  height: 737px;
  top: 226px;
  left: 688px;
  background-color: #0056a0;
  border-radius: 18px;
}

.contact-us .button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  justify-content: center;   /* horizontally center content */
  align-items: center;       /* vertically center content */
  width: 403px;
  padding: 16px 40px;
  position: absolute;
  top: 637px;
  left: 88px;
  background-color: var(--primary60-blue);
  border-radius: 18px;
  cursor: pointer;
}

.contact-us .large {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--textwhite);
  font-size: 16px;
  line-height: 24px;
  text-align: center;       /* text centered */
  width: 100%;              /* helps keep text in the middle */
}


.contact-us .overlap {
  position: absolute;
  width: 411px;
  height: 525px;
  top: 60px;
  left: 88px;
}

.contact-us .form-message {
  height: 120px;
  top: 405px;
  position: absolute;
  width: 403px;
  left: 0;
  background-color: var(--otherbackground-white);
  border-radius: 18px;
}

.contact-us .form-email {
  height: 59px;
  top: 282px;
  position: absolute;
  width: 403px;
  left: 0;
  background-color: var(--otherbackground-white);
  border-radius: 18px;
}

.contact-us .form-last-name {
  position: absolute;
  width: 403px;
  height: 59px;
  top: 159px;
  left: 0;
  background-color: var(--otherbackground-white);
  border-radius: 18px;
}

.contact-us .form-first-name {
  position: absolute;
  width: 411px;
  height: 447px;
  top: 0;
  left: 0;
}

.contact-us .overlap-2 {
  position: absolute;
  width: 411px;
  height: 411px;
  top: 36px;
  left: 0;
}

.contact-us .form {
  position: absolute;
  width: 411px;
  height: 411px;
  top: 0;
  left: 0;
}

.contact-us .overlap-group-2 {
  position: absolute;
  width: 403px;
  height: 59px;
  top: 0;
  left: 0;
  background-color: var(--otherbackground-white);
  border-radius: 18px;
}

.contact-us .text-wrapper-18 {
  position: absolute;
  width: 195px;
  height: 22px;
  top: 19px;
  left: 188px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--textin-field);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .text-wrapper-19 {
  position: absolute;
  width: 195px;
  height: 22px;
  top: 141px;
  left: 188px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--textin-field);
  font-size: var(--body-font-size);
  text-align: right;
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
}

.contact-us .text-wrapper-20 {
  position: absolute;
  width: 195px;
  height: 22px;
  top: 263px;
  left: 188px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--textin-field);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .text-wrapper-21 {
  position: absolute;
  width: 195px;
  height: 22px;
  top: 389px;
  left: 188px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--textin-field);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .text-wrapper-22 {
  position: absolute;
  top: 87px;
  left: 323px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: #ffffff;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .text-wrapper-23 {
  position: absolute;
  top: 209px;
  left: 288px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: #ffffff;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .text-wrapper-24 {
  position: absolute;
  top: 335px;
  left: 320px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: #ffffff;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .text-wrapper-25 {
  position: absolute;
  top: 0;
  left: 359px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: #ffffff;
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.contact-us .group-2 {
  position: absolute;
  width: 454px;
  height: 177px;
  top: 540px;
  left: 172px;
}

.contact-us .text-wrapper-26 {
  position: absolute;
  top: 0;
  left: 319px;
  font-family: "DIN Next LT Arabic-Regular", Helvetica;
  font-weight: 400;
  color: var(--texttitle);
  font-size: 31px;
  line-height: 37.2px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.contact-us .text-wrapper-27 {
  position: absolute;
  width: 450px;
  top: 82px;
  left: 0;
  font-family: "DIN Next LT Arabic-Regular", Helvetica;
  font-weight: 400;
  color: var(--neutral-500);
  font-size: 20px;
  text-align: justify;
  line-height: 35px;
  letter-spacing: 0;
  direction: rtl;
}

.contact-us .group-3 {
  position: absolute;
  width: 247px;
  height: 217px;
  top: 739px;
  left: 380px;
}

.contact-us .food-location {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 12px;
  left: 207px;
}

.contact-us .combined-shape {
  position: absolute;
  width: 23px;
  height: 32px;
  top: 3px;
  left: 9px;
}

.contact-us .head-office {
  position: absolute;
  width: 199px;
  height: 60px;
  top: 0;
  left: 0;
}

.contact-us .text-wrapper-28 {
  position: absolute;
  top: 33px;
  left: 0;
  font-family: "DIN Next LT Arabic-Regular", Helvetica;
  font-weight: 400;
  color: var(--textbody);
  font-size: 16px;
  text-align: right;
  letter-spacing: 0;
  line-height: 27px;
  white-space: nowrap;
}

.contact-us .text-wrapper-29 {
  position: absolute;
  top: 0;
  left: 85px;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--texttitle);
  font-size: 24px;
  line-height: 32px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.contact-us .head-office-2 {
  width: 137px;
  top: 79px;
  left: 62px;
  position: absolute;
  height: 60px;
}

.contact-us .text-wrapper-30 {
  position: absolute;
  top: 0;
  left: 50px;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--texttitle);
  font-size: 24px;
  line-height: 32px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.contact-us .head-office-3 {
  width: 152px;
  top: 157px;
  left: 47px;
  position: absolute;
  height: 60px;
}

.contact-us .text-wrapper-31 {
  position: absolute;
  top: 33px;
  left: 53px;
  font-family: "DIN Next LT Arabic-Regular", Helvetica;
  font-weight: 400;
  color: var(--textbody);
  font-size: 16px;
  text-align: right;
  letter-spacing: 0;
  line-height: 27px;
  white-space: nowrap;
}

.contact-us .text-wrapper-32 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--texttitle);
  font-size: 24px;
  line-height: 32px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.contact-us .communication-email {
  width: 30px;
  height: 30px;
  top: 94px;
  left: 212px;
  background-image: url(https://c.animaapp.com/Ey7bjgxp/img/outlined---communication---email@2x.png);
  position: absolute;
  background-size: 100% 100%;
}

.contact-us .communication-call {
  width: 34px;
  height: 34px;
  top: 170px;
  left: 208px;
  background-image: url(https://c.animaapp.com/Ey7bjgxp/img/outlined---communication---call@2x.png);
  position: absolute;
  background-size: 100% 100%;
}

.contact-us .basemap-image-wrapper {
  position: absolute;
  width: 450px;
  height: 246px;
  top: 253px;
  left: 187px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  .basemap-iframe { width: 100%; height: 100%; border: 0; }
.basemap-image-wrapper { overflow: hidden; } /* keeps your existing positioning/sizing */

}

.contact-us .basemap-image {
  position: absolute;
  width: 450px;
  height: 246px;
  top: 0;
  left: 0;
}
:root {
  --blue-100: rgba(255, 255, 255, 1);
  --blue-200: rgba(205, 206, 229, 1);
  --blue-300: rgba(114, 134, 188, 1);
  --blue-400: rgba(73, 108, 173, 1);
  --blue-500: rgba(0, 86, 160, 1);
  --red-400: rgba(241, 92, 66, 1);
  --red-500: rgba(237, 33, 38, 1);
  --heavenly-500: rgba(50, 177, 230, 1);
  --green-300: rgba(119, 192, 67, 1);
  --neutral-0: rgba(255, 255, 255, 1);
  --neutral-100: rgba(247, 247, 247, 1);
  --neutral-200: rgba(209, 211, 213, 1);
  --neutral-300: rgba(153, 158, 161, 1);
  --neutral-400: rgba(117, 117, 117, 1);
  --neutral-500: rgba(75, 75, 75, 1);
  --neutral-900: rgba(27, 27, 27, 1);
  --white: rgba(255, 255, 255, 1);
  --textwhite: rgba(255, 255, 255, 1);
  --textin-field: rgba(204, 204, 204, 1);
  --texttitle: rgba(46, 46, 46, 1);
  --textbody: rgba(128, 128, 128, 1);
  --otherbackground-white: rgba(255, 255, 255, 1);
  --primary60-blue: rgba(61, 184, 245, 1);
  --header-font-family: "Cairo", Helvetica;
  --header-font-weight: 400;
  --header-font-size: 31px;
  --header-letter-spacing: 0px;
  --header-line-height: 120.00000476837158%;
  --header-font-style: normal;
  --header-bold-font-family: "Cairo", Helvetica;
  --header-bold-font-weight: 700;
  --header-bold-font-size: 31px;
  --header-bold-letter-spacing: 0px;
  --header-bold-line-height: 120.00000476837158%;
  --header-bold-font-style: normal;
  --title-font-family: "Cairo", Helvetica;
  --title-font-weight: 400;
  --title-font-size: 25px;
  --title-letter-spacing: 0px;
  --title-line-height: 120.00000476837158%;
  --title-font-style: normal;
  --titlebold-font-family: "Cairo", Helvetica;
  --titlebold-font-weight: 700;
  --titlebold-font-size: 25px;
  --titlebold-letter-spacing: 0px;
  --titlebold-line-height: 120.00000476837158%;
  --titlebold-font-style: normal;
  --sub-title-font-family: "Cairo", Helvetica;
  --sub-title-font-weight: 400;
  --sub-title-font-size: 20px;
  --sub-title-letter-spacing: 0px;
  --sub-title-line-height: 120.00000476837158%;
  --sub-title-font-style: normal;
  --sub-bold-font-family: "Cairo", Helvetica;
  --sub-bold-font-weight: 700;
  --sub-bold-font-size: 20px;
  --sub-bold-letter-spacing: 0px;
  --sub-bold-line-height: 120.00000476837158%;
  --sub-bold-font-style: normal;
  --body-font-family: "Cairo", Helvetica;
  --body-font-weight: 400;
  --body-font-size: 18px;
  --body-letter-spacing: 0px;
  --body-line-height: 120.00000476837158%;
  --body-font-style: normal;
  --body-bold-font-family: "Cairo", Helvetica;
  --body-bold-font-weight: 700;
  --body-bold-font-size: 16px;
  --body-bold-letter-spacing: 0px;
  --body-bold-line-height: 120.00000476837158%;
  --body-bold-font-style: normal;
  --details-font-family: "Cairo", Helvetica;
  --details-font-weight: 400;
  --details-font-size: 13px;
  --details-letter-spacing: 0px;
  --details-line-height: 120.00000476837158%;
  --details-font-style: normal;
  --details-bold-font-family: "Cairo", Helvetica;
  --details-bold-font-weight: 700;
  --details-bold-font-size: 13px;
  --details-bold-letter-spacing: 0px;
  --details-bold-line-height: 120.00000476837158%;
  --details-bold-font-style: normal;
  --caption-font-family: "Cairo", Helvetica;
  --caption-font-weight: 400;
  --caption-font-size: 10px;
  --caption-letter-spacing: 0px;
  --caption-line-height: 120.00000476837158%;
  --caption-font-style: normal;
  --caption-bold-font-family: "Cairo", Helvetica;
  --caption-bold-font-weight: 700;
  --caption-bold-font-size: 10px;
  --caption-bold-letter-spacing: 0px;
  --caption-bold-line-height: 120.00000476837158%;
  --caption-bold-font-style: normal;
  --drop-shadow: 0px 5px 10px 0px rgba(36, 36, 36, 0.2);
  --drop-shadow-100: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
}
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.page-loader img {
    width: 100px;
    height: auto;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Navigation hover effects */
.navbar div, 
.frame-19 div, 
.frame-20 div, 
.frame-21 div, 
.frame-23 div, 
.frame-24 div,
.text-wrapper-12,
.text-wrapper-13,
.text-wrapper-21,
.text-wrapper-22,
.text-wrapper-23 {
    transition: color 0.3s ease;
    cursor: pointer;
}

.navbar div:hover, 
.frame-19 div:hover, 
.frame-20 div:hover, 
.frame-21 div:hover, 
.frame-23 div:hover, 
.frame-24 div:hover,
.text-wrapper-12:hover,
.text-wrapper-13:hover,
.text-wrapper-21:hover,
.text-wrapper-22:hover,
.text-wrapper-23:hover {
    color: #007bff;
}

/* Logo hover effect */
.logo, .logo-2 {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.logo:hover, .logo-2:hover {
    opacity: 0.8;
}

/* Store button hover effect */
.text-wrapper-10:hover, 
.text-wrapper-2:hover {
    opacity: 0.8;
}

/* --- UNIFIED SOCIAL POST STYLES --- */
.social-card {
    cursor: pointer;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #f0f0f0; /* Placeholder background */
}

.social-card .post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.social-card .post-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(25, 25, 25, 0) 0%, rgba(27, 27, 27, 0.73) 45%, rgba(38, 38, 38, 1) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 15px;
    color: white;
    box-sizing: border-box;
}

.social-card:hover {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.social-card:hover .post-overlay {
    opacity: 1;
}

.social-card .overlay-header {
    position: absolute;
    top: 15px;
    right: 15px;
}

.social-card .social-icon {
    width: 24px;
    height: 24px;
}

.social--card .overlay-footer {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-card .post-caption {
    font-family: var(--details-bold-font-family);
    font-weight: var(--details-bold-font-weight);
    font-size: var(--details-bold-font-size);
    line-height: 1.4;
    color: var(--blue-100);
}

.social-card .post-stats {
    display: flex;
    gap: 20px;
    align-items: center;
}

.social-card .stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--details-bold-font-size);
    font-family: var(--details-bold-font-family);
    color: var(--blue-100);
}

.social-card .stat img {
    width: 16px;
    height: auto;
}

/* Position like/comment counter */
.group-4 .frame-29 {
    position: absolute;
    bottom: 180px;
    left: 110px;
    z-index: 2;
}

/* Position caption text */
.group-4 .text-wrapper-18 {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    color: white;
    z-index: 2;
}

/* Show all elements on hover */
.group-4:hover .frame-29,
.group-4:hover .rectangle-2,
.group-4:hover .text-wrapper-18,
.group-4:hover .instagram {
    opacity: 1;
}

/* Remove default image hover effects */
.group-4 img {
    transition: transform 0.3s ease;
    transform: none !important;
}

/* Ensure proper stacking context */
.group-4 {
    z-index: 1;
}

.group-4:hover {
    z-index: 2;
}

/* Infinite scroll animation - FIXED */
@keyframes scroll-brands {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.infinite-scroll-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.infinite-scroll-content {
    display: flex;
    animation: scroll 40s linear infinite;  /* Slowed down from 20s to 40s */
    width: fit-content;
}

.infinite-scroll-content:hover {
    animation-play-state: paused;
}

.infinite-scroll-content img {
    margin: 0 20px;
    flex-shrink: 0;  /* Prevent images from shrinking */
}

/* Banner transition effects */
.banner-image {
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
    will-change: opacity, transform;
}

.banner-arrow {
    cursor: pointer;
    transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.banner-arrow:hover {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.banner-arrow:active {
    transform: scale(0.9) rotate(15deg);
}

.banner-arrow:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.banner-arrow.rotating {
    animation: rotate360 1s ease-in-out;
}

@keyframes rotate360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .banner-image,
    .banner-arrow {
        transition-duration: 0.1s;
    }
    
    .banner-arrow:hover {
        transform: scale(1.05);
    }
    
    .banner-arrow.rotating {
        animation: none;
    }
}

/* Discover Products button hover effect */
.frame-10 {
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.frame-10:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.frame-10:active {
    transform: scale(0.98);
}

/* Brand logos infinite scroll */
.brands-scroll-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.brands-scroll-track {
  display: flex;
  animation: scroll-brands 100s linear infinite;
  width: max-content;
}


.brands-scroll-track:hover {
    animation-play-state: paused;
}

.brands-scroll-track img {
    height: 80px;
    width: auto;
    object-fit: contain;
}

@keyframes scroll-brands {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Optimize animation performance */
@media (prefers-reduced-motion: reduce) {
    .brands-scroll-track {
        animation-duration: 50s;
    }
}

/* Register Now button hover effect */
.frame-35 {
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.frame-35:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.frame-35:active {
    transform: scale(0.98);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .brands-scroll-track {
        gap: 20px;
    }
    
    .brands-scroll-track img {
        height: 60px;
    }

    .banner-arrow {
        transform-origin: center center;
        padding: 10px;
    }
    
    .banner-arrow:hover {
        transform: scale(1.05) rotate(3deg);
    }
}

/* Language switcher hover effect */
.text-wrapper-11:hover {
    opacity: 0.8;
}

/* Footer links hover effects */
[class*="text-wrapper"] {
    transition: color 0.3s ease, transform 0.2s ease;
}

[class*="text-wrapper"]:hover {
    color: #007bff;
    transform: translateX(-5px);
}

/* Footer contact info specific styles */
[class*="text-wrapper"][class*="phone"]:hover,
[class*="text-wrapper"][class*="email"]:hover,
[class*="text-wrapper"]:hover[href^="tel:"],
[class*="text-wrapper"]:hover[href^="mailto:"] {
    text-decoration: underline;
    transform: none;
}

/* Disable hover effect for headers and titles */
.text-wrapper-7,
.text-wrapper-8,
.text-wrapper-15,
.text-wrapper-16,
.text-wrapper-20,
.text-wrapper-25,
.text-wrapper-26,
.text-wrapper-27 {
    transform: none !important;
}

/* Footer contact info hover effects */
.text-wrapper-15:hover,
.text-wrapper-16:hover {
    text-decoration: underline;
}

/* Dynamic banner styles */
.image-2 {
    transition: opacity 0.3s ease-in-out;
    object-fit: cover;
}

/* Banner arrow hover effects */
.arrow-2 {
    transition: transform 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
}

.arrow-2:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.arrow-2:active {
    transform: scale(0.95);
}

/* Banner container enhancements */
.overlap-group {
    position: relative;
    overflow: hidden;
}

/* Add loading state for banner transitions */
.banner-loading {
    opacity: 0.5;
    pointer-events: none;
}
/* === Minimal animations: socials reveal + partners pop (non-invasive) === */

/* Generic fade-up reveal */
.fx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
  transition-delay: var(--fx-delay, 0s);

}
.fx-reveal.in {
  opacity: 1;
  transform: none;
}

/* Social cards get a slightly stronger lift */
.social-card.fx-reveal { transform: translateY(28px); }
.social-card.fx-reveal.in { transform: none; }

/* شركاؤنا pop effect */
.fx-pop {
  opacity: 0;
  transform: scale(.96);
  transform-origin: center;
  transition: opacity .5s ease, transform .5s ease;
}
.fx-pop.in {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .fx-reveal, .fx-pop {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
html { scroll-behavior: smooth; }

/* ===== ABOUT – Number Scramble (scoped) ===== */
.about-us .num-scramble{
  display:inline-block;
  font-variant-numeric: tabular-nums;
}
.about-us .num-scramble .digits{
  transition: filter .25s ease, opacity .25s ease;
  will-change: contents, filter, opacity;
}
.about-us .num-scramble.scrambling .digits{
  filter: blur(.7px);
  opacity: .9;
}
.about-us .num-scramble .suffix{
  display:inline-block;
  transform: translateY(.6em);
  opacity: 0;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.about-us .num-scramble.ready .suffix{
  transform: translateY(0);
  opacity: 1;
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .about-us .num-scramble .digits{ transition:none }
  .about-us .num-scramble .suffix{ transition:none; transform:none; opacity:1 }
}
/* ===== ABOUT — Text FX (scoped) ===== */

/* Typewriter (RTL-friendly) */
.about-us .typing {
  position: relative;
  border-inline-end: 2px solid currentColor; /* caret */
  padding-inline-end: 2px;
  animation: about-caret 1s steps(1) infinite;
  white-space: normal; /* allow wrapping */
}
.about-us .typed { border: 0; animation: none; }
@keyframes about-caret { 0%,49% {opacity:1} 50%,100% {opacity:0} }

/* Spread-in (per word) */
.about-us .spread { display: inline; }
.about-us .spread .word { display: inline-block; overflow: hidden; }
.about-us .spread .word > span{
  display:inline-block;
  transform: translateY(.6em) scale(.96);
  letter-spacing: -.06em;
  filter: blur(1px);
  opacity: 0;
  transition:
    transform .6s ease,
    opacity .6s ease,
    letter-spacing .6s ease,
    filter .6s ease;
  transition-delay: var(--d,0s);
}
.about-us .spread.in .word > span{
  transform: none; letter-spacing: 0; filter: none; opacity: 1;
}

/* Shift (gentle horizontal drift per glyph) */
.about-us .shift span{
  display: inline-block;
  animation: about-shift var(--dur,3s) ease-in-out var(--delay,0s) infinite alternate paused;
  will-change: transform;
}
.about-us .shift.play span{ animation-play-state: running; }
@keyframes about-shift {
  from { transform: translateX(var(--from,-2px)); }
  to   { transform: translateX(var(--to,2px)); }
}

/* Vertical rise (header + cards) */
.about-us .rise{
  opacity: 0; transform: translateY(24px);
  transition: transform .6s ease, opacity .6s ease;
  transition-delay: var(--d,0s);
  will-change: transform, opacity;
}
.about-us .rise.in{ opacity: 1; transform: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-us .typing{ border: 0; animation: none; }
  .about-us .spread .word > span,
  .about-us .rise{ transition: none; opacity: 1; transform: none; }
  .about-us .shift span{ animation: none !important; }
}
/* ===== ABOUT — Pop-out + Slide-in (scoped) ===== */

/* Pop-out words */
.about-us .popwords { display: inline; }
.about-us .popwords .w{
  display:inline-block;
  transform: translateY(8px) scale(.96);
  filter: blur(2px);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease, filter .45s ease;
  transition-delay: var(--d, 0s);
}
.about-us .popwords.in .w{
  transform: none; filter: none; opacity: 1;
}

/* Slide-in (vertical) */
.about-us .slide-in{
  opacity: 0; transform: translateY(24px);
  transition: transform .6s ease, opacity .6s ease;
  transition-delay: var(--d, 0s);
  will-change: transform, opacity;
}
.about-us .slide-in.in{ opacity: 1; transform: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .about-us .popwords .w,
  .about-us .slide-in{ transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
}
/* ===== PRODUCTS — Card FX (scoped) ===== */
.prouducts .prod-card{
  --rx: 0deg; --ry: 0deg;
  position: relative;
  transform: translateY(24px) scale(.98) rotateX(var(--rx)) rotateY(var(--ry));
  opacity: 0;
  transition:
    transform .6s cubic-bezier(.2,.8,.2,1),
    opacity  .6s ease,
    box-shadow .6s ease, filter .6s ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.prouducts .prod-card.in{
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0) rotateY(0);
}
.prouducts .prod-card.fx-tilt:hover{
  transform: translateY(-4px) scale(1.01) rotateX(var(--rx)) rotateY(var(--ry));
  box-shadow: 0 24px 40px rgba(0,0,0,.18);
  filter: saturate(1.02);
}

/* glossy sweep on hover */
.prouducts .prod-card::after{
  content:"";
  position:absolute; inset:-1px;
  pointer-events:none;
  background:
    radial-gradient(180px 180px at var(--mx,120%) var(--my,-40%),
      rgba(255,255,255,.18), transparent 60%);
  opacity: 0; transition: opacity .25s ease;
}
.prouducts .prod-card.fx-tilt:hover::after{ opacity:.9; }

/* main product image “float” */
.prouducts .prod-photo{
  transform: translateY(8px) scale(.98);
  opacity: .95;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .6s ease;
  will-change: transform, opacity;
}
.prouducts .prod-card.in .prod-photo{ transform:none; opacity:1; }
.prouducts .prod-card.fx-tilt:hover .prod-photo{ transform: translateY(-4px) scale(1.03); }

/* title + spec rows stagger */
.prouducts .prod-info{
  opacity: 0; transform: translateY(12px);
  transition: transform .5s ease, opacity .5s ease;
  transition-delay: var(--d, 0s);
}
.prouducts .prod-card.in .prod-info{ opacity:1; transform:none; }

/* keyboard focus support */
.prouducts .prod-card:focus-within{
  box-shadow: 0 0 0 3px rgba(0,86,160,.25), 0 18px 32px rgba(0,0,0,.16);
  transform: translateY(-2px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .prouducts .prod-card{ transition: none !important; transform:none !important; opacity:1 !important; }
  .prouducts .prod-photo, .prouducts .prod-info{ transition: none !important; transform:none !important; opacity:1 !important; }
}
/* ===== PRODUCTS — Quality Tests Section Rise Animation (scoped) ===== */
.prouducts .fx-rise-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}

.prouducts .fx-rise-up.in {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .prouducts .fx-rise-up {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ===== NEWS — Social Post Card "Flashy" Animation (scoped) ===== */
.news .frame-26 {
  /* This creates the 3D space for the cards to flip within */
  perspective: 1000px;
}

.news .social-card.fx-card-flip {
  opacity: 0;
  /* Start the card rotated on the Y-axis and slightly moved. Origin is right for RTL. */
  transform: translateX(40px) rotateY(-45deg);
  transform-origin: right center;
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); /* A bouncy, energetic ease */
  transition-delay: var(--d, 0s); /* Stagger delay controlled by JS */
  will-change: opacity, transform;
}

.news .social-card.fx-card-flip.in {
  opacity: 1;
  transform: none; /* Return to normal position */
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .news .social-card.fx-card-flip {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* === شركاؤنا: Pure CSS infinite strip (RTL-friendly) === */
.partners-stri {
  width:100%;
  height: 397px;
  overflow: hidden;
  /* edge fade (optional) */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

/* Adjust overall speed here */
.partners-stri {
  --marquee-duration: 90s;  /* was too fast; increase to slow down */
}

.partners-stri .partners-trac {
  display: inline-flex;
  align-items: center;
  gap: 120px;                     /* matches About Us feel */
  height: 100%;
  width: max-content;            /* key: let content size itself */
  backface-visibility: hidden;
  will-change: transform;
  animation: partners-marquee var(--marquee-duration) linear infinite;
}

/* FIXED: The partners-trac--b should be positioned inline with the first track */
.partners-stri .partners-trac.partners-trac--b {
  /* Start right after the first track */
  animation: partners-marquee-b var(--marquee-duration) linear infinite;
}

/* If you want pause on hover later:
.partners-stri:hover .partners-trac { animation-play-state: paused; }
*/

.partners-stri img {
  height: 75px;                 /* visually matches About Us logos */
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

/* First track animation: moves from 0% to -100% */
@keyframes partners-marquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* Second track animation: moves from 0% to -100% (starts from right) */
@keyframes partners-marquee-b {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .partners-stri .partners-trac { animation: none; }
}
/* === VISIBILITY + STACKING ONLY (no layout changes) === */

/* 1) Let content show; don't clip. Do NOT change width/max-width. */
.home .overlap-wrapper {
  overflow: visible !important;
  height: auto !important; /* allow natural height */
  /* width/max-width remain as in original CSS to preserve positions */
}

/* 2) Treat the big banner as a true background (stay behind). */
.home .overlap-4 {
  /* position stays as defined in your CSS */
  z-index: 0; /* behind all content */
}

/* 3) Keep hero layers in front of the banner (no position changes). */
.home .overlap-group,   /* hero block over banner */
.home .frame-9 {        /* hero CTA block */
  z-index: 2;
}

/* 4) News section in front of banner, unchanged layout. */
.home .overlap-3 {
  z-index: 2;
}

/* 5) News gray background should never block cards/text. */
.home .overlap-3 .rectangle {
  z-index: 1;          /* behind its content */
  pointer-events: none;
}

/* 6) Ensure the news cards & interactive bits sit above their bg. */
.home .frame-5,
.home .text-wrapper-5,
.home .text-wrapper-6,
.social-card {
  z-index: 3;
}

/* 7) شركاؤنا/partners block must not be hidden behind hero. */
.home .frame-23 {
  z-index: 4;          /* above hero if they overlap vertically */
}

/* 8) Header & footer always float above page content. */
.home .overlap-group-wrapper, /* header container */
.footer {
  z-index: 10;
}

/* IMPORTANT: Do NOT include any rule that changes .home .overlap width/left.
   Removing this prevents the drift:
   // .home .overlap { width: 100%; left: 0; }  <-- DO NOT ADD THIS
*/
/* Keep the hero background well-positioned while it rotates */
.home .overlap-4{
  background-position: center;
  background-repeat: no-repeat;

  /* Pick ONE of the following depending on your preference: */
  /* background-size: cover !important;      */ /* natural crop, fills without distortion */
  /* background-size: 100% 100% !important;  */ /* exact stretch (matches current look) */
}

@media (min-width: 1450px) {
  .prouducts .frame-wrapper {
    left: 100px !important;
  }
}
@media (min-width: 1675px) {
  .prouducts .frame-wrapper {
    left: 300px !important;
  }
}

@media (min-width: 2060px) {
  .prouducts .frame-wrapper {
    left: 350px !important;
  }
}

@media (min-width: 2175px) {
  .prouducts .frame-wrapper {
    left: 400px !important;
  }
}
@media (min-width: 2251px) {
  .prouducts .frame-wrapper {
    left: 550px !important;
  }
}
/* Join Us — fade-in for the side rectangle after page load */
.join-us .rectangle.rect-fade { 
  opacity: 0;
}

.join-us .rectangle.rect-fade.in {
  opacity: 1;
  transition: opacity 0.7s ease-out;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .join-us .rectangle.rect-fade,
  .join-us .rectangle.rect-fade.in {
    opacity: 1 !important;
    transition: opacity 5s ease-out 5s
  }
}
/* Mobile auto-scale centering fix */
@media (max-width: 1024px) {
  html, body { height: 100%; }
  body { margin: 0; overflow-x: hidden; }

  #fit-wrapper { position: relative; width: 100%; min-height: 100svh; }

  /* IMPORTANT: lock the wrapper to your desktop design width */
  .scale-root {
    position: relative;
    width: 100%;           /* <= set to your design width */
    left: -50%;               /* center by translating from middle */
    transform-origin: top center;
  }
}
/* add to dynamic.css */
.home #ig-feed { font-size: 0; } /* removes inline-block whitespace */
.home #ig-feed .social-card {
  display: inline-block;
  vertical-align: top;
  width: calc((100% - 3 * 16px) / 4); /* 4 columns, 16px gaps */
  margin-inline-end: 16px;            /* logical for RTL/LTR */
  box-sizing: border-box;
  font-size: 1rem;                    /* restore text size inside the card */
}
.home #ig-feed .social-card:nth-child(4n) { margin-inline-end: 0; }

/* Gap between news rows */
.news #ig-feed > .frame-27 { 
  margin-block-end: 24px;   /* vertical gap between row 1 and row 2 */
}
.news #ig-feed > .frame-27:last-child {
  margin-block-end: 0;      /* no extra space after the last row */
}
/* === Sticky footer inside the home canvas === */
.home .overlap { position: relative; } /* already true, keep it */

.home .footer{
  position: absolute !important;
  bottom: 0;
  left: 0;
  right: 0;             /* full width of the 100% canvas */
  margin: 0;            /* no margin so bottom:0 is exact */
  top: auto !important; /* neutralize any legacy offsets */
  transform: none !important;
  z-index: 2;           /* above backgrounds but below overlays if needed */
}

/* Optional: match your page side gutters (desktop) */
@media (min-width: 1024px){
  .home .footer{ left: 96px; right: 96px; }
}

/* Optional: tighter gutters on phones */
@media (max-width: 767px){
  .home .footer{ left: 16px; right: 16px; }
}
/* Navigation hover effects */
.navbar div, 
.frame-19 div, 
.frame-20 div, 
.frame-21 div, 
.frame-23 div, 
.frame-24 div,
.text-wrapper-12,
.text-wrapper-13,
.text-wrapper-21,
.text-wrapper-22,
.text-wrapper-23 {
    transition: color 0.3s ease;
    cursor: pointer;
}

.navbar div:hover, 
.frame-19 div:hover, 
.frame-20 div:hover, 
.frame-21 div:hover, 
.frame-23 div:hover, 
.frame-24 div:hover,
.text-wrapper-12:hover,
.text-wrapper-13:hover,
.text-wrapper-21:hover,
.text-wrapper-22:hover,
.text-wrapper-23:hover {
    color: #007bff;
}

/* Logo hover effect */
.logo, .logo-2 {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.logo:hover, .logo-2:hover {
    opacity: 0.8;
}

/* Store button hover effect */
.text-wrapper-10:hover, 
.text-wrapper-2:hover {
    opacity: 0.8;
}

/* Language switcher hover effect */
.text-wrapper-11:hover {
    opacity: 0.8;
}

/* Footer links hover effects */
[class*="text-wrapper"] {
    transition: color 0.3s ease, transform 0.2s ease;
}

[class*="text-wrapper"]:hover {
    color: #007bff;
    transform: translateX(-5px);
}

/* Footer contact info specific styles */
[class*="text-wrapper"][class*="phone"]:hover,
[class*="text-wrapper"][class*="email"]:hover,
[class*="text-wrapper"]:hover[href^="tel:"],
[class*="text-wrapper"]:hover[href^="mailto:"] {
    text-decoration: underline;
    transform: none;
}

/* Disable hover effect for headers and titles */
.text-wrapper-7,
.text-wrapper-8,
.text-wrapper-15,
.text-wrapper-16,
.text-wrapper-20,
.text-wrapper-25,
.text-wrapper-26,
.text-wrapper-27 {
    transform: none !important;
}

/* Footer contact info hover effects */
.text-wrapper-15:hover,
.text-wrapper-16:hover {
    text-decoration: underline;
}
.frame {
  display: flex;
  flex-direction: column;
  width: 906px;
  align-items: flex-end;
  gap: 32px;
  padding: 48px 40px;
  position: relative;
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
}

.frame .div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .div-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .image {
  position: relative;
  width: 139px;
  height: 50.1px;
  aspect-ratio: 2.77;
}

.frame .untitled {
  position: relative;
  width: 330px;
  height: 50.03px;
  aspect-ratio: 6.6;
  object-fit: cover;
}

.frame .line {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-bottom: -0.50px;
}

.frame .text-wrapper {
  position: relative;
  width: fit-content;
  font-family: var(--titlebold-font-family);
  font-weight: var(--titlebold-font-weight);
  color: var(--blue-500);
  font-size: var(--titlebold-font-size);
  text-align: center;
  letter-spacing: var(--titlebold-letter-spacing);
  line-height: var(--titlebold-line-height);
  white-space: nowrap;
  direction: rtl;
  font-style: var(--titlebold-font-style);
}

.frame .div-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .p {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--sub-title-font-family);
  font-weight: var(--sub-title-font-weight);
  color: transparent;
  font-size: var(--sub-title-font-size);
  text-align: left;
  letter-spacing: var(--sub-title-letter-spacing);
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  direction: rtl;
  font-style: var(--sub-title-font-style);
}

.frame .span {
  color: #035297;
  font-family: var(--sub-title-font-family);
  font-style: var(--sub-title-font-style);
  font-weight: var(--sub-title-font-weight);
  letter-spacing: var(--sub-title-letter-spacing);
  line-height: var(--sub-title-line-height);
  font-size: var(--sub-title-font-size);
}

.frame .text-wrapper-2 {
  color: #ed2126;
  font-family: var(--sub-title-font-family);
  font-style: var(--sub-title-font-style);
  font-weight: var(--sub-title-font-weight);
  letter-spacing: var(--sub-title-letter-spacing);
  line-height: var(--sub-title-line-height);
  font-size: var(--sub-title-font-size);
}

.frame .div-wrapper {
  display: flex;
  width: 562px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--neutral-100);
  border-radius: 8px;
  overflow: hidden;
}

.frame .text-wrapper-3 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--details-font-weight);
  color: #8a8a8a;
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.frame .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #8a8a8a;
  font-size: var(--details-font-size);
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.frame .text-wrapper-5 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--sub-title-font-weight);
  color: var(--primary-orouba);
  font-size: var(--sub-title-font-size);
  text-align: left;
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--sub-title-font-family);
  letter-spacing: var(--sub-title-letter-spacing);
  direction: rtl;
  font-style: var(--sub-title-font-style);
}

.frame .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #8a8a8a;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.frame .div-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.frame .text-wrapper-7 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--sub-title-font-weight);
  color: var(--blue-500);
  font-size: var(--sub-title-font-size);
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--sub-title-font-family);
  letter-spacing: var(--sub-title-letter-spacing);
  direction: rtl;
  font-style: var(--sub-title-font-style);
}

.frame .div-wrapper-2 {
  display: inline-flex;
  height: 49px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 21px 37px;
  position: relative;
  background-color: #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
}

.frame .text-wrapper-8 {
  position: relative;
  width: 79px;
  height: 25px;
  margin-top: -10.00px;
  margin-bottom: -8.00px;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-bold-font-size);
  text-align: right;
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  font-style: var(--body-bold-font-style);
}

.frame .div-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .div-wrapper-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--blue-500);
  border-radius: 16px;
  box-shadow: var(--drop-shadow-200);
}

.frame .text-wrapper-9 {
  width: 63px;
  height: 37px;
  font-weight: var(--sub-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--sub-bold-font-size);
  text-align: left;
  line-height: var(--sub-bold-line-height);
  position: relative;
  font-family: var(--sub-bold-font-family);
  letter-spacing: var(--sub-bold-letter-spacing);
  direction: rtl;
  font-style: var(--sub-bold-font-style);
}

.frame .div-wrapper-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 16px;
  box-shadow: var(--drop-shadow-200);
}

.frame .text-wrapper-10 {
  width: fit-content;
  font-weight: var(--sub-title-font-weight);
  color: var(--neutral-500);
  font-size: var(--sub-title-font-size);
  text-align: left;
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--sub-title-font-family);
  letter-spacing: var(--sub-title-letter-spacing);
  direction: rtl;
  font-style: var(--sub-title-font-style);
}
/* Original CSS styles will be injected here */

/* Additional styles for semantic HTML elements and accessibility */
.warranty-form {
  display: contents;
}

.error-message {
  display: none;
  color: var(--red-500);
  font-size: var(--details-font-size);
  font-family: var(--details-font-family);
  margin-top: 4px;
  direction: rtl;
}

.error-message.show {
  display: block;
}

/* Input field styles to maintain visual consistency */
.div-wrapper input {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  direction: rtl;
  text-align: right;
}

.div-wrapper input::placeholder {
  color: #8a8a8a;
  opacity: 1;
}

.div-wrapper input:focus {
  outline: 2px solid var(--blue-500);
  outline-offset: -2px;
}

/* File input styling */
.file-input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.div-wrapper-2 {
  position: relative;
  cursor: pointer;
}

.div-wrapper-2:hover {
  background-color: #c9c9c9;
}

.div-wrapper-2:focus-within {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

/* Button styles */
.div-wrapper-3,
.div-wrapper-4 {
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
}

.div-wrapper-3:hover {
  background-color: var(--blue-400);
  transform: translateY(-1px);
}

.div-wrapper-3:focus {
  outline: 2px solid var(--neutral-0);
  outline-offset: 2px;
}

.div-wrapper-4:hover {
  background-color: var(--neutral-100);
}

.div-wrapper-4:focus {
  outline: 2px solid var(--blue-500);
  outline-offset: 2px;
}

/* Date input specific styling */
input[type="date"] {
  color-scheme: light;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .frame {
    width: 100%;
    max-width: 100%;
    padding: 24px 20px;
  }

  .div-wrapper {
    width: 100%;
  }
}

.frame {
  display: flex;
  flex-direction: column;
  width: 906px;
  align-items: flex-end;
  gap: 32px;
  padding: 48px 40px;
  position: relative;
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
}

.frame .div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .div-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .image {
  position: relative;
  width: 139px;
  height: 50.1px;
  aspect-ratio: 2.77;
}

.frame .untitled {
  position: relative;
  width: 330px;
  height: 50.03px;
  aspect-ratio: 6.6;
  object-fit: cover;
}

.frame .line {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-bottom: -0.50px;
}

.frame .text-wrapper {
  position: relative;
  width: fit-content;
  font-family: var(--titlebold-font-family);
  font-weight: var(--titlebold-font-weight);
  color: var(--blue-500);
  font-size: var(--titlebold-font-size);
  text-align: center;
  letter-spacing: var(--titlebold-letter-spacing);
  line-height: var(--titlebold-line-height);
  white-space: nowrap;
  direction: rtl;
  font-style: var(--titlebold-font-style);
}

.frame .div-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .p {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--sub-title-font-family);
  font-weight: var(--sub-title-font-weight);
  color: transparent;
  font-size: var(--sub-title-font-size);
  text-align: left;
  letter-spacing: var(--sub-title-letter-spacing);
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  direction: rtl;
  font-style: var(--sub-title-font-style);
}

.frame .span {
  color: #035297;
  font-family: var(--sub-title-font-family);
  font-style: var(--sub-title-font-style);
  font-weight: var(--sub-title-font-weight);
  letter-spacing: var(--sub-title-letter-spacing);
  line-height: var(--sub-title-line-height);
  font-size: var(--sub-title-font-size);
}

.frame .text-wrapper-2 {
  color: #ed2126;
  font-family: var(--sub-title-font-family);
  font-style: var(--sub-title-font-style);
  font-weight: var(--sub-title-font-weight);
  letter-spacing: var(--sub-title-letter-spacing);
  line-height: var(--sub-title-line-height);
  font-size: var(--sub-title-font-size);
}

.frame .div-wrapper {
  display: flex;
  width: 562px;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--neutral-100);
  border-radius: 8px;
  overflow: hidden;
}

.frame .text-wrapper-3 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--details-font-weight);
  color: #8a8a8a;
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.frame .text-wrapper-4 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #8a8a8a;
  font-size: var(--details-font-size);
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.frame .text-wrapper-5 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--sub-title-font-weight);
  color: var(--primary-orouba);
  font-size: var(--sub-title-font-size);
  text-align: left;
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--sub-title-font-family);
  letter-spacing: var(--sub-title-letter-spacing);
  direction: rtl;
  font-style: var(--sub-title-font-style);
}

.frame .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #8a8a8a;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.frame .div-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.frame .text-wrapper-7 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--sub-title-font-weight);
  color: var(--blue-500);
  font-size: var(--sub-title-font-size);
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--sub-title-font-family);
  letter-spacing: var(--sub-title-letter-spacing);
  direction: rtl;
  font-style: var(--sub-title-font-style);
}

.frame .div-wrapper-2 {
  display: inline-flex;
  height: 49px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 21px 37px;
  position: relative;
  background-color: #d9d9d9;
  border-radius: 8px;
  overflow: hidden;
}

.frame .text-wrapper-8 {
  position: relative;
  width: 79px;
  height: 25px;
  margin-top: -10.00px;
  margin-bottom: -8.00px;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-bold-font-size);
  text-align: right;
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  font-style: var(--body-bold-font-style);
}

.frame .div-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.frame .div-wrapper-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--blue-500);
  border-radius: 16px;
  box-shadow: var(--drop-shadow-200);
}

.frame .text-wrapper-9 {
  width: 63px;
  height: 37px;
  font-weight: var(--sub-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--sub-bold-font-size);
  text-align: left;
  line-height: var(--sub-bold-line-height);
  position: relative;
  font-family: var(--sub-bold-font-family);
  letter-spacing: var(--sub-bold-letter-spacing);
  direction: rtl;
  font-style: var(--sub-bold-font-style);
}

.frame .div-wrapper-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 16px;
  box-shadow: var(--drop-shadow-200);
}

.frame .text-wrapper-10 {
  width: fit-content;
  font-weight: var(--sub-title-font-weight);
  color: var(--neutral-500);
  font-size: var(--sub-title-font-size);
  text-align: left;
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--sub-title-font-family);
  letter-spacing: var(--sub-title-letter-spacing);
  direction: rtl;
  font-style: var(--sub-title-font-style);
}
/* 100% boxless */
.div-wrapper {
  background: transparent;
  padding: 0;           /* keep if you don’t want extra spacing */
  border-radius: 0;
  overflow: visible;
}

.div-wrapper input {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;           /* optional */
}

.div-wrapper input:focus,
.div-wrapper input:focus-visible {
  outline: none;
  box-shadow: none;
  background: transparent;
}
:root {
  --blue-100: rgba(255, 255, 255, 1);
  --blue-200: rgba(205, 206, 229, 1);
  --blue-300: rgba(114, 134, 188, 1);
  --blue-400: rgba(73, 108, 173, 1);
  --blue-500: rgba(0, 86, 160, 1);
  --red-400: rgba(241, 92, 66, 1);
  --red-500: rgba(237, 33, 38, 1);
  --heavenly-500: rgba(50, 177, 230, 1);
  --green-300: rgba(119, 192, 67, 1);
  --neutral-0: rgba(255, 255, 255, 1);
  --neutral-100: rgba(247, 247, 247, 1);
  --neutral-200: rgba(209, 211, 213, 1);
  --neutral-300: rgba(153, 158, 161, 1);
  --neutral-400: rgba(117, 117, 117, 1);
  --neutral-500: rgba(75, 75, 75, 1);
  --neutral-900: rgba(27, 27, 27, 1);
  --primary-orouba: rgba(3, 82, 151, 1);
  --header-font-family: "Cairo", Helvetica;
  --header-font-weight: 400;
  --header-font-size: 31px;
  --header-letter-spacing: 0px;
  --header-line-height: 120.00000476837158%;
  --header-font-style: normal;
  --header-bold-font-family: "Cairo", Helvetica;
  --header-bold-font-weight: 700;
  --header-bold-font-size: 31px;
  --header-bold-letter-spacing: 0px;
  --header-bold-line-height: 120.00000476837158%;
  --header-bold-font-style: normal;
  --title-font-family: "Cairo", Helvetica;
  --title-font-weight: 400;
  --title-font-size: 25px;
  --title-letter-spacing: 0px;
  --title-line-height: 120.00000476837158%;
  --title-font-style: normal;
  --titlebold-font-family: "Cairo", Helvetica;
  --titlebold-font-weight: 700;
  --titlebold-font-size: 25px;
  --titlebold-letter-spacing: 0px;
  --titlebold-line-height: 120.00000476837158%;
  --titlebold-font-style: normal;
  --sub-title-font-family: "Cairo", Helvetica;
  --sub-title-font-weight: 400;
  --sub-title-font-size: 20px;
  --sub-title-letter-spacing: 0px;
  --sub-title-line-height: 120.00000476837158%;
  --sub-title-font-style: normal;
  --sub-bold-font-family: "Cairo", Helvetica;
  --sub-bold-font-weight: 700;
  --sub-bold-font-size: 20px;
  --sub-bold-letter-spacing: 0px;
  --sub-bold-line-height: 120.00000476837158%;
  --sub-bold-font-style: normal;
  --body-font-family: "Cairo", Helvetica;
  --body-font-weight: 400;
  --body-font-size: 18px;
  --body-letter-spacing: 0px;
  --body-line-height: 120.00000476837158%;
  --body-font-style: normal;
  --body-bold-font-family: "Cairo", Helvetica;
  --body-bold-font-weight: 700;
  --body-bold-font-size: 16px;
  --body-bold-letter-spacing: 0px;
  --body-bold-line-height: 120.00000476837158%;
  --body-bold-font-style: normal;
  --details-font-family: "Cairo", Helvetica;
  --details-font-weight: 400;
  --details-font-size: 13px;
  --details-letter-spacing: 0px;
  --details-line-height: 120.00000476837158%;
  --details-font-style: normal;
  --details-bold-font-family: "Cairo", Helvetica;
  --details-bold-font-weight: 700;
  --details-bold-font-size: 13px;
  --details-bold-letter-spacing: 0px;
  --details-bold-line-height: 120.00000476837158%;
  --details-bold-font-style: normal;
  --caption-font-family: "Cairo", Helvetica;
  --caption-font-weight: 400;
  --caption-font-size: 10px;
  --caption-letter-spacing: 0px;
  --caption-line-height: 120.00000476837158%;
  --caption-font-style: normal;
  --caption-bold-font-family: "Cairo", Helvetica;
  --caption-bold-font-weight: 700;
  --caption-bold-font-size: 10px;
  --caption-bold-letter-spacing: 0px;
  --caption-bold-line-height: 120.00000476837158%;
  --caption-bold-font-style: normal;
  --drop-shadow: 0px 5px 10px 0px rgba(36, 36, 36, 0.2);
  --drop-shadow-200: 0px 1px 4px 0px rgba(12, 12, 13, 0.05), 0px 1px 4px 0px
    rgba(12, 12, 13, 0.1);
}
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Cairo:var(--details-font-weight),700,var(--body-font-weight),var(--details-bold-font-weight),var(--header-bold-font-weight),500,400,var(--body-bold-font-weight)");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
@font-face {
  font-family: "DIN Next LT Arabic-Regular";
  src: url("https://anima-uploads.s3.amazonaws.com/5c51504ce900f8000a90a732/Linotype - DIN Next LT Arabic Regular.ttf")
    format("truetype");
}
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Cairo:var(--body-font-weight),var(--details-bold-font-weight),var(--details-font-weight),700,var(--body-bold-font-weight)");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
@font-face {
  font-family: "DIN Next LT Arabic-Regular";
  src: url("https://anima-uploads.s3.amazonaws.com/5c51504ce900f8000a90a732/Linotype - DIN Next LT Arabic Regular.ttf")
    format("truetype");
}
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Cairo:var(--sub-title-font-weight),var(--sub-bold-font-weight),var(--details-font-weight),var(--titlebold-font-weight),var(--body-bold-font-weight)");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Cairo:var(--body-font-weight),var(--details-bold-font-weight),var(--header-bold-font-weight),var(--details-font-weight),400,700,var(--titlebold-font-weight),var(--body-bold-font-weight)");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
@font-face {
  font-family: "DIN Next LT Arabic-Regular";
  src: url("https://anima-uploads.s3.amazonaws.com/5c51504ce900f8000a90a732/Linotype - DIN Next LT Arabic Regular.ttf")
    format("truetype");
}
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Cairo:var(--details-font-weight),700,var(--body-font-weight),var(--sub-title-font-weight),var(--details-bold-font-weight),var(--header-bold-font-weight),400,var(--body-bold-font-weight)");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
@font-face {
  font-family: "DIN Next LT Arabic-Regular";
  src: url("https://anima-uploads.s3.amazonaws.com/5c51504ce900f8000a90a732/Linotype - DIN Next LT Arabic Regular.ttf")
    format("truetype");
}
.home {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.home .overlap-wrapper {
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  height: 2905px;
}

.home .overlap {
  position: relative;
  width: 1448px;
  height: 2905px;
  left: auto  
}

.home .group {
  position: absolute;
  width: 1448px;
  height: 2638px;
  top: 0;
  left: 0;
}

.home .overlap-group {
  position: absolute;
  width: 1438px;
  height: 637px;
  top: 653px;
  left: 550px;
  background-image: url(https://c.animaapp.com/in0BC4Oq/img/rectangle-198.svg);
  background-size: 100% 100%;
}

.home .text-wrapper {
  position: absolute;
  width: 145px;
  top: 352px;
  left: 1188px;
  font-family: "DIN Next LT Arabic-Regular", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 20px;
  line-height: 27.0px;
  letter-spacing: 0;
  direction: rtl;
}

.home .div {
  position: absolute;
  width: 174px;
  top: 352px;
  left: 920px;
  font-family: "Cairo", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 20px;
  line-height: 27.0px;
  letter-spacing: 0;
  direction: rtl;
}

.home .frame {
  display: flex;
  width: 193px;
  height: 52px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 10px;
  position: absolute;
  top: 75px;
  left: 104px;
  background-color: #0056a0;
  border-radius: 100px;
}

.home .text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: #ffffff;
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.home .arrow {
  position: relative;
  width: 24px;
  height: 24px;
}

.home .frame-2 {
  display: flex;
  width: 193px;
  height: 52px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 10px;
  position: absolute;
  top: 75px;
  left: 316px;
  background-color: #ed2126;
  border-radius: 100px;
}

.home .overlap-2 {
  position: absolute;
  width: 261px;
  height: 306px;
  top: 243px;
  left: 475px;
}

.home .image {
  position: absolute;
  width: 236px;
  height: 273px;
  top: 33px;
  left: 0;
}

.home .arrow-outward-wrapper {
  position: absolute;
  width: 64px;
  height: 66px;
  top: 0;
  left: 195px;
  background-color: #0056a0;
  border-radius: 32.11px / 32.89px;
  transform: rotate(-90.00deg);
}

.home .arrow-outward {
  position: absolute;
  width: 31px;
  height: 30px;
  top: 17px;
  left: 17px;
  transform: rotate(90.00deg);
}

.home .img {
  position: absolute;
  width: 43px;
  height: 43px;
  top: 13px;
  left: 207px;
}

.home .image-2 {
  position: absolute;
  width: 335px;
  height: 359px;
  top: 190px;
  left: 104px;
}

.home .layer {
  position: absolute;
  width: 124px;
  height: 41px;
  top: 478px;
  left: 1217px;
  opacity: 0.58;
}

.home .group-wrapper {
  position: absolute;
  width: 520px;
  height: 161px;
  top: 68px;
  left: 813px;
}

.home .element-wrapper {
  position: relative;
  width: 522px;
  height: 161px;
  opacity: 0.8;
}

.home .element {
  position: absolute;
  width: 520px;
  top: 0;
  left: 0;
  font-family: "DIN Next LT Arabic-Regular", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 40px;
  line-height: 54.0px;
  letter-spacing: 0;
  direction: rtl;
}

.home .span {
  font-family: "DIN Next LT Arabic-Regular", Helvetica;
  font-weight: 400;
  color: #0056a0;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 54.0px;
}

.home .text-wrapper-3 {
  font-family: "Cairo", Helvetica;
  font-weight: 700;
}

.home .section {
  left: 1181px;
  position: absolute;
  width: 153px;
  height: 75px;
  top: 275px;
}

.home .text-wrapper-4 {
  position: absolute;
  width: 151px;
  top: 0;
  left: 0;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: #0056a0;
  font-size: 48px;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
}

.home .div-wrapper {
  left: 936px;
  position: absolute;
  width: 153px;
  height: 75px;
  top: 275px;
}

.home .overlap-3 {
  position: absolute;
  width: 100%;
  height: 1110px;
  top: 1528px;
  left: 600px;
}

.home .rectangle {
  width: 100%;
  height: 637px;
  top: 380px;
  background-color: #f7f7f7;
  position: absolute;
  left: 0;
}

.home .frame-wrapper {
  position: absolute;
  width: 1248px;
  height: 1110px;
  top: 0;
  left: 96px;
}

.home .frame-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  top: 472px;
  left: 4px;
}

.home .frame-4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home .text-wrapper-5 {
  position: relative;
  width: fit-content;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--blue-500);
  font-size: var(--body-font-size);
  text-align: left;
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  text-decoration: underline;
  white-space: nowrap;
  direction: rtl;
  font-style: var(--body-font-style);
}

.home .text-wrapper-6 {
  position: relative;
  width: 132px;
  height: 33px;
  margin-top: -1.00px;
  font-family: var(--titlebold-font-family);
  font-weight: var(--titlebold-font-weight);
  color: var(--blue-500);
  font-size: var(--titlebold-font-size);
  letter-spacing: var(--titlebold-letter-spacing);
  line-height: var(--titlebold-line-height);
  white-space: nowrap;
  direction: rtl;
  font-style: var(--titlebold-font-style);
}

.home .frame-5 {
  display: inline-flex;
  align-items: center;
  gap: 31px;
  position: relative;
  flex: 0 0 auto;
}

.home .group-2 {
  position: relative;
  width: 288px;
  height: 393px;
}

.home .group-3 {
  position: relative;
  width: 287px;
  height: 393px;
}

.home .overlap-group-2 {
  position: relative;
  height: 393px;
  border-radius: 8px;
}

.home .frame-6 {
  display: flex;
  flex-direction: column;
  width: 287px;
  height: 393px;
  align-items: center;
  justify-content: flex-end;
  gap: 114px;
  padding: 58px 8px 32px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.home .group-4 {
  position: absolute;
  width: 287px;
  height: 393px;
  top: 0;
  left: 0;
  background-image: url(https://c.animaapp.com/in0BC4Oq/img/image-22@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.home .rectangle-2 {
  width: 287px;
  height: 393px;
  top: 0;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(25, 25, 25, 1) 0%,
    rgba(27, 27, 27, 0.73) 45%,
    rgba(38, 38, 38, 0.4) 100%
  );
  position: absolute;
  left: 0;
}

.home .frame-7 {
  display: flex;
  width: 70px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
}

.home .frame-8 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.home .vector {
  position: relative;
  width: 16px;
  height: 14px;
}

.home .text-wrapper-7 {
  position: relative;
  width: 8px;
  height: 12px;
  font-family: var(--details-bold-font-family);
  font-weight: var(--details-bold-font-weight);
  color: var(--blue-100);
  font-size: var(--details-bold-font-size);
  text-align: right;
  letter-spacing: var(--details-bold-letter-spacing);
  line-height: var(--details-bold-line-height);
  white-space: nowrap;
  font-style: var(--details-bold-font-style);
}

.home .comment {
  position: relative;
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.home .group-5 {
  position: relative;
  width: 15px;
  height: 14px;
  top: 1px;
  left: 1px;
  background-image: url(https://c.animaapp.com/in0BC4Oq/img/vector-1.svg);
  background-size: 100% 100%;
}

.home .p {
  position: relative;
  align-self: stretch;
  font-family: var(--details-bold-font-family);
  font-weight: var(--details-bold-font-weight);
  color: var(--blue-100);
  font-size: var(--details-bold-font-size);
  line-height: var(--details-bold-line-height);
  letter-spacing: var(--details-bold-letter-spacing);
  direction: rtl;
  font-style: var(--details-bold-font-style);
}

.home .instagram {
  position: absolute;
  width: 17px;
  height: 17px;
  top: 8px;
  left: 261px;
  border-radius: 4px;
  background-image: url(https://c.animaapp.com/in0BC4Oq/img/instagram---167-.svg);
  background-size: 100% 100%;
}

.home .overlap-4 {
  position: absolute;
  width: 100%;
  height: 650px;
  top: 0;
  background-image: url(/assets/banner.svg);
  background-size: 100% 100%;
}

.home .frame-9 {
  display: flex;
  flex-direction: column;
  width: 793px;
  height: 133px;
  align-items: flex-end;
  gap: 40px;
  position: absolute;
  top: 325px;
  left: 1020px;
}

.home .text-wrapper-8 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--neutral-0);
  font-size: 37px;
  line-height: 50.0px;
  letter-spacing: 0;
  direction: rtl;
}

.home .frame-10 {
  display: flex;
  width: 180px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: relative;
  flex: 0 0 auto;
  margin-bottom: -8.00px;
  background-color: var(--blue-500);
  border-radius: 16px;
}

.home .vector-wrapper {
  position: relative;
  width: 18px;
  height: 18px;
}

.home .vector-2 {
  position: absolute;
  width: 5px;
  height: 10px;
  top: 4px;
  left: 6px;
}

.home .text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--body-bold-font-size);
  text-align: center;
  line-height: var(--body-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-bold-letter-spacing);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.home .frame-11 {
  position: absolute;
  width: 1248px;
  height: 29px;
  top: 367px;
  left: 94px;
}

.home .element-2 {
  position: absolute;
  width: 287px;
  height: 287px;
  top: 231px;
  left: 800px;
  object-fit: cover;
}

.home .arrow-2 {
  position: absolute;
  width: 47px;
  height: 47px;
  top: 1311px;
  left: 680px;
}

.home .overlap-group-wrapper {
  position: absolute;
  width: 1205px;
  height: 83px;
  top: 49px;
  left: 715px;
}

.home .overlap-5 {
  position: relative;
  height: 83px;
  border-radius: 29px;
}

.home .group-6 {
  position: absolute;
  width: 1205px;
  height: 83px;
  top: 0;
  left: 0;
  background-color: #ffffff0f;
  border-radius: 29px;
  border: 1px solid;
  border-color: #ffffff4a;
  backdrop-filter: blur(6.6px) brightness(100%);
  -webkit-backdrop-filter: blur(6.6px) brightness(100%);
}

.home .logo {
  position: absolute;
  width: 248px;
  height: 48px;
  top: 14px;
  left: 925px;
  background-image: url(https://c.animaapp.com/in0BC4Oq/img/------@2x.png);
  background-size: 100% 100%;
}

.home .group-7 {
  position: absolute;
  width: 176px;
  height: 32px;
  top: 23px;
  left: 53px;
}

.home .frame-12 {
  display: flex;
  width: 120px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.home .text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-bold-font-family);
  font-weight: var(--details-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-bold-font-size);
  text-align: left;
  line-height: var(--details-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--details-bold-letter-spacing);
  direction: rtl;
  font-style: var(--details-bold-font-style);
}

.home .overlap-group-3 {
  position: absolute;
  width: 39px;
  height: 22px;
  top: 4px;
  left: 135px;
}

.home .vector-3 {
  position: absolute;
  width: 9px;
  height: 5px;
  top: 9px;
  left: 27px;
}

.home .text-wrapper-11 {
  position: absolute;
  width: 39px;
  top: 0;
  left: 0;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-0);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
}

.home .navbar {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: absolute;
  top: 32px;
  left: 363px;
}

.home .text-wrapper-12 {
  margin-top: -1.00px;
  font-weight: var(--body-font-weight);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--body-font-family);
  color: var(--neutral-0);
  text-align: left;
  letter-spacing: var(--body-letter-spacing);
  white-space: nowrap;
  direction: rtl;
  font-style: var(--body-font-style);
}

.home .text-wrapper-13 {
  font-weight: var(--body-bold-font-weight);
  font-size: var(--body-bold-font-size);
  line-height: var(--body-bold-line-height);
  position: relative;
  width: fit-content;
  font-family: var(--body-bold-font-family);
  color: var(--blue-100);
  text-align: left;
  letter-spacing: var(--body-bold-letter-spacing);
  white-space: nowrap;
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.home .footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 40px 97px;
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  margin: 40px auto 0 auto;
  width: 100%;
  background-color: var(--blue-500);
}

.home .frame-13 {
  display: flex;
  flex-direction: column;
  height: 245px;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.home .frame-14 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home .frame-15 {
  display: flex;
  width: 652px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.home .frame-16 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.home .group-8 {
  position: relative;
  width: 269px;
  height: 19px;
  margin-right: -2.00px;
}

.home .text-wrapper-14 {
  position: absolute;
  width: 267px;
  top: 0;
  left: 0;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: #ffffff;
  font-size: var(--body-bold-font-size);
  line-height: var(--body-bold-line-height);
  letter-spacing: var(--body-bold-letter-spacing);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.home .frame-17 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home .frame-18 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.home .text-wrapper-15 {
  position: relative;
  width: 135px;
  height: 18px;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.home .mail {
  position: relative;
  width: 14px;
  height: 10px;
}

.home .group-9 {
  position: relative;
  width: 13px;
  height: 9px;
  top: 1px;
  left: 1px;
}

.home .img-wrapper {
  position: relative;
  width: 14px;
  height: 10px;
  background-image: url(https://c.animaapp.com/in0BC4Oq/img/vector-4.svg);
  background-size: 100% 100%;
}

.home .vector-4 {
  position: absolute;
  width: 14px;
  height: 5px;
  top: 1px;
  left: 0;
}

.home .text-wrapper-16 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.home .vector-wrapper-2 {
  position: relative;
  width: 16px;
  height: 16px;
}

.home .vector-5 {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
}

.home .vector-6 {
  position: absolute;
  width: 11px;
  height: 13px;
  top: 1px;
  left: 3px;
}

.home .frame-19 {
  display: flex;
  flex-direction: column;
  width: 89px;
  align-items: flex-end;
  gap: 16px;
  position: relative;
}

.home .group-10 {
  position: relative;
  width: 269px;
  height: 19px;
  margin-left: -178.00px;
  margin-right: -2.00px;
}

.home .text-wrapper-17 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.home .text-wrapper-18 {
  position: relative;
  align-self: stretch;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.home .text-wrapper-19 {
  position: relative;
  width: 119px;
  margin-left: -30.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.home .frame-20 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.home .logo-2 {
  position: relative;
  width: 454px;
  height: 87px;
  background-image: url(https://c.animaapp.com/in0BC4Oq/img/-------1@2x.png);
  background-size: 100% 100%;
}

.home .frame-21 {
  position: relative;
  width: 319px;
  flex: 0 0 auto;
}

.home .frame-22 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.home .line {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-top: -0.50px;
}

.home .text-wrapper-20 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--white);
  font-size: var(--body-font-size);
  text-align: center;
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.home .text-wrapper-21 {
  position: absolute;
  top: 1377px;
  left: 1200px;
  font-family: var(--header-bold-font-family);
  font-weight: var(--header-bold-font-weight);
  color: var(--blue-500);
  font-size: var(--header-bold-font-size);
  text-align: center;
  line-height: var(--header-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--header-bold-letter-spacing);
  direction: rtl;
  font-style: var(--header-bold-font-style);
}

.home .frame-23 {
  position: absolute;
  width: 582px;
  height: 88px;
  top: 1128px;
  left: 1310px;
}

.home .layer-2 {
  position: absolute;
  width: 1096px;
  height: 397px;
  top: 1397px;
  left: 205px;
}
.home .overlap-group-3 {
    cursor: pointer;
    user-select: none;
}

.home .overlap-group-3:hover {
    opacity: 0.8;
}

.home .text-wrapper-11 {
    cursor: pointer;
    user-select: none;
    pointer-events: auto;
}

@media (min-width: 1025) {
.home .group {
  position: relative;
  left: -335px;
}
}

@media (min-width: 1200px) {
.home .group {
  position: relative;
  left: -475px;
}
}/* index_style_responsive.css — additive, low-risk overrides */

/* 1) Mobile fit-canvas centering (works with script.js scaler) */
@media (max-width: 1024px){
  #fit-wrapper{
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    justify-content: center;   /* <-- center the scaled canvas */
  }
  .scale-root{
    width: 100%;             /* your desktop design width */
    transform-origin: top center !important;
    left: 0 !important;         /* kill hacks like left:-40% */
  }
}

/* 2) Instagram/news feed: fluid grid with clean gaps */
#ig-feed{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1199px){ #ig-feed{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px){  #ig-feed{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px){  #ig-feed{ grid-template-columns: 1fr; } }

/* Make cards fill their grid cell */
#ig-feed .social-card,
.frame-5 > div,
.frame-27 > div{
  width: 100% !important;
  height: auto;
}

/* 3) Fluid type for hero + counters (no layout rewrites) */
.home .element,
.home .span{
  font-size: clamp(1.25rem, 1.1rem + 2.2vw, 2.5rem);
  line-height: 1.25;
}
.home .text-wrapper-4{ /* 30M+, 60.5% */
  font-size: clamp(1.5rem, 1.1rem + 2.5vw, 3rem);
}

/* 4) Media never overflow their containers */
img, video{ max-width: 100%; height: auto; }

/* Footer positioning */
/* Footer positioning and internal styling */
.home {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.overlap-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.footer {
  width: 100%;
  background-color: #0056A0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 40px 97px;
}

.footer .frame-13 {
  display: flex;
  flex-direction: column;
  height: 245px;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.footer .frame-14 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}

.footer .frame-15 {
  display: flex;
  width: 652px;
  align-items: flex-start;
  justify-content: space-between;
}

.footer .frame-16 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
}

.footer .text-wrapper-14 {
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: #ffffff;
  font-size: var(--body-bold-font-size);
  line-height: var(--body-bold-line-height);
  direction: rtl;
  position: relative;
  font-style: var(--header-bold-font-style);
  letter-spacing: var(--header-bold-letter-spacing);

}

.footer .frame-17 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
}

.footer .frame-18 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.footer .text-wrapper-15,
.footer .text-wrapper-16,
.footer .text-wrapper-17,
.footer .text-wrapper-18,
.footer .text-wrapper-19 {
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  direction: rtl;
}

.footer .frame-19 {
  display: flex;
  flex-direction: column;
  width: 89px;
  align-items: flex-end;
  gap: 16px;
}

.footer .frame-20 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.footer .logo-2 {
  width: 454px;
  height: 87px;
  background: url('https://c.animaapp.com/1lwzhgBv/img/------@2x.png') center/contain no-repeat;
  background-size: 100% 100%;
}

.footer .frame-22 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
}

.footer .text-wrapper-20 {
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: #ffffff;
  font-size: var(--body-font-size);
  text-align: center;
  line-height: var(--body-line-height);
  direction: rtl;
}

.footer .div-wrapper {
  position: relative;
  width: 269px;
  height: 19px;
  margin-left: -178.00px;
  margin-right: -2.00px;
}

.social-icons-container {
  display: flex;
  gap: 16px;
  align-items: center;
}

.social-icons-container img {
  width: 24px;
  height: 24px;
  transition: opacity 0.2s;
}

.social-icons-container img:hover {
  opacity: 0.8;
}

/* 5) Navbar wraps nicely on small screens */
@media (max-width: 768px){
  .navbar{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
}

/* 6) Partners strip: smaller logos & slower on phones (visual only) */
@media (max-width: 768px){
  .partners-stri{ --marquee-duration: 60s; } /* slower */
  .partners-stri img{ height: 56px; }
}
:root {
  --blue-100: rgba(255, 255, 255, 1);
  --blue-200: rgba(205, 206, 229, 1);
  --blue-300: rgba(114, 134, 188, 1);
  --blue-400: rgba(73, 108, 173, 1);
  --blue-500: rgba(0, 86, 160, 1);
  --red-400: rgba(241, 92, 66, 1);
  --red-500: rgba(237, 33, 38, 1);
  --heavenly-500: rgba(50, 177, 230, 1);
  --green-300: rgba(119, 192, 67, 1);
  --neutral-0: rgba(255, 255, 255, 1);
  --neutral-100: rgba(247, 247, 247, 1);
  --neutral-200: rgba(209, 211, 213, 1);
  --neutral-300: rgba(153, 158, 161, 1);
  --neutral-400: rgba(117, 117, 117, 1);
  --neutral-500: rgba(75, 75, 75, 1);
  --neutral-900: rgba(27, 27, 27, 1);
  --white: rgba(255, 255, 255, 1);
  --header-font-family: "Cairo", Helvetica;
  --header-font-weight: 400;
  --header-font-size: 31px;
  --header-letter-spacing: 0px;
  --header-line-height: 120.00000476837158%;
  --header-font-style: normal;
  --header-bold-font-family: "Cairo", Helvetica;
  --header-bold-font-weight: 700;
  --header-bold-font-size: 31px;
  --header-bold-letter-spacing: 0px;
  --header-bold-line-height: 120.00000476837158%;
  --header-bold-font-style: normal;
  --title-font-family: "Cairo", Helvetica;
  --title-font-weight: 400;
  --title-font-size: 25px;
  --title-letter-spacing: 0px;
  --title-line-height: 120.00000476837158%;
  --title-font-style: normal;
  --titlebold-font-family: "Cairo", Helvetica;
  --titlebold-font-weight: 700;
  --titlebold-font-size: 25px;
  --titlebold-letter-spacing: 0px;
  --titlebold-line-height: 120.00000476837158%;
  --titlebold-font-style: normal;
  --sub-title-font-family: "Cairo", Helvetica;
  --sub-title-font-weight: 400;
  --sub-title-font-size: 20px;
  --sub-title-letter-spacing: 0px;
  --sub-title-line-height: 120.00000476837158%;
  --sub-title-font-style: normal;
  --sub-bold-font-family: "Cairo", Helvetica;
  --sub-bold-font-weight: 700;
  --sub-bold-font-size: 20px;
  --sub-bold-letter-spacing: 0px;
  --sub-bold-line-height: 120.00000476837158%;
  --sub-bold-font-style: normal;
  --body-font-family: "Cairo", Helvetica;
  --body-font-weight: 400;
  --body-font-size: 18px;
  --body-letter-spacing: 0px;
  --body-line-height: 120.00000476837158%;
  --body-font-style: normal;
  --body-bold-font-family: "Cairo", Helvetica;
  --body-bold-font-weight: 700;
  --body-bold-font-size: 16px;
  --body-bold-letter-spacing: 0px;
  --body-bold-line-height: 120.00000476837158%;
  --body-bold-font-style: normal;
  --details-font-family: "Cairo", Helvetica;
  --details-font-weight: 400;
  --details-font-size: 13px;
  --details-letter-spacing: 0px;
  --details-line-height: 120.00000476837158%;
  --details-font-style: normal;
  --details-bold-font-family: "Cairo", Helvetica;
  --details-bold-font-weight: 700;
  --details-bold-font-size: 13px;
  --details-bold-letter-spacing: 0px;
  --details-bold-line-height: 120.00000476837158%;
  --details-bold-font-style: normal;
  --caption-font-family: "Cairo", Helvetica;
  --caption-font-weight: 400;
  --caption-font-size: 10px;
  --caption-letter-spacing: 0px;
  --caption-line-height: 120.00000476837158%;
  --caption-font-style: normal;
  --caption-bold-font-family: "Cairo", Helvetica;
  --caption-bold-font-weight: 700;
  --caption-bold-font-size: 10px;
  --caption-bold-letter-spacing: 0px;
  --caption-bold-line-height: 120.00000476837158%;
  --caption-bold-font-style: normal;
  --drop-shadow: 0px 5px 10px 0px rgba(36, 36, 36, 0.2);
}
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Cairo:var(--body-font-weight),var(--details-bold-font-weight),var(--sub-bold-font-weight),var(--header-bold-font-weight),var(--details-font-weight),700,var(--body-bold-font-weight)");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
.join-us {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.join-us .div {
  background-color: #ffffff;
  width: 100%;
  height: 1384px;
  position: relative;
}

.join-us .footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  gap: 10px;
  padding: 40px 97px;
  position: absolute;
  top: 1057px;
  left: 0;
  background-color: var(--blue-500);
}

.join-us .frame {
  display: flex;
  flex-direction: column;
  height: 245px;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.join-us .frame-2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us .frame-3 {
  display: flex;
  width: 652px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.join-us .frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .group {
  position: relative;
  width: 269px;
  height: 19px;
  margin-right: -2.00px;
}

.join-us .text-wrapper {
  position: absolute;
  width: 267px;
  top: 0;
  left: 0;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: #ffffff;
  font-size: var(--body-bold-font-size);
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.join-us .frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us .frame-6 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .text-wrapper-2 {
  position: relative;
  width: 135px;
  height: 18px;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.join-us .mail {
  position: relative;
  width: 14px;
  height: 10px;
}

.join-us .overlap-group-wrapper {
  position: relative;
  width: 13px;
  height: 9px;
  top: 1px;
  left: 1px;
}

.join-us .overlap-group {
  position: relative;
  width: 14px;
  height: 10px;
  background-image: url(https://c.animaapp.com/HeuRXgjs/img/vector.svg);
  background-size: 100% 100%;
}

.join-us .vector {
  position: absolute;
  width: 14px;
  height: 5px;
  top: 1px;
  left: 0;
}

.join-us .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.join-us .vector-wrapper {
  position: relative;
  width: 16px;
  height: 16px;
}

.join-us .img {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
}

.join-us .vector-2 {
  position: absolute;
  width: 11px;
  height: 13px;
  top: 1px;
  left: 3px;
}

.join-us .frame-7 {
  display: flex;
  flex-direction: column;
  width: 89px;
  align-items: flex-end;
  gap: 16px;
  position: relative;
}

.join-us .div-wrapper {
  position: relative;
  width: 269px;
  height: 19px;
  margin-left: -178.00px;
  margin-right: -2.00px;
}

.join-us .text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  direction: rtl;
  font-style: var(--details-font-style);
}

.join-us .text-wrapper-5 {
  align-self: stretch;
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  position: relative;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.join-us .text-wrapper-6 {
  width: 119px;
  margin-left: -30.00px;
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  position: relative;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.join-us .frame-8 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .logo {
  position: relative;
  width: 454px;
  height: 87px;
  background-image: url(https://c.animaapp.com/HeuRXgjs/img/------@2x.png);
  background-size: 100% 100%;
}

.join-us .p {
  width: 341px;
  font-weight: var(--details-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  position: relative;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.join-us .frame-9 {
  position: relative;
  width: 319px;
  flex: 0 0 auto;
}

.join-us .frame-10 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.join-us .line {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-top: -0.50px;
}

.join-us .text-wrapper-7 {
  align-self: stretch;
  font-weight: var(--body-font-weight);
  color: #ffffff;
  font-size: var(--body-font-size);
  text-align: center;
  line-height: var(--body-line-height);
  position: relative;
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.join-us .frame-11 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 116px;
  left: 1211px;
}

.join-us .frame-12 {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .text-wrapper-8 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--details-font-weight);
  color: var(--neutral-300);
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.join-us .frame-13 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .vector-3 {
  position: absolute;
  width: 5px;
  height: 9px;
  top: 4px;
  left: 5px;
}

.join-us .text-wrapper-9 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--details-font-weight);
  color: var(--neutral-500);
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.join-us .overlap {
  position: absolute;
  width: 1237px;
  height: 758px;
  top: 200px;
  left: 107px;
}

.join-us .frame-wrapper {
  position: absolute;
  width: 1237px;
  height: 758px;
  top: 0;
  left: 0;
}

.join-us .frame-14 {
  display: flex;
  width: 1237px;
  height: 758px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 32px;
  position: relative;
  background-color: #00559e;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--main-shadows);
}

.join-us .untitled-recovered {
  position: relative;
  width: 218.3px;
  height: 185px;
}

.join-us .frame-15 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .text-wrapper-10 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--header-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--header-bold-font-size);
  text-align: left;
  line-height: var(--header-bold-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--header-bold-font-family);
  letter-spacing: var(--header-bold-letter-spacing);
  direction: rtl;
  font-style: var(--header-bold-font-style);
}

.join-us .frame-16 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .frame-17 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 17px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .frame-18 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .frame-19 {
  display: flex;
  flex-direction: column;
  width: 335px;
  align-items: flex-end;
  gap: 8px;
  position: relative;
}

.join-us .text-wrapper-11 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--body-font-weight);
  color: var(--neutral-0);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.join-us .frame-20 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.join-us .text-wrapper-12 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--details-font-weight);
  color: #757575;
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.join-us .frame-21 {
  display: inline-flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #757575;
  font-size: var(--details-font-size);
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.join-us .frame-22 {
  display: flex;
  flex-direction: column;
  width: 702px;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .frame-23 {
  display: flex;
  flex-direction: column;
  width: 702px;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .text-wrapper-14 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: 700;
  color: var(--white);
  font-size: 23px;
  line-height: 27.6px;
  white-space: nowrap;
  position: relative;
  font-family: "Cairo", Helvetica;
  letter-spacing: 0;
  direction: rtl;
}

.join-us .frame-24 {
  display: flex;
  width: 311px;
  height: 49px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 21px 37px;
  position: relative;
  background-color: #51c4f1;
  border-radius: 8px;
  overflow: hidden;
}

.join-us .group-2 {
  position: relative;
  width: 16px;
  height: 16px;
  margin-top: -4.50px;
  margin-bottom: -4.50px;
}

.join-us .overlap-group-2 {
  position: relative;
  width: 18px;
  height: 18px;
  top: -1px;
  left: -1px;
}

.join-us .vector-4 {
  position: absolute;
  width: 18px;
  height: 9px;
  top: 9px;
  left: 0;
}

.join-us .vector-5 {
  position: absolute;
  width: 11px;
  height: 14px;
  top: 0;
  left: 3px;
}

.join-us .text-wrapper-15 {
  position: relative;
  width: fit-content;
  margin-top: -9.50px;
  margin-bottom: -7.50px;
  font-family: var(--sub-bold-font-family);
  font-weight: var(--sub-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--sub-bold-font-size);
  text-align: right;
  letter-spacing: var(--sub-bold-letter-spacing);
  line-height: var(--sub-bold-line-height);
  white-space: nowrap;
  font-style: var(--sub-bold-font-style);
}

.join-us .frame-25 {
  display: flex;
  height: 186px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.join-us .rectangle {
  position: absolute;
  width: 465px;
  height: 758px;
  top: 0;
  left: 1px;
  object-fit: cover;
}

.join-us .header {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 42px 96px 16px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fcfcff;
  box-shadow: var(--drop-shadow-100);
}

.join-us .frame-26 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 1;
  flex-grow: 1;
  margin-top: -3.00px;
  margin-bottom: -3.00px;
}

.join-us .frame-27 {
  display: flex;
  width: 120px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.join-us .text-wrapper-16 {
  width: 104px;
  height: 20px;
  margin-top: -1.00px;
  font-weight: var(--details-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-bold-font-size);
  text-align: left;
  line-height: var(--details-bold-line-height);
  position: relative;
  font-family: var(--details-bold-font-family);
  letter-spacing: var(--details-bold-letter-spacing);
  direction: rtl;
  font-style: var(--details-bold-font-style);
}

.join-us .frame-28 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 2px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .frame-29 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .text-wrapper-17 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  white-space: nowrap;
  font-style: var(--body-font-style);
}

.join-us .arrow {
  position: relative;
  width: 16px;
  height: 16px;
  transform: rotate(-90.00deg);
}

.join-us .vector-6 {
  position: absolute;
  width: 9px;
  height: 5px;
  top: 6px;
  left: 3px;
  transform: rotate(90.00deg);
}

.join-us .frame-30 {
  display: flex;
  width: 906px;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.join-us .frame-31 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 21px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .frame-32 {
  display: flex;
  width: 110px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
}

.join-us .text-wrapper-18 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--body-font-weight);
  color: var(--blue-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.join-us .frame-32,
.join-us .frame-33,
.join-us .frame-34,
.join-us .frame-36,
.join-us .frame-37,
.join-us .frame-38 {
  position: relative;
}

.join-us .active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.join-us .frame-33 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
  flex: 0 0 auto;
}

.join-us .text-wrapper-19 {
  width: 95px;
  height: 21px;
  margin-top: -1.00px;
  font-weight: var(--body-bold-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-bold-font-size);
  text-align: left;
  line-height: var(--body-bold-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--body-bold-font-family);
  letter-spacing: var(--body-bold-letter-spacing);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.join-us .frame-34 {
  display: flex;
  flex-direction: column;
  width: 83px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
}

.join-us .frame-35 {
  display: inline-flex;
  height: 21px;
  align-items: center;
  gap: 8px;
  position: relative;
}

.join-us .text-wrapper-20 {
  width: 62px;
  height: 21px;
  margin-top: -1.00px;
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.join-us .frame-36 {
  display: flex;
  width: 59px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
}

.join-us .text-wrapper-21 {
  width: 96px;
  height: 28px;
  margin-top: -1.00px;
  margin-left: -18.50px;
  margin-right: -18.50px;
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  position: relative;
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.join-us .frame-37 {
  display: flex;
  width: 61px;
  height: 39px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
}

.join-us .text-wrapper-22 {
  width: 83px;
  height: 24px;
  margin-top: -1.50px;
  margin-left: -11.00px;
  margin-right: -11.00px;
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.join-us .frame-38 {
  display: flex;
  width: 57px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
}

.join-us .text-wrapper-23 {
  width: 77px;
  height: 17px;
  margin-top: -1.00px;
  margin-left: -10.00px;
  margin-right: -10.00px;
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  position: relative;
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.join-us .untitled {
  position: relative;
  width: 279px;
  height: 42px;
  object-fit: cover;
}
:root {
  --blue-100: rgba(255, 255, 255, 1);
  --blue-200: rgba(205, 206, 229, 1);
  --blue-300: rgba(114, 134, 188, 1);
  --blue-400: rgba(73, 108, 173, 1);
  --blue-500: rgba(0, 86, 160, 1);
  --red-400: rgba(241, 92, 66, 1);
  --red-500: rgba(237, 33, 38, 1);
  --heavenly-500: rgba(50, 177, 230, 1);
  --green-300: rgba(119, 192, 67, 1);
  --neutral-0: rgba(255, 255, 255, 1);
  --neutral-100: rgba(247, 247, 247, 1);
  --neutral-200: rgba(209, 211, 213, 1);
  --neutral-300: rgba(153, 158, 161, 1);
  --neutral-400: rgba(117, 117, 117, 1);
  --neutral-500: rgba(75, 75, 75, 1);
  --neutral-900: rgba(27, 27, 27, 1);
  --white: rgba(255, 255, 255, 1);
  --header-font-family: "Cairo", Helvetica;
  --header-font-weight: 400;
  --header-font-size: 31px;
  --header-letter-spacing: 0px;
  --header-line-height: 120.00000476837158%;
  --header-font-style: normal;
  --header-bold-font-family: "Cairo", Helvetica;
  --header-bold-font-weight: 700;
  --header-bold-font-size: 31px;
  --header-bold-letter-spacing: 0px;
  --header-bold-line-height: 120.00000476837158%;
  --header-bold-font-style: normal;
  --title-font-family: "Cairo", Helvetica;
  --title-font-weight: 400;
  --title-font-size: 25px;
  --title-letter-spacing: 0px;
  --title-line-height: 120.00000476837158%;
  --title-font-style: normal;
  --titlebold-font-family: "Cairo", Helvetica;
  --titlebold-font-weight: 700;
  --titlebold-font-size: 25px;
  --titlebold-letter-spacing: 0px;
  --titlebold-line-height: 120.00000476837158%;
  --titlebold-font-style: normal;
  --sub-title-font-family: "Cairo", Helvetica;
  --sub-title-font-weight: 400;
  --sub-title-font-size: 20px;
  --sub-title-letter-spacing: 0px;
  --sub-title-line-height: 120.00000476837158%;
  --sub-title-font-style: normal;
  --sub-bold-font-family: "Cairo", Helvetica;
  --sub-bold-font-weight: 700;
  --sub-bold-font-size: 20px;
  --sub-bold-letter-spacing: 0px;
  --sub-bold-line-height: 120.00000476837158%;
  --sub-bold-font-style: normal;
  --body-font-family: "Cairo", Helvetica;
  --body-font-weight: 400;
  --body-font-size: 18px;
  --body-letter-spacing: 0px;
  --body-line-height: 120.00000476837158%;
  --body-font-style: normal;
  --body-bold-font-family: "Cairo", Helvetica;
  --body-bold-font-weight: 700;
  --body-bold-font-size: 16px;
  --body-bold-letter-spacing: 0px;
  --body-bold-line-height: 120.00000476837158%;
  --body-bold-font-style: normal;
  --details-font-family: "Cairo", Helvetica;
  --details-font-weight: 400;
  --details-font-size: 13px;
  --details-letter-spacing: 0px;
  --details-line-height: 120.00000476837158%;
  --details-font-style: normal;
  --details-bold-font-family: "Cairo", Helvetica;
  --details-bold-font-weight: 700;
  --details-bold-font-size: 13px;
  --details-bold-letter-spacing: 0px;
  --details-bold-line-height: 120.00000476837158%;
  --details-bold-font-style: normal;
  --caption-font-family: "Cairo", Helvetica;
  --caption-font-weight: 400;
  --caption-font-size: 10px;
  --caption-letter-spacing: 0px;
  --caption-line-height: 120.00000476837158%;
  --caption-font-style: normal;
  --caption-bold-font-family: "Cairo", Helvetica;
  --caption-bold-font-weight: 700;
  --caption-bold-font-size: 10px;
  --caption-bold-letter-spacing: 0px;
  --caption-bold-line-height: 120.00000476837158%;
  --caption-bold-font-style: normal;
  --drop-shadow: 0px 5px 10px 0px rgba(36, 36, 36, 0.2);
  --drop-shadow-100: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
  --main-shadows: 0px 8px 35px 0px rgba(106, 162, 203, 0.15);
}
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Cairo:var(--body-font-weight),var(--sub-title-font-weight),var(--details-bold-font-weight),var(--header-bold-font-weight),var(--details-font-weight),var(--body-bold-font-weight)");
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
html,
body {
  margin: 0px;
  height: 100%;
}
/* a blue color as a generic focus style */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}
.news {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.news .div {
  background-color: #ffffff;
  width: 100%;
  height: 1962px;
  position: relative;
}

.news .footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  gap: 10px;
  padding: 40px 97px;
  position: absolute;
  top: 1635px;
  left: 0;
  background-color: var(--blue-500);
}

.news .frame {
  display: flex;
  flex-direction: column;
  height: 245px;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.news .frame-2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.news .frame-3 {
  display: flex;
  width: 652px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.news .frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.news .group {
  position: relative;
  width: 269px;
  height: 19px;
  margin-right: -2.00px;
}

.news .text-wrapper {
  position: absolute;
  width: 267px;
  top: 0;
  left: 0;
  font-weight: var(--body-bold-font-weight);
  color: #ffffff;
  font-size: var(--body-bold-font-size);
  line-height: var(--body-bold-line-height);
  font-family: var(--body-bold-font-family);
  letter-spacing: var(--body-bold-letter-spacing);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.news .frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.news .frame-6 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.news .text-wrapper-2 {
  position: relative;
  width: 135px;
  height: 18px;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.news .mail {
  position: relative;
  width: 14px;
  height: 10px;
}

.news .overlap-group-wrapper {
  position: relative;
  width: 13px;
  height: 9px;
  top: 1px;
  left: 1px;
}

.news .overlap-group {
  position: relative;
  width: 14px;
  height: 10px;
  background-image: url(https://c.animaapp.com/gXlZRcOm/img/vector.svg);
  background-size: 100% 100%;
}

.news .vector {
  position: absolute;
  width: 14px;
  height: 5px;
  top: 1px;
  left: 0;
}

.news .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.news .vector-wrapper {
  position: relative;
  width: 16px;
  height: 16px;
}

.news .img {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
}

.news .vector-2 {
  position: absolute;
  width: 11px;
  height: 13px;
  top: 1px;
  left: 3px;
}

.news .frame-7 {
  display: flex;
  flex-direction: column;
  width: 89px;
  align-items: flex-end;
  gap: 16px;
  position: relative;
}

.news .div-wrapper {
  position: relative;
  width: 269px;
  height: 19px;
  margin-left: -178.00px;
  margin-right: -2.00px;
}

.news .text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.news .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.news .text-wrapper-6 {
  position: relative;
  width: 119px;
  margin-left: -30.00px;
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.news .frame-8 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.news .logo {
  position: relative;
  width: 454px;
  height: 87px;
  background-image: url(https://c.animaapp.com/gXlZRcOm/img/------@2x.png);
  background-size: 100% 100%;
}

.news .p {
  position: relative;
  width: 341px;
  font-weight: var(--details-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.news .frame-9 {
  position: relative;
  width: 319px;
  flex: 0 0 auto;
}

.news .frame-10 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.news .line {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-top: -0.50px;
}

.news .text-wrapper-7 {
  position: relative;
  align-self: stretch;
  font-weight: var(--body-font-weight);
  color: var(--white);
  font-size: var(--body-font-size);
  text-align: center;
  line-height: var(--body-line-height);
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.news .frame-11 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 116px;
  left: 1238px;
}

.news .frame-12 {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  position: relative;
  flex: 0 0 auto;
}

.news .text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--details-font-weight);
  color: var(--neutral-300);
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.news .frame-13 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.news .vector-3 {
  position: absolute;
  width: 5px;
  height: 9px;
  top: 4px;
  left: 5px;
}

.news .text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--details-font-weight);
  color: var(--neutral-500);
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-family: var(--details-font-family);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.news .header {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 42px 96px 16px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fcfcff;
  box-shadow: var(--drop-shadow-100);
}

.news .frame-14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 1;
  flex-grow: 1;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
}

.news .frame-15 {
  display: flex;
  width: 120px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.news .text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--details-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-bold-font-size);
  text-align: left;
  line-height: var(--details-bold-line-height);
  white-space: nowrap;
  font-family: var(--details-bold-font-family);
  letter-spacing: var(--details-bold-letter-spacing);
  direction: rtl;
  font-style: var(--details-bold-font-style);
}

.news .frame-16 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.news .frame-17 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.news .text-wrapper-11 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  white-space: nowrap;
  font-style: var(--body-font-style);
}

.news .arrow {
  transform: rotate(-90.00deg);
  position: relative;
  width: 16px;
  height: 16px;
}

.news .vector-4 {
  position: absolute;
  width: 9px;
  height: 5px;
  top: 6px;
  left: 3px;
  transform: rotate(90.00deg);
}

.news .frame-18 {
  display: flex;
  width: 906px;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.news .frame-19 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.news .frame-20 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
  flex: 0 0 auto;
}

.news .text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.news .frame-21 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
  flex: 0 0 auto;
}

.news .frame-22 {
  display: inline-flex;
  height: 21px;
  align-items: center;
  gap: 8px;
  position: relative;
}

.news .text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1.50px;
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  font-family: var(--body-font-family);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.news .text-wrapper-14 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-weight: var(--body-bold-font-weight);
  color: var(--blue-500);
  font-size: var(--body-bold-font-size);
  text-align: left;
  line-height: var(--body-bold-line-height);
  white-space: nowrap;
  font-family: var(--body-bold-font-family);
  letter-spacing: var(--body-bold-letter-spacing);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.news .rectangle {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 3px;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.news .frame-23 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
  flex: 0 0 auto;
}

.news .frame-24 {
  display: flex;
  width: 57px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
}

.news .untitled {
  position: relative;
  width: 279px;
  height: 42px;
  object-fit: cover;
}

.news .frame-25 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: absolute;
  top: 150px;
  left: 1045px;
}

.news .group-2 {
  position: relative;
  width: 328px;
  height: 37px;
  margin-right: -2.00px;
}

.news .text-wrapper-15 {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: var(--header-bold-font-weight);
  color: var(--blue-500);
  font-size: var(--header-bold-font-size);
  text-align: center;
  line-height: var(--header-bold-line-height);
  white-space: nowrap;
  font-family: var(--header-bold-font-family);
  letter-spacing: var(--header-bold-letter-spacing);
  direction: rtl;
  font-style: var(--header-bold-font-style);
}

.news .text-wrapper-16 {
  position: absolute;
  top: 50px;
  left: 141px;
  width: fit-content;
  font-weight: var(--sub-title-font-weight);
  color: var(--neutral-500);
  font-size: var(--sub-title-font-size);
  text-align: left;
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  font-family: var(--sub-title-font-family);
  letter-spacing: var(--sub-title-letter-spacing);
  direction: rtl;
  font-style: var(--sub-title-font-style);
}

.news .frame-26 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: absolute;
  top: 277px;
  left: 96px;
}

.news .frame-27 {
  display: inline-flex;
  align-items: center;
  gap: 31px;
  position: relative;
  flex: 0 0 auto;
}

.news .group-3 {
  position: relative;
  width: 288px;
  height: 393px;
}

.news .group-4 {
  position: relative;
  width: 287px;
  height: 393px;
}

.news .overlap-group-2 {
  position: relative;
  height: 393px;
  border-radius: 8px;
}

.news .frame-28 {
  display: flex;
  flex-direction: column;
  width: 287px;
  height: 393px;
  align-items: center;
  justify-content: flex-end;
  gap: 114px;
  padding: 58px 8px 32px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}

.news .group-5 {
  position: absolute;
  width: 287px;
  height: 393px;
  top: 0;
  left: 0;
  background-image: url(https://c.animaapp.com/gXlZRcOm/img/image-22-2@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.news .rectangle-2 {
  position: absolute;
  width: 287px;
  height: 393px;
  top: 0;
  left: 0;
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    rgba(25, 25, 25, 1) 0%,
    rgba(27, 27, 27, 0.73) 45%,
    rgba(38, 38, 38, 0.4) 100%
  );
}

.news .frame-29 {
  display: flex;
  width: 70px;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
}

.news .vector-5 {
  position: relative;
  width: 16px;
  height: 14px;
}

.news .text-wrapper-17 {
  position: relative;
  width: 8px;
  height: 12px;
  font-family: var(--details-bold-font-family);
  font-weight: var(--details-bold-font-weight);
  color: var(--blue-100);
  font-size: var(--details-bold-font-size);
  text-align: right;
  letter-spacing: var(--details-bold-letter-spacing);
  line-height: var(--details-bold-line-height);
  white-space: nowrap;
  font-style: var(--details-bold-font-style);
}

.news .comment {
  position: relative;
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}

.news .group-6 {
  position: relative;
  width: 15px;
  height: 14px;
  top: 1px;
  left: 1px;
  background-image: url(https://c.animaapp.com/gXlZRcOm/img/vector-7.svg);
  background-size: 100% 100%;
}

.news .text-wrapper-18 {
  position: relative;
  align-self: stretch;
  font-family: var(--details-bold-font-family);
  font-weight: var(--details-bold-font-weight);
  color: var(--blue-100);
  font-size: var(--details-bold-font-size);
  letter-spacing: var(--details-bold-letter-spacing);
  line-height: var(--details-bold-line-height);
  direction: rtl;
  font-style: var(--details-bold-font-style);
}

.news .instagram {
  position: absolute;
  width: 17px;
  height: 17px;
  top: 8px;
  left: 261px;
  border-radius: 4px;
  background-image: url(https://c.animaapp.com/gXlZRcOm/img/instagram---167--2.svg);
  background-size: 100% 100%;
}

.news .group-7 {
  position: relative;
  width: 15px;
  height: 14px;
  top: 1px;
  left: 1px;
  background-image: url(https://c.animaapp.com/gXlZRcOm/img/vector-11.svg);
  background-size: 100% 100%;
}
:root {
  --blue-100: rgba(255, 255, 255, 1);
  --blue-200: rgba(205, 206, 229, 1);
  --blue-300: rgba(114, 134, 188, 1);
  --blue-400: rgba(73, 108, 173, 1);
  --blue-500: rgba(0, 86, 160, 1);
  --red-400: rgba(241, 92, 66, 1);
  --red-500: rgba(237, 33, 38, 1);
  --heavenly-500: rgba(50, 177, 230, 1);
  --green-300: rgba(119, 192, 67, 1);
  --neutral-0: rgba(255, 255, 255, 1);
  --neutral-100: rgba(247, 247, 247, 1);
  --neutral-200: rgba(209, 211, 213, 1);
  --neutral-300: rgba(153, 158, 161, 1);
  --neutral-400: rgba(117, 117, 117, 1);
  --neutral-500: rgba(75, 75, 75, 1);
  --neutral-900: rgba(27, 27, 27, 1);
  --white: rgba(255, 255, 255, 1);
  --header-font-family: "Cairo", Helvetica;
  --header-font-weight: 400;
  --header-font-size: 31px;
  --header-letter-spacing: 0px;
  --header-line-height: 120.00000476837158%;
  --header-font-style: normal;
  --header-bold-font-family: "Cairo", Helvetica;
  --header-bold-font-weight: 700;
  --header-bold-font-size: 31px;
  --header-bold-letter-spacing: 0px;
  --header-bold-line-height: 120.00000476837158%;
  --header-bold-font-style: normal;
  --title-font-family: "Cairo", Helvetica;
  --title-font-weight: 400;
  --title-font-size: 25px;
  --title-letter-spacing: 0px;
  --title-line-height: 120.00000476837158%;
  --title-font-style: normal;
  --titlebold-font-family: "Cairo", Helvetica;
  --titlebold-font-weight: 700;
  --titlebold-font-size: 25px;
  --titlebold-letter-spacing: 0px;
  --titlebold-line-height: 120.00000476837158%;
  --titlebold-font-style: normal;
  --sub-title-font-family: "Cairo", Helvetica;
  --sub-title-font-weight: 400;
  --sub-title-font-size: 20px;
  --sub-title-letter-spacing: 0px;
  --sub-title-line-height: 120.00000476837158%;
  --sub-title-font-style: normal;
  --sub-bold-font-family: "Cairo", Helvetica;
  --sub-bold-font-weight: 700;
  --sub-bold-font-size: 20px;
  --sub-bold-letter-spacing: 0px;
  --sub-bold-line-height: 120.00000476837158%;
  --sub-bold-font-style: normal;
  --body-font-family: "Cairo", Helvetica;
  --body-font-weight: 400;
  --body-font-size: 18px;
  --body-letter-spacing: 0px;
  --body-line-height: 120.00000476837158%;
  --body-font-style: normal;
  --body-bold-font-family: "Cairo", Helvetica;
  --body-bold-font-weight: 700;
  --body-bold-font-size: 16px;
  --body-bold-letter-spacing: 0px;
  --body-bold-line-height: 120.00000476837158%;
  --body-bold-font-style: normal;
  --details-font-family: "Cairo", Helvetica;
  --details-font-weight: 400;
  --details-font-size: 13px;
  --details-letter-spacing: 0px;
  --details-line-height: 120.00000476837158%;
  --details-font-style: normal;
  --details-bold-font-family: "Cairo", Helvetica;
  --details-bold-font-weight: 700;
  --details-bold-font-size: 13px;
  --details-bold-letter-spacing: 0px;
  --details-bold-line-height: 120.00000476837158%;
  --details-bold-font-style: normal;
  --caption-font-family: "Cairo", Helvetica;
  --caption-font-weight: 400;
  --caption-font-size: 10px;
  --caption-letter-spacing: 0px;
  --caption-line-height: 120.00000476837158%;
  --caption-font-style: normal;
  --caption-bold-font-family: "Cairo", Helvetica;
  --caption-bold-font-weight: 700;
  --caption-bold-font-size: 10px;
  --caption-bold-letter-spacing: 0px;
  --caption-bold-line-height: 120.00000476837158%;
  --caption-bold-font-style: normal;
  --drop-shadow: 0px 5px 10px 0px rgba(36, 36, 36, 0.2);
  --drop-shadow-100: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
}
.prouducts {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.prouducts .div {
  background-color: #ffffff;
  overflow: hidden;
  width: 100%;
  height: 2627px;
  position: relative;
}

.prouducts .footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  gap: 10px;
  padding: 40px 97px;
  position: absolute;
  top: 2300px;
  left: 0;
  background-color: var(--blue-500);
}

.prouducts .frame {
  display: flex;
  flex-direction: column;
  height: 245px;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.prouducts .frame-2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.prouducts .frame-3 {
  display: flex;
  width: 652px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}

.prouducts .frame-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .group {
  position: relative;
  width: 269px;
  height: 19px;
  margin-right: -2.00px;
}

.prouducts .text-wrapper {
  position: absolute;
  width: 267px;
  top: 0;
  left: 0;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: #ffffff;
  font-size: var(--body-bold-font-size);
  line-height: var(--body-bold-line-height);
  letter-spacing: var(--body-bold-letter-spacing);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.prouducts .frame-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.prouducts .frame-6 {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .text-wrapper-2 {
  position: relative;
  width: 135px;
  height: 18px;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.prouducts .mail {
  position: relative;
  width: 14px;
  height: 10px;
}

.prouducts .overlap-group-wrapper {
  position: relative;
  width: 13px;
  height: 9px;
  top: 1px;
  left: 1px;
}

.prouducts .overlap-group {
  position: relative;
  width: 14px;
  height: 10px;
  background-image: url(https://c.animaapp.com/ukyvrevr/img/vector.svg);
  background-size: 100% 100%;
}

.prouducts .vector {
  position: absolute;
  width: 14px;
  height: 5px;
  top: 1px;
  left: 0;
}

.prouducts .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  white-space: nowrap;
  font-style: var(--details-font-style);
}

.prouducts .vector-wrapper {
  position: relative;
  width: 16px;
  height: 16px;
}

.prouducts .img {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  left: 2px;
}

.prouducts .vector-2 {
  position: absolute;
  width: 11px;
  height: 13px;
  top: 1px;
  left: 3px;
}

.prouducts .frame-7 {
  display: flex;
  flex-direction: column;
  width: 89px;
  align-items: flex-end;
  gap: 16px;
  position: relative;
}

.prouducts .div-wrapper {
  position: relative;
  width: 269px;
  height: 19px;
  margin-left: -178.00px;
  margin-right: -2.00px;
}

.prouducts .text-wrapper-4 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  direction: rtl;
  font-style: var(--details-font-style);
}

.prouducts .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.prouducts .text-wrapper-6 {
  position: relative;
  width: 119px;
  margin-left: -30.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: #ffffff;
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.prouducts .frame-8 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .logo {
  position: relative;
  width: 454px;
  height: 87px;
  background-image: url(https://c.animaapp.com/ukyvrevr/img/------@2x.png);
  background-size: 100% 100%;
}

.prouducts .p {
  position: relative;
  width: 341px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.prouducts .frame-9 {
  position: relative;
  width: 319px;
  flex: 0 0 auto;
}

.prouducts .frame-10 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.prouducts .line {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 1px;
  margin-top: -0.50px;
}

.prouducts .text-wrapper-7 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--white);
  font-size: var(--body-font-size);
  text-align: center;
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.prouducts .frame-11 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: -160px;
  left: 1238px;
}

.prouducts .frame-12 {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--neutral-300);
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.prouducts .frame-13 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .vector-3 {
  position: absolute;
  width: 5px;
  height: 9px;
  top: 4px;
  left: 5px;
}

.prouducts .text-wrapper-9 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--neutral-500);
  font-size: var(--details-font-size);
  text-align: left;
  line-height: var(--details-line-height);
  white-space: nowrap;
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.prouducts .header {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 42px 96px 16px;
  position: absolute;
  top: -300px;
  left: 0;
  background-color: #fcfcff;
  box-shadow: var(--drop-shadow-100);
}

.prouducts .frame-14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 1;
  flex-grow: 1;
  margin-top: -2.00px;
  margin-bottom: -2.00px;
}

.prouducts .frame-15 {
  display: flex;
  width: 120px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  position: relative;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.prouducts .text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--details-bold-font-family);
  font-weight: var(--details-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--details-bold-font-size);
  text-align: left;
  line-height: var(--details-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--details-bold-letter-spacing);
  direction: rtl;
  font-style: var(--details-bold-font-style);
}

.prouducts .frame-16 {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .frame-17 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .text-wrapper-11 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  white-space: nowrap;
  font-style: var(--body-font-style);
}

.prouducts .arrow {
  position: relative;
  width: 16px;
  height: 16px;
  transform: rotate(-90.00deg);
}

.prouducts .vector-4 {
  position: absolute;
  width: 9px;
  height: 5px;
  top: 6px;
  left: 3px;
  transform: rotate(90.00deg);
}

.prouducts .frame-18 {
  display: flex;
  width: 906px;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.prouducts .frame-19 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .frame-20 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .text-wrapper-12 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.prouducts .frame-21 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .frame-22 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .frame-23 {
  display: inline-flex;
  height: 21px;
  align-items: center;
  gap: 8px;
  position: relative;
}

.prouducts .text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1.50px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-font-size);
  text-align: left;
  line-height: var(--body-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-letter-spacing);
  direction: rtl;
  font-style: var(--body-font-style);
}

.prouducts .text-wrapper-14 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: var(--blue-500);
  font-size: var(--body-bold-font-size);
  text-align: left;
  line-height: var(--body-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--body-bold-letter-spacing);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.prouducts .rectangle {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 3px;
  background-color: var(--blue-500);
  border-radius: 8px;
}

.prouducts .frame-24 {
  display: flex;
  width: 57px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0px;
  position: relative;
}

.prouducts .untitled {
  position: relative;
  width: 279px;
  height: 42px;
  object-fit: cover;
}

.prouducts .frame-25 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  position: absolute;
  top: -230px;
  left: 1105px;
}

.prouducts .group-2 {
  position: relative;
  width: 109px;
  height: 37px;
  margin-right: -2.00px;
}

.prouducts .text-wrapper-15 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--header-bold-font-family);
  font-weight: var(--header-bold-font-weight);
  color: var(--blue-500);
  font-size: var(--header-bold-font-size);
  text-align: center;
  line-height: var(--header-bold-line-height);
  white-space: nowrap;
  letter-spacing: var(--header-bold-letter-spacing);
  direction: rtl;
  font-style: var(--header-bold-font-style);
}

.prouducts .text-wrapper-16 {
  position: relative;
  width: fit-content;
  font-family: var(--sub-title-font-family);
  font-weight: var(--sub-title-font-weight);
  color: var(--neutral-500);
  font-size: var(--sub-title-font-size);
  text-align: left;
  line-height: var(--sub-title-line-height);
  white-space: nowrap;
  letter-spacing: var(--sub-title-letter-spacing);
  direction: rtl;
  font-style: var(--sub-title-font-style);
}

.prouducts .overlap {
  position: absolute;
  width: 1248px;
  height: 733px;
  top: 273px;
  left: 96px;
}

.prouducts .frame-26 {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  position: absolute;
  top: -475px;
  left: 0;
}

.prouducts .frame-27 {
  display: flex;
  flex-direction: column;
  width: 401px;
  align-items: flex-end;
  gap: 32px;
  padding: 16px 24px 24px;
  position: relative;
  margin-left: -0.50px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 0.5px solid;
  border-color: var(--neutral-300);
  box-shadow: var(--drop-shadow-300);
}

.prouducts .image {
  position: relative;
  width: 92px;
  height: 33px;
}

.prouducts .dfed-faa-bde {
  position: relative;
  width: 361px;
  height: 332px;
  margin-left: -9.00px;
}

.prouducts .frame-28 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .text-wrapper-17 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-500);
  font-size: 25px;
  letter-spacing: 0;
  line-height: 32.7px;
  direction: rtl;
}

.prouducts .frame-29 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  position: relative;
  flex: 0 0 auto;
}

.prouducts .text-wrapper-18 {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--heavenly-500);
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.prouducts .text-wrapper-19 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-bold-font-size);
  text-align: right;
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  font-style: var(--body-bold-font-style);
}

.prouducts .frame-30 {
  display: flex;
  flex-direction: column;
  width: 401px;
  height: 726px;
  align-items: flex-end;
  gap: 32px;
  padding: 16px 24px 24px;
  position: relative;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 0.5px solid;
  border-color: var(--neutral-300);
  box-shadow: var(--drop-shadow-300);
}

.prouducts .image-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 337px;
}

.prouducts .frame-31 {
  margin-bottom: -6.00px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}
.prouducts .text-wrapper-38 {
  position: absolute;
  width: 704px;
  top: 27px;
  left: -95px;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-500);
  font-size: 37px;
  text-align: center;
  line-height: 50.0px;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .frame-32 {
  display: flex;
  flex-direction: column;
  width: 401px;
  align-items: flex-end;
  gap: 32px;
  padding: 16px 24px 24px;
  position: relative;
  margin-top: -0.50px;
  margin-bottom: -0.50px;
  margin-right: -0.50px;
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  border: 0.5px solid;
  border-color: var(--neutral-300);
  box-shadow: var(--drop-shadow-300);
}

.prouducts .dfed-faa-bde-2 {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 337.96px;
}

.prouducts .frame-33 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.prouducts .text-wrapper-20 {
  width: fit-content;
  white-space: nowrap;
  position: relative;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: var(--neutral-500);
  font-size: var(--body-bold-font-size);
  text-align: right;
  letter-spacing: var(--body-bold-letter-spacing);
  line-height: var(--body-bold-line-height);
  font-style: var(--body-bold-font-style);
}

.prouducts .text-wrapper-21 {
  position: absolute;
  width: 352px;
  top: 519px;
  left: 872px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--blue-500);
  font-size: var(--details-font-size);
  line-height: var(--details-line-height);
  letter-spacing: var(--details-letter-spacing);
  direction: rtl;
  font-style: var(--details-font-style);
}

.prouducts .text-wrapper-22 {
  position: absolute;
  width: 352px;
  top: 519px;
  left: 448px;
  font-family: var(--details-font-family);
  font-weight: var(--details-font-weight);
  color: var(--blue-500);
  font-size: var(--details-font-size);
  text-align: right;
  letter-spacing: var(--details-letter-spacing);
  line-height: var(--details-line-height);
  font-style: var(--details-font-style);
}

.prouducts .overlap-2 {
  position: absolute;
  width: 1452px;
  height: 220px;
  top: 750px;
  left: -110px;
}

.prouducts .frame-34 {
  position: absolute;
  width: 1224px;
  height: 202px;
  top: 0;
  left: 228px;
  background-color: var(--neutral-100);
  border-radius: 20px;
}

.prouducts .text-wrapper-23 {
  position: absolute;
  top: 94px;
  left: 100px;
  font-family: "Cairo", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 24px;
  text-align: center;
  line-height: 32.4px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .frame-35 {
  display: flex;
  width: 209px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  position: absolute;
  top: 159px;
  left: 752px;
  background-color: var(--red-500);
  border-radius: 16px;
  box-shadow: var(--drop-shadow-200);
}

.prouducts .img-wrapper {
  position: relative;
  width: 23px;
  height: 25px;
}

.prouducts .vector-5 {
  position: absolute;
  width: 7px;
  height: 14px;
  top: 6px;
  left: 7px;
}

.prouducts .text-wrapper-24 {
  position: relative;
  width: 85px;
  height: 29px;
  font-family: var(--body-bold-font-family);
  font-weight: var(--body-bold-font-weight);
  color: var(--neutral-0);
  font-size: var(--body-bold-font-size);
  text-align: left;
  line-height: var(--body-bold-line-height);
  letter-spacing: var(--body-bold-letter-spacing);
  direction: rtl;
  font-style: var(--body-bold-font-style);
}

.prouducts .text-wrapper-25 {
  position: absolute;
  width: 1011px;
  bottom: -550px;
  left: -125px;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-500);
  font-size: 37px;
  line-height: 50.0px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .element-tif {
  position: absolute;
  width: 89px;
  height: 88px;
  top: 1738px;
  left: 1198px;
}

.prouducts .group-3 {
  position: relative;
  height: 88px;
}

.prouducts .vector-6 {
  position: absolute;
  width: 43px;
  height: 58px;
  top: 4px;
  left: 46px;
}

.prouducts .vector-7 {
  position: absolute;
  width: 66px;
  height: 20px;
  top: 68px;
  left: 9px;
}

.prouducts .vector-8 {
  position: absolute;
  width: 39px;
  height: 62px;
  top: 0;
  left: 0;
}

.prouducts .ezgzee-tif {
  position: absolute;
  width: 58px;
  height: 91px;
  top: 1735px;
  left: 978px;
}

.prouducts .group-4 {
  position: relative;
  height: 91px;
  background-image: url(https://c.animaapp.com/ukyvrevr/img/vector-10.svg);
  background-size: 100% 100%;
}

.prouducts .vector-9 {
  position: absolute;
  width: 26px;
  height: 42px;
  top: 28px;
  left: 16px;
}

.prouducts .nckynf-tif {
  position: absolute;
  width: 88px;
  height: 88px;
  top: 1728px;
  left: 729px;
}

.prouducts .group-5 {
  position: relative;
  height: 88px;
  background-image: url(https://c.animaapp.com/ukyvrevr/img/vector-12.svg);
  background-size: 100% 100%;
}

.prouducts .vector-10 {
  position: absolute;
  width: 13px;
  height: 13px;
  top: 50px;
  left: 33px;
}

.prouducts .tif {
  position: absolute;
  width: 80px;
  height: 89px;
  top: 1728px;
  left: 505px;
  background-image: url(https://c.animaapp.com/ukyvrevr/img/vector-14.svg);
  background-size: 100% 100%;
}

.prouducts .element-okma-tif {
  position: absolute;
  width: 80px;
  height: 93px;
  top: 1728px;
  left: 245px;
}

.prouducts .group-6 {
  height: 93px;
}

.prouducts .overlap-group-2 {
  position: relative;
  width: 80px;
  height: 93px;
}

.prouducts .vector-11 {
  position: absolute;
  width: 80px;
  height: 79px;
  top: 14px;
  left: 0;
}

.prouducts .vector-12 {
  position: absolute;
  width: 39px;
  height: 70px;
  top: 0;
  left: 21px;
}

.prouducts .text-wrapper-26 {
  position: absolute;
  width: 149px;
  top: 1853px;
  left: 211px;
  font-family: "Cairo", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 24px;
  text-align: center;
  line-height: 32.4px;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .text-wrapper-27 {
  position: absolute;
  width: 149px;
  top: 1853px;
  left: 698px;
  font-family: "Cairo", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 24px;
  text-align: center;
  line-height: 32.4px;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .text-wrapper-28 {
  position: absolute;
  width: 149px;
  top: 1853px;
  left: 932px;
  font-family: "Cairo", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 24px;
  text-align: center;
  line-height: 32.4px;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .text-wrapper-29 {
  position: absolute;
  width: 149px;
  top: 1853px;
  left: 1169px;
  font-family: "Cairo", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 24px;
  text-align: center;
  line-height: 32.4px;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .text-wrapper-30 {
  position: absolute;
  width: 128px;
  top: 1849px;
  left: 481px;
  font-family: "Cairo", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 24px;
  text-align: center;
  line-height: 32.4px;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .group-7 {
  position: absolute;
  width: 706px;
  height: 50px;
  top: 1612px;
  left: 469px;
}

.prouducts .text-wrapper-31 {
  position: absolute;
  width: 704px;
  top: 0;
  left: 0px;
  font-family: "Cairo", Helvetica;
  font-weight: 700;
  color: var(--blue-500);
  font-size: 37px;
  text-align: center;
  line-height: 50.0px;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .overlap-3 {
  position: absolute;
  width: 100%;
  height: 486px;
  top: 1088px;
  left: auto;
}

.prouducts .frame-wrapper {
  display: flex;
  flex-direction: column;
  width:2900px;
  height: 486px;
  align-items: center;
  gap: 29px;
  padding: 69px 32px 24px;
  position: relative;
  top: 30px;
  left: auto;
  transform: translateX(-50%);
  background-color: #f3f3f3;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(100vw + 50%);
}

.prouducts .frame-36 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  left: 720px;
  flex: 0 0 auto;
}

.prouducts .group-wrapper {
  position: relative;
  width: 704px;
  height: 50px;
}

.prouducts .group-8 {
  position: relative;
  width: 706px;
  height: 50px;
}

.prouducts .text-wrapper-32 {
  position: relative;
  width: fit-content;
  left: 0px;
  font-family: "DIN Next LT Arabic-Regular", Helvetica;
  font-weight: 400;
  color: var(--blue-500);
  font-size: 30px;
  text-align: center;
  line-height: 40.5px;
  white-space: nowrap;
  letter-spacing: 0;
  direction: rtl;
}

.prouducts .frame-37 {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 46px;
  position: relative;
  top:-230px;
  left: 330px;
  overflow: hidden;
  overflow-x: scroll;
  margin: 0 auto;
  padding: 0 20px;
}

.prouducts .frame-37::-webkit-scrollbar {
  width: 0;
  display: none;
}

.prouducts .element {
  position: relative;
  width: 195px;
  height: 195px;
  object-fit: cover;
}
/* ===== PRODUCTS PAGE VISIBILITY & STACKING FIXES (no animation) ===== */

/* 1) Stop clipping on smaller screens */
.prouducts .div {
  /* Let content be seen instead of cut off */
  overflow: visible !important;
  /* Allow fluid width on small screens, keep design width as a cap */
  width: 100% !important;
  max-width: 100%;
  /* Let height grow naturally with content */
  height: auto !important;
}

/* 2) Header should always be on top */
.prouducts .header {
  position: relative;
  z-index: 10;
}

/* 3) Product cards section above backgrounds */
.prouducts .overlap {
  position: relative;
  z-index: 2;
}

/* 4) Support section wrapper above backgrounds */
.prouducts .overlap-2 {
  position: relative;
  z-index: 2;
}

/* 5) Keep the support background behind its interactive elements */
.prouducts .overlap-2 .frame-34 {
  position: absolute;        /* it already is in your CSS */
  z-index: 1;                /* behind button but above page background */
  pointer-events: none;      /* never block clicks on button above */
}

/* 6) Make sure interactive button renders above its background */
.prouducts .frame-35,         /* register button */
.prouducts .text-wrapper-23,  /* support text */
.prouducts .text-wrapper-25 { /* support header */
  position: relative;
  z-index: 3;
}

/* 7) Brand logos section above backgrounds */


/* 8) Footer should always be on top */
.prouducts .footer {
  position: relative;
  z-index: 10;
}

/* 9) Make sure product cards render above any background */
.prouducts .frame-26,         /* cards container */
.prouducts .frame-27,         /* card 1 */
.prouducts .frame-30,         /* card 2 */
.prouducts .frame-32 {        /* card 3 */
  position: relative;
  z-index: 3;
}

/* 10) Page navigation elements should be visible */
.prouducts .frame-11,         /* breadcrumb */
.prouducts .frame-25 {        /* page title */
  position: relative;
  z-index: 5;
}

/* 11) Optional: when viewport narrower than 100%, keep layout readable */
@media (max-width: 100%) {
  .prouducts .div {
    width: 100%;
  }
}

@media (min-width: 319px) {
  .frame-37.infinite-scroll-container {
    left: 450px !important;
  }
}

@media (min-width: 575px) {
  .frame-37.infinite-scroll-container {
    left: 350px !important;
  }
}


/* Bigger than tablet (> 768px): laptops, large laptops, 4K, etc. */
@media (min-width: 769px) {
  .frame-37.infinite-scroll-container {
    left: 230px !important;
  }
}

/* Bigger than tablet (> 768px): laptops, large laptops, 4K, etc. */
@media (min-width: 1025px) {
  .frame-37.infinite-scroll-container {
    left: auto !important;
  }
}
/* ≥1675px (+200px from last) */
@media (min-width: 1675px) {
  .prouducts .element-tif      { left: 1528px !important; }
  .prouducts .ezgzee-tif       { left: 1308px !important; }
  .prouducts .nckynf-tif       { left: 1059px !important; }
  .prouducts .tif              { left: 835px  !important; }
  .prouducts .element-okma-tif { left: 575px  !important; }
  .prouducts .text-wrapper-29  { left: 1499px !important; }
  .prouducts .text-wrapper-28  { left: 1262px !important; }
  .prouducts .text-wrapper-27  { left: 1028px !important; }
  .prouducts .text-wrapper-30  { left: 811px  !important; }
  .prouducts .text-wrapper-26  { left: 541px  !important; }
  .prouducts .text-wrapper-38 { left: 235px !important; }

}

/* ≥2060px (+200px from last) */
@media (min-width: 2060px) {
  .prouducts .element-tif      { left: 1558px !important; }
  .prouducts .ezgzee-tif       { left: 1338px !important; }
  .prouducts .nckynf-tif       { left: 1089px !important; }
  .prouducts .tif              { left: 865px  !important; }
  .prouducts .element-okma-tif { left: 605px  !important; }
  .prouducts .text-wrapper-29  { left: 1529px !important; }
  .prouducts .text-wrapper-28  { left: 1292px !important; }
  .prouducts .text-wrapper-27  { left: 1058px !important; }
  .prouducts .text-wrapper-30  { left: 841px  !important; }
  .prouducts .text-wrapper-26  { left: 571px  !important; }
  .prouducts .text-wrapper-38 { left: 265px !important; }

}

/* ≥2175px (+200px from last) */
@media (min-width: 2175px) {
  .prouducts .element-tif      { left: 1588px !important; }
  .prouducts .ezgzee-tif       { left: 1368px !important; }
  .prouducts .nckynf-tif       { left: 1119px !important; }
  .prouducts .tif              { left: 895px  !important; }
  .prouducts .element-okma-tif { left: 635px  !important; }
  .prouducts .text-wrapper-29  { left: 1559px !important; }
  .prouducts .text-wrapper-28  { left: 1322px !important; }
  .prouducts .text-wrapper-27  { left: 1088px !important; }
  .prouducts .text-wrapper-30  { left: 871px  !important; }
  .prouducts .text-wrapper-26  { left: 601px  !important; }
  .prouducts .text-wrapper-38 { left: 295px !important; }
}

/* ≥2251px (+200px from last) */
@media (min-width: 2251px) {
  .prouducts .element-tif      { left: 1618px !important; }
  .prouducts .ezgzee-tif       { left: 1398px !important; }
  .prouducts .nckynf-tif       { left: 1149px !important; }
  .prouducts .tif              { left: 925px  !important; }
  .prouducts .element-okma-tif { left: 665px  !important; }
  .prouducts .text-wrapper-29  { left: 1589px !important; }
  .prouducts .text-wrapper-28  { left: 1352px !important; }
  .prouducts .text-wrapper-27  { left: 1118px !important; }
  .prouducts .text-wrapper-30  { left: 901px  !important; }
  .prouducts .text-wrapper-26  { left: 631px  !important; }
  .prouducts .text-wrapper-38 { left: 325px !important; }
}

@media (min-width: 2350px) {
  .prouducts .element-tif      { left: 1718px !important; }
  .prouducts .ezgzee-tif       { left: 1498px !important; }
  .prouducts .nckynf-tif       { left: 1249px !important; }
  .prouducts .tif              { left: 1025px  !important; }
  .prouducts .element-okma-tif { left: 765px  !important; }
  .prouducts .text-wrapper-29  { left: 1689px !important; }
  .prouducts .text-wrapper-28  { left: 1452px !important; }
  .prouducts .text-wrapper-27  { left: 1218px !important; }
  .prouducts .text-wrapper-30  { left: 1001px  !important; }
  .prouducts .text-wrapper-26  { left: 731px  !important; }
  .prouducts .text-wrapper-38 { left: 425px !important; }
}:root {
  --blue-100: rgba(255, 255, 255, 1);
  --blue-200: rgba(205, 206, 229, 1);
  --blue-300: rgba(114, 134, 188, 1);
  --blue-400: rgba(73, 108, 173, 1);
  --blue-500: rgba(0, 86, 160, 1);
  --red-400: rgba(241, 92, 66, 1);
  --red-500: rgba(237, 33, 38, 1);
  --heavenly-500: rgba(50, 177, 230, 1);
  --green-300: rgba(119, 192, 67, 1);
  --neutral-0: rgba(255, 255, 255, 1);
  --neutral-100: rgba(247, 247, 247, 1);
  --neutral-200: rgba(209, 211, 213, 1);
  --neutral-300: rgba(153, 158, 161, 1);
  --neutral-400: rgba(117, 117, 117, 1);
  --neutral-500: rgba(75, 75, 75, 1);
  --neutral-900: rgba(27, 27, 27, 1);
  --white: rgba(255, 255, 255, 1);
  --header-font-family: "Cairo", Helvetica;
  --header-font-weight: 400;
  --header-font-size: 31px;
  --header-letter-spacing: 0px;
  --header-line-height: 120.00000476837158%;
  --header-font-style: normal;
  --header-bold-font-family: "Cairo", Helvetica;
  --header-bold-font-weight: 700;
  --header-bold-font-size: 31px;
  --header-bold-letter-spacing: 0px;
  --header-bold-line-height: 120.00000476837158%;
  --header-bold-font-style: normal;
  --title-font-family: "Cairo", Helvetica;
  --title-font-weight: 400;
  --title-font-size: 25px;
  --title-letter-spacing: 0px;
  --title-line-height: 120.00000476837158%;
  --title-font-style: normal;
  --titlebold-font-family: "Cairo", Helvetica;
  --titlebold-font-weight: 700;
  --titlebold-font-size: 25px;
  --titlebold-letter-spacing: 0px;
  --titlebold-line-height: 120.00000476837158%;
  --titlebold-font-style: normal;
  --sub-title-font-family: "Cairo", Helvetica;
  --sub-title-font-weight: 400;
  --sub-title-font-size: 20px;
  --sub-title-letter-spacing: 0px;
  --sub-title-line-height: 120.00000476837158%;
  --sub-title-font-style: normal;
  --sub-bold-font-family: "Cairo", Helvetica;
  --sub-bold-font-weight: 700;
  --sub-bold-font-size: 20px;
  --sub-bold-letter-spacing: 0px;
  --sub-bold-line-height: 120.00000476837158%;
  --sub-bold-font-style: normal;
  --body-font-family: "Cairo", Helvetica;
  --body-font-weight: 400;
  --body-font-size: 18px;
  --body-letter-spacing: 0px;
  --body-line-height: 120.00000476837158%;
  --body-font-style: normal;
  --body-bold-font-family: "Cairo", Helvetica;
  --body-bold-font-weight: 700;
  --body-bold-font-size: 16px;
  --body-bold-letter-spacing: 0px;
  --body-bold-line-height: 120.00000476837158%;
  --body-bold-font-style: normal;
  --details-font-family: "Cairo", Helvetica;
  --details-font-weight: 400;
  --details-font-size: 13px;
  --details-letter-spacing: 0px;
  --details-line-height: 120.00000476837158%;
  --details-font-style: normal;
  --details-bold-font-family: "Cairo", Helvetica;
  --details-bold-font-weight: 700;
  --details-bold-font-size: 13px;
  --details-bold-letter-spacing: 0px;
  --details-bold-line-height: 120.00000476837158%;
  --details-bold-font-style: normal;
  --caption-font-family: "Cairo", Helvetica;
  --caption-font-weight: 400;
  --caption-font-size: 10px;
  --caption-letter-spacing: 0px;
  --caption-line-height: 120.00000476837158%;
  --caption-font-style: normal;
  --caption-bold-font-family: "Cairo", Helvetica;
  --caption-bold-font-weight: 700;
  --caption-bold-font-size: 10px;
  --caption-bold-letter-spacing: 0px;
  --caption-bold-line-height: 120.00000476837158%;
  --caption-bold-font-style: normal;
  --drop-shadow: 0px 5px 10px 0px rgba(36, 36, 36, 0.2);
  --drop-shadow-200: 0px 1px 4px 0px rgba(12, 12, 13, 0.05), 0px 1px 4px 0px
    rgba(12, 12, 13, 0.1);
  --drop-shadow-300: 0px 4px 4px -1px rgba(12, 12, 13, 0.05), 0px 4px 4px -1px
    rgba(12, 12, 13, 0.1);
  --drop-shadow-100: 0px 1px 4px 0px rgba(12, 12, 13, 0.05);
}
/* Radar ripple effect */
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ping {
  position: absolute;
  left: 63%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  isolation: isolate;
}

.ping::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140vmin;
  height: 140vmin;
  transform: translate(-50%, -50%) scale(.72);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      rgba(165,165,165,0.95) 0%,
      rgba(165,165,165,0.95) 10%,
      rgba(165,165,165,0.65) 10.1%,
      rgba(165,165,165,0.65) 20%,
      rgba(165,165,165,0.35) 20.1%,
      rgba(165,165,165,0.35) 40%,
      rgba(165,165,165,0.20) 40.1%,
      rgba(165,165,165,0.20) 60%,
      rgba(165,165,165,0.10) 60.1%,
      rgba(165,165,165,0.10) 100%
    );
  filter: blur(0.3px);
  animation: ripple 3.8s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(.62);
    opacity: .9;
  }
  60% {
    transform: translate(-50%, -50%) scale(.98);
    opacity: .9;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 0;
  }
}
.social-icons-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 1rem 0;
}

.social-icon {
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}
/* Clean social media posts styling */
.socials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.social {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* Remove all hover effects and overlays */
.social:hover {
    transform: none;
}

.instagram,
.overlay,
.frame-28,
.frame-29,
.group-5,
.rectangle-2,
.comment,
.text-wrapper-17,
.text-wrapper-18 {
    display: none !important;
}

/* Override any existing hover effects */
.news .group-4 img:hover,
.frame-5 img:hover,
.frame-27 img:hover {
    transform: none;
    z-index: auto;
}
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.page-loader img {
    width: 100px;
    height: auto;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Navigation hover effects */
.navbar div, 
.frame-19 div, 
.frame-20 div, 
.frame-21 div, 
.frame-23 div, 
.frame-24 div,
.text-wrapper-12,
.text-wrapper-13,
.text-wrapper-21,
.text-wrapper-22,
.text-wrapper-23 {
    transition: color 0.3s ease;
    cursor: pointer;
}

.navbar div:hover, 
.frame-19 div:hover, 
.frame-20 div:hover, 
.frame-21 div:hover, 
.frame-23 div:hover, 
.frame-24 div:hover,
.text-wrapper-12:hover,
.text-wrapper-13:hover,
.text-wrapper-21:hover,
.text-wrapper-22:hover,
.text-wrapper-23:hover {
    color: #007bff;
}

/* Logo hover effect */
.logo, .logo-2 {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.logo:hover, .logo-2:hover {
    opacity: 0.8;
}

/* Store button hover effect */
.text-wrapper-10:hover, 
.text-wrapper-2:hover {
    opacity: 0.8;
}

/* Social media posts */
.group-2,
.group-3,
.group-4,
.group-5 {
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Dark overlay */
.group-2::before,
.group-3::before,
.group-4::before,
.group-5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Social elements initial state */
.frame-29,
.frame-7,
.instagram,
.rectangle-2 {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Position social elements */
.frame-29,
.frame-7 {
    position: absolute;
    top: 10px;
    right: 40px;
    display: flex;
    gap: 10px;
    z-index: 2;
}

.instagram {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
}

/* Gradient overlay */
.rectangle-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    z-index: 1;
}

/* Hover effects */
.group-2:hover,
.group-3:hover,
.group-4:hover,
.group-5:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.group-2:hover::before,
.group-3:hover::before,
.group-4:hover::before,
.group-5:hover::before,
.group-2:hover .frame-29,
.group-3:hover .frame-29,
.group-4:hover .frame-29,
.group-5:hover .frame-29,
.group-2:hover .frame-7,
.group-3:hover .frame-7,
.group-4:hover .frame-7,
.group-5:hover .frame-7,
.group-2:hover .instagram,
.group-3:hover .instagram,
.group-4:hover .instagram,
.group-5:hover .instagram,
.group-2:hover .rectangle-2,
.group-3:hover .rectangle-2,
.group-4:hover .rectangle-2,
.group-5:hover .rectangle-2 {
    opacity: 1;
}

/* Language switcher hover effect */
.text-wrapper-11:hover {
    opacity: 0.8;
}

/* Footer links hover effects */
[class*="text-wrapper"] {
    transition: color 0.3s ease, transform 0.2s ease;
}

[class*="text-wrapper"]:hover {
    color: #007bff;
    transform: translateX(-5px);
}

/* Footer contact info specific styles */
[class*="text-wrapper"][class*="phone"]:hover,
[class*="text-wrapper"][class*="email"]:hover,
[class*="text-wrapper"]:hover[href^="tel:"],
[class*="text-wrapper"]:hover[href^="mailto:"] {
    text-decoration: underline;
    transform: none;
}

/* Disable hover effect for headers and titles */
.text-wrapper-7,
.text-wrapper-8,
.text-wrapper-15,
.text-wrapper-16,
.text-wrapper-20,
.text-wrapper-25,
.text-wrapper-26,
.text-wrapper-27 {
    transform: none !important;
}

/* Footer contact info hover effects */
.text-wrapper-15:hover,
.text-wrapper-16:hover {
    text-decoration: underline;
}