@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,87.5,100..900;1,87.5,100..900&family=Oswald:wght@200..700&family=PT+Sans+Narrow:wght@400;700&family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.mainContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  overflow-x: hidden;
  /* background-color: aqua; */
}

.wlBox {
  width: 1100px;
  /* max-width: 1200px;
  min-width: 1200px; */
  /* background-color: #afa291; */
}

.wBox {
  width: 930px;
}

.menuContainer {
  /* background-color: aqua; */
  width: 1200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.menuBox {
  display: flex;
  /* background-color: #ff6262; */
}

.menuItem {
  font-size: 16px;
  padding: 13px;
  margin: 0 5px;
  color: #252525;
  /* background-color: #007dfa; */
  cursor: pointer;
}

.menuItem:hover {
  text-decoration: underline;
}

.ctaMenu {
  background-color: #007dfa;
  text-align: center;
  padding: 13px 23px;
  font-size: 16px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}

.ctaMenu:hover {
  background-color: #006dfa;
}

.heroContainer {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  margin: 50px 0 80px 0;
}

.hTitle {
  margin-top: 40px;
  width: 600px;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 43px;
  line-height: 130%;
  color: #252525;
  margin-bottom: 20px;
}

.hSubTitle {
  width: 500px;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 25px;
  font-variation-settings: "wdth" 87.5;
  color: #515151;
  margin-bottom: 60px;
}

.heroCta {
  width: 200px;
  padding: 15px 40px;
  border-radius: 5px;
  font-size: 21px;
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 200;
  text-align: center;
  color: #fff;
  background-color: #ff6262;
  cursor: pointer;
}

.heroCta:hover {
  background-color: #ee4e4e;
}

.boxContainer {
  margin: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  /* background-color: #515151; */
}

.boxTitle {
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 800;
  font-style: normal;
  line-height: 130%;
  font-size: 41px;
  color: #252525;
}

.boxSubTitle {
  margin-top: 10px;
  margin-bottom: 45px;
  text-align: center;
  width: 600px;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 21px;
  color: #515151;
}

.featuresWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}

