/* start header section style */
.AboutUsHeader {
  width: 100%;
  height: 100vh;
  height: 100svh;

  background-image: url("../assets/image/aboutUSheaderBackground.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.AboutUsHeader .aboutHeaderWrapper {
  padding: 10%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  width: 100%;
  gap: 15%;
}

.AboutUsHeader .aboutHeaderWrapper .AboutTitle {
  font-family: "Saira", "Snas-serf";
  font-size: 70px;
  font-weight: 700;
  line-height: 53px;
  letter-spacing: 0em;
  text-align: left;
  color: white;

  width: 50%;
}
.AboutUsHeader .aboutHeaderWrapper .AboutText {
  font-family: "Saira", "Snas-serf";
  font-size: 30px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: 0em;
  text-align: left;
  color: var(--linksColor);

  width: 50%;
}
/* end header section style */

/* start main section  style */
.aboutUsMain {
  width: 100%;
  background-image: url("../assets/image/aboutMainBody.webp");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.AboutUsWrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1rf;
  padding-bottom: 10%;
}

.AboutUsWrapper .cardSection {
  display: grid;
}
/* handle image and text order with a grid system */
.AboutUsWrapper .cardSection.odd {
  grid-template-columns: 70% 30%;
}
.AboutUsWrapper .cardSection.even {
  grid-template-columns: 30% 70%;
}
.AboutUsWrapper .cardSection.even .CardTextContent {
  order: 1;
  padding-left: 15%;
}
.AboutUsWrapper .cardSection.even .imageContainer {
  order: 2;
}

/* end  */

.AboutUsWrapper .cardSection .imageContainer img {
  width: 100%;
}
.AboutUsWrapper .cardSection .CardTextContent {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 20px;

  color: white;
}

.AboutUsWrapper .cardSection .CardTextContent .subtitle {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 33px;
}
.AboutUsWrapper .cardSection .CardTextContent .CardTextBody {
  font-family: "Poppins", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
}
/* end main section  style */ ;