/* start header section style  */
.headerSection {
  height: 100vh;
  height: 100svh;

  width: 100%;

  background-image: url("../assets/image/technologyHeader.webp");
  background-size: cover;
  background-position: center center;
  /* backface-visibility: red; */
  position: relative;
  z-index: -1;
}
.textContainer {
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.headerSection .textContainer h2 {
  font-family: "Saira", sans-serif;
  font-size: 70px;
  font-weight: 700;
  line-height: 72px;

  color: white;
}

.mainHeaderShadow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background-image: linear-gradient(
    180deg,
    rgba(7, 8, 22, 0) 0%,
    #070816 86.98%
  );
} /* mix the end of the header with body by this shadow */
/* end header section style  */
/* start main style */
main.mainTech {
  /* background-image: url("../assets/image/technologyBody.webp"); */
  background-size: cover;
  background-position: center;
  position: relative;
}

/* .mainTech .mainBodyShadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 300px;
  background-image: linear-gradient(
    00deg,
    rgba(7, 8, 22, 0) 0%,
    #070816 86.98%
  );
} mix the start of the body and the header with this shadow  */

/* start first body section style  */
.mainTech .mainBodyContainer {
  padding: 4% 10%;
  width: 100%;
  /* height: 100vh; */
  position: relative;
  overflow-x: hidden !important;
}
.mainTech .mainBodyContainer .vectorContainerWrapper {
  background-image: url("../assets/vectors/techvector.webp");
  background-size: cover;
  position: absolute;
  top: -200;
  left: 0;
  right: 0;
  height: 1001px;
  width: 1213px;
  z-index: -2;
}
.mainTech .mainBodyContainer .textWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mainTech .mainBodyContainer .FirstTextContainer {
  width: 50%;
  color: black;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-left: 30px;
  /* padding-top: 50px; */
  text-transform: uppercase;
}

@media only screen and (max-width: 1100px) {
  .mainTech .mainBodyContainer .FirstTextContainer {
    padding-left: 100px;
    padding-top: 50px;
  }
}
.mainTech .mainBodyContainer .FirstTextContainer span {
  /* display: block; */
  font-family: "Saira", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 1px;
  text-align: left;
  width: 85%;
}
.mainBodyContainer .FirstTextContainer p {
  font-family: "Saira", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: 1px;
  text-align: left;
  width: 85%;
}

.mainBodyContainer .secondContainer {
  padding-top: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 10;
  min-height: 80vh;
}

.mainBodyContainer .secondContainer .imageContainer {
  flex-basis: 50%;
  width: 50%;
}
.mainBodyContainer .secondContainer .imageContainer img {
  width: 100%;
  transition: 0.5s;
}
.mainBodyContainer .secondContainer .imageContainer:hover img {
  transform: scale(1.2);
}

.mainBodyContainer .secondContainer .textContainer {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 0 5%;
  gap: 40px;
}

.mainBodyContainer .secondContainer .textContainer .subTitle {
  font-family: "Saira", "Sans-serif";
  font-size: 30px;
  font-weight: 700;
  line-height: 37px;
  color: black;
  width: 50%;
  text-transform: uppercase;
}
.mainBodyContainer .secondContainer .textContainer p {
  font-family: "Saira", "Sans-serif";
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.5px;
  text-align: left;
  color: black;
}
/* end first body section style */

/* start card section style */

.mainTech .cardContainer {
  padding: 10%;
  padding-top: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%;
}
.mainTech .cardContainer .card {
  background-image: url("../assets/image/cardTech.webp");
  background-size: cover;
  background-position: center center;
  position: relative;
  height: 652px;
}
.mainTech .cardContainer .card::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.8);
}
.mainTech .cardContainer .card .cardWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: white;
  z-index: 2;
}
.mainTech .cardContainer .card .cardWrapper .mainCardText {
  color: white;
  z-index: 2;

  font-family: "Saira", "Sans-serif";

  text-align: center;
  transition: 0.5s;
}
.mainTech .cardContainer .card .cardWrapper .mainCardText span {
  font-size: 16px;
  font-weight: 400;
  line-height: 33px;
  letter-spacing: 0em;
  text-align: center;
}
.mainTech .cardContainer .card .cardWrapper .mainCardText h2.title {
  font-size: 30px;
  font-weight: 700;
  line-height: 33px;
  letter-spacing: 0em;
  text-align: center;
}
.mainTech .cardContainer .hoveredText {
  font-family: "Saira", "Sans-serif";
  z-index: 2;
  color: white;

  width: 50%;

  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0em;
  text-align: center;

  transform: translateY(100%);
  opacity: 0;

  transition: 0.5s;
}
.mainTech .cardContainer .card:hover .cardWrapper .mainCardText {
  transform: translateY(-100%);
}
.mainTech .cardContainer .card:hover .hoveredText {
  transform: translateY(0%);
  opacity: 1;
}
.mainTech .cardContainer .hoveredText .ReadMore {
  font-family: "Saira", "Sans-serif";
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: red; */
  color: white;
  margin: auto;

  border: 1px solid white;
  padding: 5px 10px;
  border-radius: 20px;
  margin-top: 20px;
  cursor: pointer;

  transition: 0.5s;
}
.mainTech .cardContainer .hoveredText .ReadMore svg {
  width: 16px;
}
.mainTech .cardContainer .hoveredText .ReadMore:hover {
  background-color: white;
  color: black;
}

/* end card section style */