.features-ell {
  /* width: 200px; */
  z-index: -1;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.features-ell.left {
  left: 30%;
  /* top: 80%; */
  transform: translate(
    -100%,
    -20%
  ); /* Shifts image 50% of its width to the left */
}

.features-ell.right {
  /* z-index: -1; */
  right: 30%;
  /* top: 10%; */
  transform: translate(
    100%,
    -60%
  ); /* Shifts image 50% of its width to the right */
}

.featureBox {
  padding: 30px 25px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0px 0px 25px -15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
}

.featureItem {
  margin: 40px 40px 40px 40px;
  width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  /* background-color: aqua; */
}

.fItemTitle {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  margin: 30px 0 10px 0;
}

.fItemSubTitle {
  text-align: center;
  font-size: 15px;
  font-weight: 200;
}

.topFeacheresSection {
  width: 100%;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 50px 0 50px 0;
  /* background-color: aqua; */
}

.ell-s {
  width: 196px;
  z-index: 2;
  position: absolute;
  /* top: 10%; */
  /* transform: translateY(-50%); */
}

.ell-s.right {
  right: 7%;
  top: 40%;
  transform: translate(100%, -60%);
}

.ell-s.left {
  left: 7%;
  top: 99%;
  transform: translate(-100%, -20%);
}

.topFeaturesContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.topFeachure {
  margin: 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tfContent {
  width: 500px;
}

.tfrContent {
  width: 400px;
}

.tfTitle {
  /* width: 500px; */
  font-family: "PT Sans Narrow", sans-serif;
  font-weight: 800;
  font-style: normal;
  line-height: 130%;
  font-size: 41px;
  color: #252525;
  margin-top: 45px;
  margin-bottom: 10px;
}

.tfSubTitle {
  /* width: 500px; */
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 21px;
  color: #515151;
}

.solutionsSection {
  margin: 40px 0;
}

.solutionsContainer {
  display: flex;
  align-items: center;
}

.reviewsSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  /* background-color: #007dfa; */
}

.ell-rew {
  /* width: 196px; */
  z-index: -2;
  position: absolute;
  /* top: 10%; */
  /* transform: translateY(-50%); */
}

.ell-rew.right {
  right: 30%;
  top: 50%;
  transform: translate(100%, -60%);
}

.ell-rew.left {
  left: 30%;
  top: 60%;
  transform: translate(-100%, -20%);
}

.reviewsContainer {
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  flex-wrap: wrap;
}

.reviewItemBox {
  width: 430px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 25px -15px rgba(0, 0, 0, 0.2);
  padding: 25px 35px;
  display: flex;
  flex-direction: column;
  margin: 0 15px 40px 15px;
}

.rItemTtitle {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 21px;
  color: #252525;
}
.rItemSubTitle {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 100;
  font-size: 14px;
  color: #515151;
  margin: 15px 0 20px 0;
}

.rItemNameBox {
  display: flex;
  border-top: 1px solid #f2f2f2;
  padding-top: 15px;
}

.rItemNameBox img {
  margin-right: 10px;
  width: 40px;
  height: 40px;
}

.rItemNameBoxText {
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  /* padding-top: 5px; */
}

.rItemName {
  font-size: 16px;
  color: #252525;
  font-weight: 400;
}

.rItemRole {
  font-size: 12px;
  color: #515151;
}

.bookDemoSection {
  /* width: 100%; */
  /* background-color: #4285f4; */
  padding: 70px 0;
  /* margin: 30px 0; */
}

.bookDemoContainer {
  display: flex;
  align-items: start;
  justify-content: center;
}

.demoContent {
  width: 700px;
}

.demoTitle {
  margin-bottom: 25px;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 41px;
  color: #252525;
}

.demoSubTitle {
  width: 600px;
  margin-bottom: 40px;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 21px;
  color: #515151;
}

.dBullet {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.dBullet p {
  margin-left: 15px;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 14px;
  color: #000;
}

.demoForm {
  margin-left: 20px;
  padding: 40px 40px;
  width: 430px;
  background-color: #eff3f5;
  border-radius: 10px;
}

input,
label {
  font-family: "Noto Sans", serif;
  font-optical-sizing: auto;
  font-style: normal;
}

label {
  color: #515151;
  font-size: 16px;
}

input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  padding: 15px 20px;
  margin: 10px 0;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  font-size: 15px;
  color: #bebebf;
  font-weight: 300;
}

input[type="submit"] {
  width: 100%;
  padding: 15px 15px;
  margin-top: 10px;
  border: none;
  border-radius: 5px;
  background-color: #4caf50;
  color: white;
  font-size: 16px;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #45a049;
}

.faqSection {
  width: 100%;
  background-color: #f8fafb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 50px 0 110px 0;
  padding-bottom: 20px;
  position: relative;
}
.ell-faq {
  width: 196px;
  z-index: 10;
  position: absolute;
  /* top: 10%; */
  /* transform: translateY(-50%); */
}

.ell-faq.right {
  right: 7%;
  top: 102%;
  transform: translate(100%, -60%);
}

.ell-faq.left {
  left: 7%;
  top: -7%;
  transform: translate(-100%, -20%);
  /* background-color: #007dfa; */
}

.faqContainer {
  width: 750px;
  border-radius: 20px;
  box-shadow: 0px 0px 25px -15px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  padding: 35px 45px;
  background-color: #fff;
}

.faqItem:not(:last-child) {
  margin-bottom: 25px;
  border-bottom: 1px solid #f5f5f5;
  padding-bottom: 30px;
}

.faqTitle {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: 21px;
  color: #252525;
}

.faqSubTitle {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-size: 14px;
  color: #515151;
  margin-top: 5px;
}

.footerSection {
  padding: 20px;
  width: 100%;
}
.footerContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 10px;
}

.footerRight {
  display: flex;
  align-items: center;
}

.footerRight img {
  width: 26px;
  margin-right: 10px;
}

.footerRight a {
  margin-left: 10px;
  color: #000;
}

.footerRight a:visited {
  color: #000;
}