@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-ExtraLight.ttf');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Light.ttf');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-Medium.ttf');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Cairo';
  src: url('../fonts/Cairo-SemiBold.ttf');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-ExtraLight.ttf');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Light.ttf');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.ttf');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-Light.ttf');
  font-weight: 300;
  font-style: normal;
}
/* RIGHT */
@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-ExtraLight.ttf');
  font-weight: 200;
  font-style: normal;
}
/* RIGHT */
@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-Medium.ttf');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-Bold.ttf');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-SemiBold.ttf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Tajawal';
  src: url('../fonts/Tajawal-ExtraBold.ttf');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Kefa';
  src: url('../fonts/kefa-bold.ttf');
  font-weight: bold;
  font-style: bold;
}
* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}
@media (max-width: 968px) {
  html {
    overflow-x: hidden;
  }
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
}

.soultion-body {
  width: 95vw;
  max-width: 1200px;
  min-height: 350px;
  max-height: 570px;
  margin: 100px auto 50px auto;
  border-radius: 21px;
  padding: 20px 30px 80px 30px;
  display: flex;
}
.soultion-body .img-container img {
  position: relative;
  transition: all 0.5s ease-in-out;
  /* top: -80px; */
}
.soultion-body .img-container img.active {
  transform: translate3d(0%, 10%, 0);
  opacity: 0;
}
@media (max-width: 968px) {
  .soultion-body .img-container img {
    display: none;
  }
  .soultion-body .info {
    width: 100%;
  }
  .soultion-body .info h3 {
    font-size: 18px !important;
    line-height: 28px !important;
  }
  .soultion-body .info p {
    font-size: 16px !important;
    line-height: 26px !important;
  }
  .soultion-body {
    max-height: 610px;
  }
}
.soultion-body .img-container {
  background-image: url('../assets/soultion/Graphics.svg');
  width: 50%;
}
.soultion-body .logo {
  padding: 10px;
}
.soultion-body h3 {
  font: normal normal 400 20px/40px Poppins;
  color: #851a89;
  max-width: 500px;
}
.soultion-body p {
  font: normal normal 300 18px/35px Poppins;
  color: #555555;
  max-width: 700px;
}
.soultion-body a,
.solution-info a {
  background-color: #ffffff;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  transition: all 0.3s ease-in-out;
  height: 60px;
  font: normal normal 400 13px/20px Poppins;
  color: #57bc7b;
  border-radius: 19px;
  padding: 0 60px;
  border: 2px solid #57bc7b;
  width: 210px;
  padding: 0 !important;
  margin: 50px 10px 0 10px;
  text-decoration: none;
}
.soultion-items-container {
  width: 95vw;
  max-width: 1200px;
  min-height: 350px;
  margin: 100px auto 50px auto;
  border-radius: 21px;
  padding: 20px 0px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.soultion-items-container .item {
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 15px;
  width: 31%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 30px 30px 10px 30px;
  min-height: 320px;
  /* margin-bottom: 50px; */
  margin: 0 1.16% 50px 1.16%;
  transition: all 0.5s ease-in-out;
  cursor: pointer;
}
.soultion-items-container .item:nth-child(1) {
  flex-direction: row !important;
}
.soultion-items-container .item .subItem {
width: 50%;
border-inline-end: 1px solid silver;
margin-inline-end: 5%;
}
.soultion-items-container .item:nth-child(1) {
  display: flex;
  /* flex-direction: row; */
}
@media (max-width: 968px) {
  .soultion-items-container .item:nth-child(1) {
    flex-direction: column !important;
  }
  .soultion-items-container .item:nth-child(1) .subItem {
    border: none !important;
  }
  .soultion-items-container .item:nth-child(1) .subItem, .soultion-items-container .item:nth-child(1) .item-side-logo {
    width: 100%;
  }
}
.soultion-items-container .item:hover {
  background-color: #851a89 !important;
}
.soultion-items-container .item.issuance:hover{
  background-color: #57bc7b !important;

}
.soultion-items-container.dest .item:hover {
  background-color: #e3d144 !important;
}
.soultion-items-container .item:hover * {
  color: #fff !important;
  /* fill: #fff; */
}
.soultion-items-container .item:hover svg.infoIcon {
  background-color: #fff;
  padding: 2px;
  border-radius: 8px;
}
.soultion-items-container .item:nth-child(1) {
  width: 64%;
}
.soultion-items-container .item.active {
  transform: translate3d(0%, 10%, 0);
  opacity: 0;
}
.soultion-items-container .item img {
  transition: all 0.5s ease-in-out;
}
.soultion-items-container .item img.active {
  transform: translate3d(0%, 10%, 0);
  opacity: 0;
}
@media (max-width: 968px) {
  .soultion-items-container .item {
    width: 95% !important;
  }
}
/* .soultion-items-container .item:nth-child(4),
.soultion-items-container .item:nth-child(5) {
  width: 46%;
} */
/* .soultion-items-container .item.issuance {
  width: 47%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  min-height: 300px;
  padding: 10px;
} */
/* .soultion-items-container .item.issuance div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 80%;
}
.soultion-items-container .item.issuance div p {
  text-align: left;
} */
/* .soultion-items-container .item.issuance:nth-child(5) {
  width: 100%;
} */
.soultion-items-container svg {
  /* width: 50px;
  height: 50px; */
  margin-bottom: 15px;
}

.soultion-items-container h4 {
  font: normal normal bold 22px/0px Poppins;
  margin-bottom: 15px;
  color: #851A89;
}
.soultion-items-container p {
  font: normal normal 300 14px/30px Poppins;
  color: #555555;
  /* text-align: center; */
}

.button-wrapper.down:hover a,
.button-wrapper.down:hover button {
  transform: translate3d(0, -19px, 0px);
  box-shadow: rgba(0, 0, 0, 0.3) 0px 30px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  background-color: #57bc7b !important;
  border: 1px solid #57bc7b !important;
  color: #ffffff !important;
}
.solution-info {
  width: 95vw;
  max-width: 1200px;
  border-radius: 15px;
  min-height: 270px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  justify-content: space-evenly;
  margin-bottom: 50px;
}
.solution-info h3 {
  font: normal normal 500 30px/40px Poppins;
  margin: 0;
}
.solution-info a {
  margin-top: 0;
}
.solution-info p {
  font: normal normal 300 18px/35px Poppins;
  text-align: center;
  margin: 0;
}
@media (max-width: 968px) {
  .solution-info h3 {
    font-size: 15px !important;
    line-height: 32px !important;
    text-align: center;
  }
  .solution-info p {
    font-size: 12px !important;
    line-height: 26px !important;
    text-align: center;
  }
  .solution-info a {
    width: 180px !important;
  }
}
.quate {
  width: 95vw;
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 30px;
  position: relative;
}

.quate p {
  font: normal normal 300 16px/35px Poppins;
  color: #555555;
}
.quate p.ar {
  text-align: right;
}
.ar,
.item.ar h4,
.item.ar p,
a.ar,
.item.issuance .ar h4,
.item.issuance .ar p {
  font-family: Cairo !important;
}
.item.issuance .ar p {
  text-align: right !important;
}