.membership-card {
  aspect-ratio: 650/1000;
  width: 100%;
  overflow: hidden;
  background: url("../../assets/img/member-card/back.png?h=e506d4262a3ff5931631963911895808") center/contain no-repeat;
  font-family: "Neo Sans Arabic";
  position: relative;
}
.membership-card .front {
  position: absolute;
  aspect-ratio: 650/1000;
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
  right: 0;
  overflow: hidden;
  background: url("../../assets/img/member-card/front.png?h=5ec65bd229c911b7faa9f183ea15c830") center/contain no-repeat;
  display: flex;
  align-items: flex-end;
  padding: 0;
  margin: 0;
}
.membership-card .front .container {
  width: 100%;
  padding-bottom: 1%;
  padding-right: 5%;
  padding-left: 5%;
  color: black;
}
.membership-card .front .container .number {
  color: white;
}
.membership-card .front .container h4, .membership-card .front .container h6 {
  padding-right: 5%;
  padding-left: 5%;
  width: 100%;
}
.membership-card .front .container h4 {
  background-color: white;
  text-align: center;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size: 40px;
  /*          @media (max-width: 375px) {
      font-size: 7vw;
  }

  @media (min-width: 576px) {
      font-size: 6.25vw;
  }

  @media (min-width: 992px) {
      font-size: 4.5vw;
  }

  @media (min-width: 1024px) {
      font-size: 4.5vw;
  }

  @media (min-width: 1200px) {
      font-size: 3.8vw;
  }

  @media (min-width: 1400px) {
      font-size: 3.25vw;
  }

  @media (min-width: 2560px) {
      font-size: 1.75vw;
  }*/
}
.membership-card .front .container h6 {
  color: white;
  margin-bottom: 1%;
  font-size: 35px;
  /*                @media (max-width: 360px) {
      font-size: 6vw;
  }

  @media (min-width: 576px) {
      font-size: 5.25vw;
  }

  @media (min-width: 725px) {
      font-size: 5vw;
  }

  @media (min-width: 992px) {
      font-size: 4vw;
  }

  @media (min-width: 1024px) {
      font-size: 3.5vw;
  }

  @media (min-width: 1200px) {
      font-size: 3vw;
  }

  @media (min-width: 1400px) {
      font-size: 2.6vw;
  }

  @media (min-width: 2560px) {
      font-size: 1.5vw;
  }*/
}
.membership-card .front .container .detailed {
  display: flex;
  justify-content: space-between;
}
.membership-card .front .container .detailed .s1 {
  width: 60%;
  padding-left: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.membership-card .front .container .detailed .s2 {
  width: 40%;
  padding-right: 5%;
}
.membership-card .front .container .detailed .s2 .qr {
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-left: 0;
}