@media only screen and (max-width: 900px) {
  .section-textContainer {
    font-size: 30px !important;
    text-align: center !important;
    line-height: 24px !important;
  }
  .sections-HeadersMainContainer
    .sections-HeaderWrapper:hover
    .section-overLay
    .section-hiddenText {
    font-size: 20px !important;
    line-height: 18px !important;
  }
}
@media only screen and (max-width: 700px) {
  /* home page -- index.html */
  .heroContainer .textContainer p {
    font-size: 30px;
    line-height: 30px;
  }
  .heroContainer .textContainer p.subTitle {
    font-size: 35px;
  }
  .thinkContainer {
    height: 150vh;
    height: 150svh;
  }
  .thinkSubtitle {
    font-size: 25px;
    line-height: 20px;
  }
  .thinkWrapper .firstText .thinkTitle {
    font-size: 35px;
  }
  .thinkWrapper .secondText {
    font-size: 18px;
    line-height: 24px;
  }

  .solutionheader h2,
  .serviceheader h2 {
    font-size: 35px;
  }
  .solutionheader {
    height: 40vh;
  }
  .solutionheader .Text {
    font-size: 16px;
    line-height: 16px;
  }
  .solution .solutionContainer .overLayer .textSection,
  .service .serviceContainer .overLayer .textSection {
    font-size: 20px;
    line-height: 20px;
  }

  .customerExperience {
    height: 120vh;
    height: 120svh;
  }

  .customerWrapper .customerTitle {
    font-size: 40px;
  }
  .customerWrapper .customerBody {
    font-size: 20px;
    line-height: 24px;
  }

  /* about us page */

  .AboutUsHeader .aboutHeaderWrapper .AboutTitle {
    font-size: 35px;
    line-height: 30px;
  }
  .AboutUsHeader .aboutHeaderWrapper .AboutText {
    line-height: 24px;
    font-size: 16px;
  }

  .AboutUsWrapper .cardSection .CardTextContent .subtitle {
    font-size: 24px;
  }
  .AboutUsWrapper .cardSection .CardTextContent .CardTextBody {
    font-size: 14px;
  }
  .aboutUsMain .AboutUsWrapper .cardSection .CardTextContent {
    width: 90%;
  }

  /* tech page */
  .headerSection .textContainer {
    width: 70%;
  }
  .headerSection .textContainer h2 {
    font-size: 35px;
    line-height: 30px;
  }

  .mainTech .mainBodyContainer .FirstTextContainer {
    height: 50vh;
  }
  .mainTech .mainBodyContainer .FirstTextContainer span {
    font-size: 11px;
    line-height: 24px;
  }
  .mainBodyContainer .FirstTextContainer p {
    font-size: 24px !important;
    line-height: 24px;
  }
  .mainBodyContainer .secondContainer {
    padding: 2%;
  }
  .mainBodyContainer .secondContainer .textContainer .subTitle {
    font-size: 20px;
    line-height: 20px;
  }
  .mainBodyContainer .secondContainer .textContainer p {
    font-size: 14px;
    line-height: 20px;
  }

  /* sections --- sub page that navigate to it from solution section */

  .section-textContainer {
    font-size: 20px !important;
    text-align: center !important;
    line-height: 24px !important;
  }
  .sections-HeadersMainContainer
    .sections-HeaderWrapper:hover
    .section-overLay
    .section-hiddenText {
    font-size: 16px !important;
    line-height: 18px !important;
  }
  .sectionCard-textContainer .bodytext {
    width: 96% !important;
    text-align: left !important;
  }
}

@media only screen and (max-width: 1300px) and (min-width: 1200px) and (max-height: 650px) {
  .solutionheader .Text {
    font-size: 16px;
    line-height: 16px;
  }
  .solution .solutionContainer .overLayer .textSection {
    font-size: 24px;
    line-height: 20px;
  }

  .lastCardSectionContainer .CardContainerAbout {
    overflow-y: hidden;
  }
  .lastCardSectionContainer .About-card:hover .textShowed {
    transform: translateY(-20%);
  }
}
