.navbarlogo3 {
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
  width: 160px;
  height: 56px;
  background-image: url("./public/navBarLogo.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.navbaroptionlabel {
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  font-family: var(--headline2);
  color: var(--content-text-title);
  text-align: center;
}
.navbaroptionlabel:hover {
  font-weight: 700;
  font-family: var(--headline2);
  color: var(--background-backgroundprimary);
}
.navbar-option32 {
  cursor: pointer;
  border: none;
  padding: var(--padding-5xs);
  background-color: transparent;
  border-radius: var(--br-9xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.navbar-option32:hover {
  background-color: var(--color-steelblue-200);
}
.menu8 {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-5xl);
}
.primary-button-label11 {
  width: 127px;
  position: relative;
  font-size: var(--body2-size);
  line-height: 135%;
  font-weight: 600;
  font-family: var(--headline2);
  color: var(--background-bg-banner-video);
  text-align: center;
  display: inline-block;
  flex-shrink: 0;
}
.primary-button11 {
  cursor: pointer;
  border: none;
  padding: var(--inset-md) var(--inset-xl);
  background-color: var(--background-bg-icon-gradient-1);
  border-radius: var(--lg);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
}
.vector-icon10 {
  width: 18px;
  position: relative;
  height: 12px;
}
.ichamburger9 {
  cursor: pointer;
  border: none;
  padding: var(--padding-7xs) var(--padding-10xs);
  background-color: transparent;
  width: 24px;
  height: 24px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.buttonhamburgercontainer9 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-21xl);
}
.navbarinnercontainer9 {
  width: 1240px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-0);
}
.navbaroutercontainer5 {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-5xs) var(--inset-3xl);
  position: sticky;
  top: 0;
  z-index: 2;
}
.bannervideo {
  width: 100%;
  box-shadow: 0px 4px 40px -2px rgba(255, 255, 255, 0.1);
  border-radius: var(--br-3xs);
  background-color: var(--background-bg-banner-video);
  border: 15px solid var(--blue-blue-500);
  box-sizing: border-box;
  height: 461px;
  overflow: hidden;
  flex-shrink: 0;
  max-width: 800px;
  z-index: 1;
}
.title2 {
  flex: 1;
  position: relative;
  line-height: 124%;
  background: linear-gradient(
    180deg,
    var(--content-icon-gradient-1),
    var(--content-text-highlight-2)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.highlightedtitle {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.subitle {
  flex: 1;
  position: relative;
  line-height: 130%;
}
.bannersubitle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 1204px;
  font-size: var(--title-3-strong-size);
}
.text26 {
  position: relative;
  font-size: var(--body2-size);
  line-height: 135%;
  font-weight: 600;
  font-family: var(--headline2);
  color: var(--background-backgroundprimary);
  text-align: center;
}
.buttonsecondary {
  cursor: pointer;
  border: 1px solid var(--background-backgroundprimary);
  padding: var(--inset-md) var(--inset-xl);
  background-color: transparent;
  width: 165px;
  border-radius: var(--lg);
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.primary-button12 {
  cursor: pointer;
  border: none;
  padding: var(--inset-md) var(--inset-xl);
  background-color: var(--background-bg-icon-gradient-1);
  border-radius: var(--lg);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
}
.bannerbuttonscontainer1 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
}
.bannersectiontitlewrapper6 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-11xl);
  max-width: 1204px;
  z-index: 0;
}
.bannerinnercontainer5 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-21xl) 0px;
  box-sizing: border-box;
  gap: var(--gap-21xl);
  max-width: 1204px;
}
.banneroutercontainer4 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0px var(--inset-3xl);
  background-image: url("./public/BannerOuterContainerbg.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  position: relative;
  font-size: var(--headline-11-size);
  color: var(--background-backgroundprimary);
}
.title3 {
  flex: 1;
  position: relative;
  line-height: 130%;
  background: linear-gradient(180deg, var(--content-icon-gradient-1), #3a806f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sectiontitle47 {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 1204px;
}
.featuresicon {
  width: 50.5px;
  border-radius: var(--br-5xs);
  height: 50.5px;
  object-fit: contain;
}
.cardtitle {
  align-self: stretch;
  position: relative;
  line-height: 130%;
}
.carddisc {
  align-self: stretch;
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  color: var(--content-text-discription);
}
.contenttext {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
.content3 {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xl);
}
.cardoshocomplianceouterframe {
  flex: 1;
  height: 383.5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-61xl) 0px 0px;
  box-sizing: border-box;
  transform: rotate(-4deg);
}
.cardoshocomplianceouterframe:hover {
  padding-top: var(--padding-51xl);
  box-sizing: border-box;
}
.cardbugettransparencyouterfram {
  flex: 1;
  height: 383.5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-31xl) 0px 0px;
  box-sizing: border-box;
  transform: rotate(-3deg);
}
.cardbugettransparencyouterfram:hover {
  padding-top: var(--padding-21xl);
  box-sizing: border-box;
}
.cardseamlesscommunicationouter {
  flex: 1;
  height: 383.5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-xl) 0px 0px;
  box-sizing: border-box;
}
.cardseamlesscommunicationouter:hover {
  padding-top: var(--padding-3xs);
  box-sizing: border-box;
}
.cardtrackprojectouterframe {
  flex: 1;
  height: 383.5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-31xl) 0px 0px;
  box-sizing: border-box;
  transform: rotate(3deg);
}
.cardtrackprojectouterframe:hover {
  padding-top: var(--padding-21xl);
  box-sizing: border-box;
}
.cardnormal {
  align-self: stretch;
  flex: 1;
  box-shadow: 0px -2px 10px rgba(233, 223, 255, 0.3),
    0px -2px 40px rgba(187, 155, 255, 0.15),
    0px 0.5px 0px rgba(255, 255, 255, 0.5) inset;
  border-radius: var(--br-xl);
  background: linear-gradient(
    180deg,
    var(--background-bg-card-opacity-2),
    var(--background-bg-card-opacity-1)
  );
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-13xl) var(--padding-5xl) var(--padding-143xl);
}
.cardautomateddoucmentouterfram {
  flex: 1;
  height: 383.5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-61xl) 0px 0px;
  box-sizing: border-box;
  transform: rotate(4deg);
}
.cardautomateddoucmentouterfram:hover {
  padding-top: var(--padding-51xl);
  box-sizing: border-box;
}
.cardcontainer {
  align-self: stretch;
  display: grid;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
  grid-template-columns: repeat(5, 1fr);
  column-gap: var(--gap-3xs);
  text-align: left;
  font-size: var(--body3-size);
}
.anchor-featurecardoutercontain {
  position: absolute;
  left: 0;
  top: -72px;
}
.featurecardoutercontainer {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-81xl) var(--padding-13xl) 0px;
  gap: var(--gap-41xl);
  position: relative;
}
.datapointtile {
  align-self: stretch;
  position: relative;
  line-height: 124%;
  background: linear-gradient(
    180deg,
    var(--content-icon-gradient-1),
    var(--content-text-highlight-2)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.datapointdisc {
  align-self: stretch;
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
}
.datapoint4 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-3xs);
  opacity: 1;
}
.datapoint4.animate {
  animation: 3s ease-in-out 0s infinite normal forwards float;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}
.dataprojectcompletioncontainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-181xl) 0px 0px;
}
.datapoint5 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-3xs);
  opacity: 1;
}
.datapoint5.animate {
  animation: 3s ease-in-out 0.5s infinite normal forwards float;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }
}
.datacommunicationdelayoutercon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xl) 0px 0px;
}
.datapoint6 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-3xs);
  opacity: 1;
}
.datapoint6.animate {
  animation: 3s ease-in-out 0.2s infinite normal forwards float;
}
.datamillionmanagedoutercontai {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs) 0px 0px;
}
.datahumanerrorscontai {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-181xl) 0px 0px;
}
.datapoints {
  align-self: stretch;
  overflow: hidden;
  display: grid;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 90px;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--gap-xl);
}
.datasectiontitlewrapper {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-11xl);
  z-index: 6;
  margin-top: -100px;
  position: relative;
  font-size: var(--headline32-size);
}
.datapointsinnercontainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 1204px;
}
.datapointsoutercontainer {
  align-self: stretch;
  backdrop-filter: blur(0px);
  background-color: var(--background-bg-banner-video);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-81xl) var(--padding-13xl);
  margin-top: -20px;
  position: relative;
  font-size: var(--headline-11-size);
  color: var(--content-text-discription);
}
.featureanddatapointscontainer {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  color: var(--content-text-title);
}
.disc1 {
  flex: 1;
  position: relative;
  line-height: 140%;
  font-weight: 300;
}
.disc {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: var(--body2-size);
}
.personasectiontitlewrapper {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.navigationiconleft {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.tabsleftnavigation {
  width: 40px;
  border-radius: var(--br-3xs) 0px 0px var(--br-3xs);
  background: linear-gradient(
    90deg,
    var(--background-bg-tab-unselected-gradient-1),
    var(--background-bg-tab-unselected-gradient-2)
  );
  height: 64px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.union-icon {
  width: 37px;
  position: relative;
  height: 36.4px;
}
.personas-icons {
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sectiontitle50 {
  align-self: stretch;
  position: relative;
  line-height: 130%;
}
.tabsselected {
  align-self: stretch;
  flex: 1;
  border-radius: var(--br-3xs);
  background: linear-gradient(
    90deg,
    var(--background-bg-tab-selected-gradient-1),
    var(--background-bg-tab-unselected-gradient-2)
  );
  border: 1px solid var(--content-text-highlight-2);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-xl) var(--padding-5xs);
  gap: var(--gap-5xs);
  min-width: 140px;
}
.union-icon1 {
  width: 38px;
  position: relative;
  height: 42px;
}
.personas-icons1 {
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--padding-3xs);
  box-sizing: border-box;
}
.tabsunselected {
  align-self: stretch;
  flex: 1;
  border-radius: var(--br-3xs);
  background: linear-gradient(
    117.54deg,
    var(--background-bg-tab-unselected-gradient-1),
    var(--background-bg-tab-unselected-gradient-2)
  );
  border: 1px solid var(--blue-blue-700);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-xl) var(--padding-5xs);
  gap: var(--gap-5xs);
  min-width: 140px;
}
.union-icon2 {
  width: 42px;
  position: relative;
  height: 35.1px;
}
.union-icon3 {
  width: 33.4px;
  position: relative;
  height: 34px;
}
.personas-icons3 {
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.union-icon4 {
  width: 38px;
  position: relative;
  height: 38px;
}
.personas-icons4 {
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-3xs);
  box-sizing: border-box;
}
.tabsbuttoncontainer {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-5xs);
}
.tabsrighttnavigation {
  width: 40px;
  border-radius: 0px var(--br-3xs) var(--br-3xs) 0px;
  background: linear-gradient(
    90deg,
    var(--background-bg-tab-unselected-gradient-2),
    var(--background-bg-tab-unselected-gradient-1)
  );
  height: 64px;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tabsbutton {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-9xs);
  text-align: center;
  font-size: var(--body3-size);
}
.contenttitle {
  align-self: stretch;
  position: relative;
  line-height: 140%;
  font-weight: 300;
}
.communicate-easily {
  line-height: 130%;
  font-family: var(--headline2);
}
.direct-messaging-with {
  line-height: 140%;
  font-weight: 300;
}
.track-and-manage {
  line-height: 140%;
  font-weight: 300;
  font-family: var(--headline2);
}
.view-selections-track-and-man {
  margin-bottom: 0px;
}
.communicate-easily-direct-mes {
  margin: 0;
  font-size: inherit;
  padding-left: var(--padding-2xl);
}
.contentdisc {
  align-self: stretch;
  position: relative;
}
.opentabcontent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
}
.opentabimage-icon {
  flex: 1;
  border-radius: var(--br-8xs);
  max-width: 100%;
  overflow: hidden;
  height: auto;
  object-fit: contain;
  display: flex;
}
.homeownersopentabcontainer {
  width: 100%;
  border-radius: var(--br-3xs);
  background: linear-gradient(
    90deg,
    var(--background-bg-tab-selected-gradient-1),
    var(--background-bg-tab-unselected-gradient-2)
  );
  border: 1px solid var(--color-steelblue-100);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xl);
  gap: var(--gap-5xs);
  max-width: 1204px;
}
.salesteamsopentabcontainer {
  width: 100%;
  border-radius: var(--br-3xs);
  background: linear-gradient(
    90deg,
    var(--background-bg-tab-selected-gradient-1),
    var(--background-bg-tab-unselected-gradient-2)
  );
  border: 1px solid var(--color-steelblue-100);
  box-sizing: border-box;
  display: none;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xl);
  gap: var(--gap-5xs);
  max-width: 1204px;
}
.tabscontainer {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
  text-align: left;
  font-size: var(--body2-size);
  color: var(--content-text-title);
}
.personasectioninnercontainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-41xl);
  max-width: 1204px;
}
.personasectionoutercontainer {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-21xl) var(--padding-13xl) var(--padding-81xl);
  position: relative;
}
.title6 {
  align-self: stretch;
  position: relative;
  line-height: 130%;
}
.productinactionsectiontitlewra {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 1204px;
  z-index: 2;
}
.bgglow-icon {
  align-self: stretch;
  max-width: 100%;
  overflow: hidden;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0;
  position: absolute;
  top: -50%;
  z-index: 0;
}
.bgglow-icon.animate {
  animation: 3s ease 1s infinite normal forwards slide-in-bottom;
}

@keyframes slide-in-bottom {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.laptopcontainer-icon {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  z-index: 1;
}
.productinactionsectioninnercon {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  max-width: 1204px;
  align-content: flex-start;
  height: auto;
}
.productinactionsectionoutercon {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-81xl) 0px;
  gap: var(--gap-21xl);
  position: relative;
  color: var(--background-bg-banner-video);
}
.union-icon5 {
  width: 26px;
  position: relative;
  height: 25.6px;
}
.union-wrapper {
  width: 40px;
  border-radius: var(--br-6xs);
  background-color: var(--blue-blue-500);
  height: 40px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.featuresicon5 {
  width: 50px;
  border-radius: var(--br-5xs);
  background: radial-gradient(
    50% 50% at 50% 50%,
    var(--background-bg-icon-gradient-1),
    var(--content-text-highlight-2)
  );
  height: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-11xs);
  box-sizing: border-box;
}
.title8 {
  flex: 1;
  position: relative;
  line-height: 130%;
}
.titlesection {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-xl);
}
.disc4 {
  align-self: stretch;
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  color: var(--content-text-discription);
}
.cardcontent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
.whycard {
  align-self: stretch;
  flex: 1;
  box-shadow: 0px -2px 10px rgba(233, 223, 255, 0.3),
    0px -2px 40px rgba(187, 155, 255, 0.15),
    0px 0.5px 0px rgba(255, 255, 255, 0.5) inset;
  border-radius: var(--br-xl);
  background: linear-gradient(
    180deg,
    var(--background-bg-card-opacity-2),
    var(--background-bg-card-opacity-1)
  );
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xl);
}
.union-icon6 {
  width: 28px;
  position: relative;
  height: 28.1px;
}
.whycard1 {
  align-self: stretch;
  flex: 1;
  box-shadow: 0px -2px 10px rgba(233, 223, 255, 0.3),
    0px -2px 40px rgba(187, 155, 255, 0.15),
    0px 0.5px 0px rgba(255, 255, 255, 0.5) inset;
  border-radius: var(--br-xl);
  background: linear-gradient(
    180deg,
    var(--background-bg-card-opacity-2),
    var(--background-bg-card-opacity-1)
  );
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xl);
}
.union-icon7 {
  width: 25.7px;
  position: relative;
  height: 29.1px;
}
.union-icon8 {
  width: 26.7px;
  position: relative;
  height: 30px;
}
.whyfeaturecardcontainer {
  align-self: stretch;
  display: grid;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-xl);
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap-xl);
}
.union-icon9 {
  width: 32px;
  position: relative;
  height: 32px;
}
.title12 {
  position: relative;
  line-height: 130%;
}
.titlesection4 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-xl);
}
.homeowners-stay-informed-with {
  margin-block-start: 0;
  margin-block-end: Mixed;
}
.project-managers-oversee-sched {
  margin: 0;
}
.discpointsleft {
  flex: 1;
  position: relative;
}
.discpoints {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-11xl);
  font-size: var(--body2-size);
  color: var(--content-text-discription);
}
.efficiencyfeaturecard {
  align-self: stretch;
  box-shadow: 0px -2px 10px rgba(233, 223, 255, 0.3),
    0px -2px 40px rgba(187, 155, 255, 0.15),
    0px 0.5px 0px rgba(255, 255, 255, 0.5) inset;
  border-radius: var(--br-xl);
  background: linear-gradient(
    180deg,
    var(--background-bg-card-opacity-2),
    var(--background-bg-card-opacity-1)
  );
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xl);
  gap: var(--gap-base);
}
.whyfeaturecardoutercontainer {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-xl);
  text-align: left;
  font-size: var(--body3-size);
  color: var(--content-text-title);
}
.whysectioninnercontainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-41xl);
  max-width: 1204px;
}
.whysectionoutercontainer {
  align-self: stretch;
  background: linear-gradient(
    203.54deg,
    #073e76 0.86%,
    #042444 14.46%,
    var(--background-bg-banner-video) 81.62%,
    #08498a
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-81xl) var(--padding-13xl);
  position: relative;
}
.title13 {
  flex: 1;
  position: relative;
  line-height: 124%;
  background: linear-gradient(
    180deg,
    var(--content-icon-gradient-1),
    var(--content-text-highlight-2)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.disc10 {
  flex: 1;
  position: relative;
  line-height: 140%;
  font-weight: 300;
}
.requestdemocontent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-5xl);
  max-width: 500px;
}
.requestsectionimage-icon {
  flex: 1;
  border-radius: var(--br-8xs);
  max-width: 100%;
  overflow: hidden;
  height: auto;
  object-fit: contain;
  display: flex;
  width: 100%;
}
.requestdemoinnercontainer {
  width: 100%;
  box-shadow: 0px -2px 10px rgba(233, 223, 255, 0.3),
    0px -2px 40px rgba(187, 155, 255, 0.15),
    0px 0.5px 0px rgba(255, 255, 255, 0.5) inset;
  border-radius: var(--br-xl);
  background: linear-gradient(
    180deg,
    var(--background-bg-card-opacity-2),
    var(--background-bg-card-opacity-1)
  );
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-41xl) var(--padding-xl);
  box-sizing: border-box;
  gap: 56px;
  max-width: 1204px;
}
.requestdemooutercontainer {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-81xl) var(--padding-13xl);
  text-align: left;
  font-size: var(--headline-11-size);
}
.faqsectiontitlewrapper {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.title15 {
  align-self: stretch;
  position: relative;
  line-height: 130%;
}
.disc11 {
  align-self: stretch;
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
}
.content8 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-base);
}
.accordianselectedcontentbox {
  width: 100%;
  border-radius: var(--br-3xs);
  background: linear-gradient(
    90deg,
    var(--background-bg-tab-selected-gradient-1),
    var(--background-bg-tab-unselected-gradient-2)
  );
  border: 1px solid var(--content-text-highlight-2);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-xl);
  gap: var(--gap-5xs);
  max-width: 800px;
  font-size: var(--body3-size);
}
.title16 {
  align-self: stretch;
  position: relative;
  line-height: 140%;
  font-weight: 300;
}
.disc12 {
  align-self: stretch;
  position: relative;
  line-height: 140%;
  font-weight: 300;
  display: none;
  /* manually added fontsize 16px */
  font-size: var(--body2-size); 
}
.content9 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
}
.accordianunselectedcontentbox {
  width: 100%;
  border-radius: var(--br-3xs);
  background: linear-gradient(
    117.19deg,
    var(--background-bg-tab-unselected-gradient-1),
    var(--background-bg-tab-unselected-gradient-2)
  );
  border: 1px solid var(--blue-blue-700);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-xl);
  gap: var(--gap-5xs);
  max-width: 800px;
}
.theres-no-need {
  margin: 0;
  line-height: 140%;
  font-weight: 300;
}
.disc14 {
  align-self: stretch;
  position: relative;
  display: none;
  /* manually added fontsize 16px */
  font-size: var(--body2-size);
}
.data-security-is {
  margin-block-start: 0;
  margin-block-end: Mixed;
  line-height: 140%;
  font-weight: 300;
}
.accordiancontainer {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 23px;
  text-align: left;
  font-size: var(--body2-size);
}
.faqoutercontainer {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-81xl) var(--padding-13xl);
  color: var(--content-text-title);
}
.joinussectioninnercontainer {
  width: 100%;
  box-shadow: 0px -2px 10px rgba(233, 223, 255, 0.3),
    0px -2px 40px rgba(187, 155, 255, 0.15),
    0px 0.5px 0px rgba(255, 255, 255, 0.5) inset;
  border-radius: var(--br-xl);
  background: linear-gradient(
    180deg,
    var(--background-bg-card-opacity-2),
    var(--background-bg-card-opacity-1)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-41xl) var(--padding-xl);
  box-sizing: border-box;
  gap: var(--gap-base);
  max-width: 1204px;
}
.joinussectionoutercontainer {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-81xl) var(--padding-13xl);
  font-size: var(--headline-11-size);
  color: var(--background-backgroundprimary);
}
.highlightedtitle3 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.disc20 {
  flex: 1;
  position: relative;
  line-height: 140%;
  font-weight: 300;
}
.contactlefttextcontainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-3xs);
  min-height: 422px;
  z-index: 0;
}
.label15 {
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  font-family: var(--headline2);
  color: var(--background-backgroundprimary);
  text-align: left;
}
.required8 {
  position: relative;
  font-size: var(--body7-size);
  line-height: 140%;
  font-family: var(--headline2);
  color: var(--background-backgroundprimary);
  text-align: left;
}
.labelbar8 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-9xs);
  z-index: 0;
}
.inputfield22 {
  border: none;
  outline: none;
  font-family: var(--headline2);
  font-size: var(--body2-size);
  background-color: var(--background-backgroundprimary);
  align-self: stretch;
  border-radius: var(--br-5xs);
  height: 48px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  box-sizing: border-box;
  color: var(--content-contentprimary);
  z-index: 1;
}
.frame-icon13 {
  width: 20px;
  position: relative;
  height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.nameerror14 {
  position: relative;
  font-size: var(--body6-size);
  line-height: 140%;
  font-weight: 500;
  font-family: var(--headline2);
  color: var(--background-backgroundprimary);
  text-align: left;
}
.error-container8 {
  margin: 0 !important;
  position: absolute;
  top: 77px;
  left: 0px;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-9xs) 0px;
  gap: var(--gap-9xs);
  z-index: 2;
}
.name-inputfield4 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  gap: var(--gap-9xs);
}
.nameerror15 {
  position: relative;
  font-size: var(--body6-size);
  line-height: 130%;
  font-weight: 500;
  font-family: var(--headline2);
  color: var(--background-backgroundprimary);
  text-align: left;
}
.error-container9 {
  margin: 0 !important;
  position: absolute;
  top: 77px;
  left: 0px;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-9xs) 0px;
  gap: var(--gap-9xs);
  z-index: 2;
}
.label18 {
  align-self: stretch;
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  font-family: var(--headline2);
  color: var(--background-backgroundprimary);
  text-align: left;
  display: inline-block;
  height: 25px;
  flex-shrink: 0;
}
.inputfield26 {
  border: none;
  background-color: var(--background-backgroundprimary);
  font-family: var(--font-inter);
  font-size: var(--body2-size);
  outline: none;
  align-self: stretch;
  flex: 1;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-3xs);
  color: var(--content-contentprimary);
  resize: none;
}
.inputfield25 {
  align-self: stretch;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-9xs);
}
.forminner4 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-21xl);
}
.primarybuttonwhitelabel {
  position: relative;
  font-size: var(--body2-size);
  line-height: 135%;
  font-weight: 600;
  font-family: var(--headline2);
  color: var(--content-contentprimary);
  text-align: center;
}
.primarybuttonwhite {
  cursor: pointer;
  border: 1px solid var(--primary-linear-without-image);
  padding: var(--inset-md) var(--padding-xl);
  background-color: var(--background-backgroundprimary);
  border-radius: var(--br-xs);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.primarybuttonwhite:hover {
  background-color: var(--color-lavender-100);
}
.contactusform5 {
  margin: 0;
  border-radius: var(--br-xl);
  background: linear-gradient(
    180deg,
    var(--background-bg-tab-selected-gradient-1) 9.07%,
    var(--background-bg-tab-unselected-gradient-2)
  );
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xl) var(--padding-13xl);
  box-sizing: border-box;
  gap: var(--gap-13xl);
  min-width: 476px;
  position: absolute;
  bottom: 34px;
  right: 34px;
  z-index: 1;
}
.contactusbackground1 {
  width: 100%;
  box-shadow: 0px -2px 10px rgba(233, 223, 255, 0.3),
    0px -2px 40px rgba(187, 155, 255, 0.15),
    0px 0.5px 0px rgba(255, 255, 255, 0.5) inset;
  border-radius: var(--br-xl);
  background: linear-gradient(
    180deg,
    var(--background-bg-card-opacity-1),
    var(--background-bg-card-opacity-1)
  );
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-11xl) var(--padding-13xl);
  box-sizing: border-box;
  position: relative;
  gap: var(--gap-13xl);
  max-width: 1240px;
  padding-right: var(--padding-521xl);
}
.contactusinnercontainer5 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-41xl) 0px 0px;
  box-sizing: border-box;
  max-width: 1240px;
  position: relative;
}
.contactusoutercontainer5 {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--padding-81xl) var(--padding-15xl) var(--padding-41xl);
  position: relative;
  text-align: left;
  font-size: var(--headline-11-size);
}
.homepagecontent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 1;
}
.footerlogo-icon4 {
  width: 240px;
  height: 68px;
  object-fit: cover;
  cursor: pointer;
}
.footerlogocontainer8 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 40px !important;
}
.footerlinkname64 {
  flex: 1;
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  font-family: var(--headline2);
  color: var(--content-text-discription);
  text-align: left;
}
.footerlinkname64:hover {
  font-weight: 700;
  font-family: var(--headline2);
  color: var(--background-backgroundprimary);
}
.footerlink64 {
  cursor: pointer;
  border: none;
  padding: var(--padding-9xs);
  background-color: transparent;
  align-self: stretch;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.footerlinkcolumone {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.icsocialmedia-icon46 {
  width: 24px;
  height: 24px;
}
.link32 {
  flex: 1;
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  font-family: var(--headline2);
  color: var(--content-text-discription);
  text-align: left;
}
.link32:hover {
  font-weight: 700;
  font-family: var(--headline2);
}
.socilalink32 {
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
  align-self: stretch;
  border-radius: var(--br-5xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-9xs);
}
.link33 {
  flex: 1;
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  font-family: var(--headline2);
  color: var(--content-text-title);
  text-align: left;
}
.link33:hover {
  font-weight: 700;
  font-family: var(--headline2);
}
.footerlinkcolumsocial8 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-base);
}
.footerlinks {
  align-self: stretch;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-23xl);
}
.logolinkscontainer8 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap-0);
}
.separator8 {
  align-self: stretch;
  background-color: var(--border-separator);
  height: 1px;
}
.footerinnercontainer8 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-13xl);
  max-width: 1240px;
}
.footeroutercontainer7 {
  align-self: stretch;
  background-color: var(--background-bg-banner-video);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-81xl) var(--padding-15xl);
  z-index: 0;
  font-size: var(--body2-size);
  color: var(--content-text-discription);
}
.builderally-landing-page {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: center;
  font-size: var(--headline32-size);
  color: var(--color-whitesmoke-100);
  font-family: var(--headline2);
}

@media screen and (max-width: 1920px) and (min-width: 1601px) {
  .tabsbutton {
    overflow-x: hide;
  }

  .productinactionsectionoutercon {
    position: relative;
  }

  .whycard1 {
    align-self: stretch;
    height: auto;
  }
}
@media screen and (max-width: 1279px) and (min-width: 961px) {
  .menu8 {
    display: flex;
    gap: var(--gap-5xs);
  }

  .ichamburger9 {
    display: none;
  }

  .title2 {
    font-size: var(--headline-1-size);
  }

  .subitle {
    font-size: var(--title-3-strong-size);
  }

  .title3 {
    font-size: var(--headline2-size);
  }

  .cardnormal {
    border-radius: var(--br-3xs);
  }

  .datapointtile {
    font-size: var(--headline-1-size);
  }

  .tabsbuttoncontainer {
    overflow-x: scroll;
  }

  .title6 {
    font-size: var(--headline2-size);
  }

  .title13 {
    font-size: var(--headline-1-size);
  }

  .requestdemocontent {
    max-width: 100%;
    flex: unset;
    align-self: stretch;
  }

  .requestsectionimage-icon {
    flex: unset;
    align-self: stretch;
  }

  .requestdemoinnercontainer {
    flex-direction: column;
  }

  .joinussectioninnercontainer {
    flex-direction: column;
  }
}
@media screen and (max-width: 1200px) {
  .logolinkscontainer8 {
    padding: var(--padding-21xl);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 960px) {
  .footerlogocontainer8 {
    flex: unset;
    align-self: stretch;
  }

  .footerlinks {
    flex: unset;
    align-self: stretch;
  }

  .logolinkscontainer8 {
    flex-direction: column;
    padding: var(--padding-21xl) var(--padding-5xl) var(--padding-11xl);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 960px) and (min-width: 601px) {
  .menu8 {
    display: none;
  }

  .ichamburger9 {
    display: flex;
  }

  .title2 {
    font-size: var(--font-size-33xl);
  }

  .subitle {
    font-size: var(--headline-3-regular-size);
  }

  .title3 {
    font-size: var(--headline2-size);
  }

  .cardoshocomplianceouterframe {
    align-self: stretch;
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    transform: rotate(0deg);
  }
  .cardoshocomplianceouterframe:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardbugettransparencyouterfram {
    align-self: stretch;
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    transform: rotate(0deg);
  }
  .cardbugettransparencyouterfram:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardseamlesscommunicationouter {
    align-self: stretch;
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
  }
  .cardseamlesscommunicationouter:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardtrackprojectouterframe {
    align-self: stretch;
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    transform: rotate(0deg);
  }
  .cardtrackprojectouterframe:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardnormal {
    height: auto;
    max-height: 200px;
  }

  .cardautomateddoucmentouterfram {
    align-self: stretch;
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    transform: rotate(0deg);
  }
  .cardautomateddoucmentouterfram:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardcontainer {
    gap: var(--gap-xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--gap-3xs);
  }

  .featurecardoutercontainer {
    padding-left: var(--padding-13xl);
    box-sizing: border-box;
  }

  .datapointtile {
    font-size: var(--headline-1-size);
  }

  .dataprojectcompletioncontainer {
    padding-top: var(--padding-xl);
    box-sizing: border-box;
  }

  .datamillionmanagedoutercontai {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .datahumanerrorscontai {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .datapoints {
    flex-direction: row;
    gap: var(--gap-21xl);
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gap-xl);
    position: unset;
    order: 2;
  }

  .datapointsinnercontainer {
    gap: var(--gap-21xl);
  }

  .featureanddatapointscontainer {
    gap: var(--gap-81xl);
  }

  .tabsleftnavigation {
    display: none;
  }

  .personas-icons {
    display: none;
  }

  .sectiontitle50 {
    font-size: var(--body2-size);
  }

  .personas-icons1 {
    display: none;
  }

  .personas-icons3 {
    display: none;
  }

  .personas-icons4 {
    display: none;
  }

  .tabsbuttoncontainer {
    overflow-x: scroll;
  }

  .tabsrighttnavigation {
    display: none;
  }

  .opentabcontent {
    flex: unset;
    align-self: stretch;
  }

  .opentabimage-icon {
    flex: unset;
    align-self: stretch;
  }

  .homeownersopentabcontainer {
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .salesteamsopentabcontainer {
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .personasectioninnercontainer {
    gap: var(--gap-41xl);
  }

  .personasectionoutercontainer {
    padding-left: var(--padding-13xl);
    padding-top: var(--padding-21xl);
    padding-right: var(--padding-13xl);
    box-sizing: border-box;
  }

  .title6 {
    font-size: var(--headline2-size);
  }

  .productinactionsectionoutercon {
    padding: var(--padding-81xl) var(--padding-13xl) var(--padding-21xl);
    box-sizing: border-box;
  }

  .discpointsleft {
    flex: unset;
    align-self: stretch;
  }

  .discpoints {
    flex-direction: column;
  }

  .title13 {
    font-size: var(--font-size-33xl);
    text-align: center;
  }

  .disc10 {
    text-align: center;
  }

  .requestdemocontent {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    flex: unset;
    align-self: stretch;
  }

  .requestsectionimage-icon {
    flex: unset;
    align-self: stretch;
  }

  .requestdemoinnercontainer {
    flex-direction: column;
    padding-top: var(--padding-11xl);
    padding-bottom: var(--padding-11xl);
    box-sizing: border-box;
  }

  .accordianselectedcontentbox {
    max-width: 1000px;
  }

  .accordianunselectedcontentbox {
    max-width: 1000px;
  }

  .faqoutercontainer {
    padding-top: var(--padding-21xl);
    box-sizing: border-box;
  }

  .joinussectioninnercontainer {
    flex-direction: column;
  }

  .joinussectionoutercontainer {
    padding-top: var(--padding-21xl);
    padding-bottom: var(--padding-21xl);
    box-sizing: border-box;
  }

  .disc20 {
    text-align: left;
  }

  .contactlefttextcontainer {
    min-height: 50px;
    flex: unset;
    align-self: stretch;
  }

  .contactusform5 {
    align-self: stretch;
    width: auto;
    min-width: 20px;
    max-width: 1000px;
    position: unset;
  }

  .contactusbackground1 {
    flex-direction: column;
    min-height: 482px;
    padding-right: var(--padding-13xl);
    display: flex;
  }
}
@media screen and (max-width: 600px) and (min-width: 298px) {
  .menu8 {
    display: none;
  }

  .primary-button11 {
    display: none;
  }

  .ichamburger9 {
    display: flex;
  }

  .title2 {
    font-size: var(--headline-2-size);
  }

  .subitle {
    font-size: var(--body3-size);
  }

  .primary-button12 {
    display: flex;
  }

  .bannerbuttonscontainer1 {
    flex-direction: column;
  }

  .banneroutercontainer4 {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .title3 {
    font-size: var(--title-3-strong-size);
  }

  .cardoshocomplianceouterframe {
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 220px;
    transform: rotate(0deg);
  }
  .cardoshocomplianceouterframe:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardbugettransparencyouterfram {
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 240px;
    transform: rotate(0deg);
  }
  .cardbugettransparencyouterfram:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardseamlesscommunicationouter {
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 240px;
  }
  .cardseamlesscommunicationouter:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardtrackprojectouterframe {
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 240px;
    transform: rotate(0deg);
  }
  .cardtrackprojectouterframe:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardnormal {
    height: auto;
  }

  .cardautomateddoucmentouterfram {
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 240px;
    transform: rotate(0deg);
  }
  .cardautomateddoucmentouterfram:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardcontainer {
    gap: var(--gap-xl);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: var(--gap-3xs);
  }

  .featurecardoutercontainer {
    padding-left: var(--padding-xl);
    padding-right: var(--padding-xl);
    box-sizing: border-box;
  }

  .datapointtile {
    font-size: var(--headline4-size);
  }

  .dataprojectcompletioncontainer {
    padding-top: var(--padding-xl);
    box-sizing: border-box;
  }

  .datamillionmanagedoutercontai {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .datahumanerrorscontai {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .datapoints {
    flex-direction: row;
    gap: var(--gap-21xl);
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--gap-xl);
    position: unset;
    order: 2;
  }

  .datasectiontitlewrapper {
    z-index: 6;
  }

  .datapointsinnercontainer {
    gap: var(--gap-21xl);
  }

  .datapointsoutercontainer {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .featureanddatapointscontainer {
    gap: var(--gap-81xl);
  }

  .tabsleftnavigation {
    display: flex;
  }

  .personas-icons {
    display: none;
  }

  .sectiontitle50 {
    font-size: var(--body2-size);
  }

  .personas-icons1 {
    display: none;
  }

  .personas-icons3 {
    display: none;
  }

  .personas-icons4 {
    display: none;
  }

  .tabsbuttoncontainer {
    overflow-x: scroll;
  }

  .tabsrighttnavigation {
    display: flex;
  }

  .opentabcontent {
    flex: unset;
    align-self: stretch;
  }

  .opentabimage-icon {
    flex: unset;
    align-self: stretch;
  }

  .homeownersopentabcontainer {
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .salesteamsopentabcontainer {
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .personasectionoutercontainer {
    padding-left: var(--padding-base);
    padding-top: var(--padding-21xl);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .title6 {
    font-size: var(--title-3-strong-size);
  }

  .productinactionsectionoutercon {
    gap: var(--gap-21xl);
    padding-top: var(--padding-xl);
    padding-bottom: var(--padding-xl);
    box-sizing: border-box;
  }

  .whyfeaturecardcontainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: var(--gap-xl);
  }

  .discpointsleft {
    flex: unset;
    align-self: stretch;
  }

  .discpoints {
    flex-direction: column;
  }

  .whysectionoutercontainer {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .title13 {
    font-size: var(--headline-2-size);
    text-align: center;
  }

  .disc10 {
    text-align: center;
  }

  .requestdemocontent {
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    flex: unset;
    align-self: stretch;
  }

  .requestsectionimage-icon {
    flex: unset;
    align-self: stretch;
  }

  .requestdemoinnercontainer {
    flex-direction: column;
    border-radius: var(--br-3xs);
    padding-top: var(--padding-11xl);
    padding-bottom: var(--padding-11xl);
    box-sizing: border-box;
  }

  .requestdemooutercontainer {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .faqoutercontainer {
    padding-left: var(--padding-base);
    padding-top: var(--padding-21xl);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .joinussectioninnercontainer {
    flex-direction: column;
    border-radius: var(--br-3xs);
  }

  .joinussectionoutercontainer {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .disc20 {
    text-align: left;
  }

  .contactlefttextcontainer {
    min-height: 50px;
    flex: unset;
    align-self: stretch;
  }

  .primarybuttonwhite {
    display: flex;
    padding-left: var(--padding-base);
    padding-top: var(--inset-md);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .contactusform5 {
    align-self: stretch;
    width: auto;
    min-width: 20px;
    max-width: 1000px;
    position: unset;
  }

  .contactusbackground1 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--br-3xs);
    padding-left: var(--padding-xl);
    padding-right: var(--padding-13xl);
    box-sizing: border-box;
    min-height: 482px;
    display: flex;
  }

  .contactusinnercontainer5 {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .contactusoutercontainer5 {
    gap: var(--gap-5xl);
    padding-top: var(--padding-21xl);
    padding-bottom: var(--padding-21xl);
    box-sizing: border-box;
  }

  .logolinkscontainer8 {
    gap: var(--gap-xl);
  }

  .footeroutercontainer7 {
    gap: var(--gap-xl);
  }
}
@media screen and (max-width: 420px) {
  .footerlinkcolumone {
    margin-bottom: 40px !important;
    flex: unset;
    align-self: stretch;
  }

  .footerlinkcolumsocial8 {
    flex: unset;
    align-self: stretch;
  }

  .footerlinks {
    flex-direction: column;
  }

  .logolinkscontainer8 {
    padding: var(--padding-11xl) var(--padding-5xl);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 297px) and (min-width: 100px) {
  .menu8 {
    display: none;
  }

  .primary-button11 {
    display: none;
  }

  .ichamburger9 {
    display: flex;
  }

  .title2 {
    font-size: var(--headline3-size);
  }

  .subitle {
    font-size: var(--body2-size);
  }

  .primary-button12 {
    display: flex;
  }

  .bannerbuttonscontainer1 {
    flex-direction: column;
  }

  .banneroutercontainer4 {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .title3 {
    font-size: var(--headline-3-regular-size);
  }

  .cardoshocomplianceouterframe {
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 300px;
    transform: rotate(0deg);
  }
  .cardoshocomplianceouterframe:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardbugettransparencyouterfram {
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 300px;
    transform: rotate(0deg);
  }
  .cardbugettransparencyouterfram:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardseamlesscommunicationouter {
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 300px;
  }
  .cardseamlesscommunicationouter:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardtrackprojectouterframe {
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 300px;
    transform: rotate(0deg);
  }
  .cardtrackprojectouterframe:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardnormal {
    height: auto;
  }

  .cardautomateddoucmentouterfram {
    height: auto;
    padding-top: 0px;
    box-sizing: border-box;
    max-height: 300px;
    transform: rotate(0deg);
  }
  .cardautomateddoucmentouterfram:hover {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .cardcontainer {
    gap: var(--gap-xl);
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: var(--gap-3xs);
  }

  .featurecardoutercontainer {
    padding-left: var(--padding-xs);
    padding-right: var(--padding-xs);
    box-sizing: border-box;
  }

  .datapointtile {
    font-size: var(--font-size-25xl);
  }

  .dataprojectcompletioncontainer {
    padding-top: var(--padding-xl);
    box-sizing: border-box;
  }

  .datahumanerrorscontai {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .datapoints {
    flex-direction: row;
    gap: var(--gap-21xl);
    flex-wrap: wrap;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: var(--gap-xl);
    position: unset;
    order: 2;
  }

  .datapointsinnercontainer {
    gap: var(--gap-21xl);
  }

  .datapointsoutercontainer {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .featureanddatapointscontainer {
    gap: var(--gap-81xl);
  }

  .tabsleftnavigation {
    display: flex;
  }

  .personas-icons {
    display: none;
  }

  .personas-icons1 {
    display: none;
  }

  .personas-icons3 {
    display: none;
  }

  .personas-icons4 {
    display: none;
  }

  .tabsbuttoncontainer {
    overflow-x: scroll;
  }

  .tabsrighttnavigation {
    display: flex;
  }

  .opentabcontent {
    flex: unset;
    align-self: stretch;
  }

  .opentabimage-icon {
    flex: unset;
    align-self: stretch;
  }

  .homeownersopentabcontainer {
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .salesteamsopentabcontainer {
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .personasectionoutercontainer {
    padding-left: var(--padding-base);
    padding-top: var(--padding-21xl);
    padding-right: var(--padding-base);
    box-sizing: border-box;
    height: auto;
    width: 100%;
    object-fit: cover;
  }

  .title6 {
    font-size: var(--headline-3-regular-size);
    line-height: var(--headline3-size);
  }

  .bgglow-icon {
    display: none;
    position: absolute;
    top: -50%;
  }

  .productinactionsectionoutercon {
    height: auto;
    gap: var(--gap-xl);
    padding-top: 0px;
    padding-bottom: 0px;
    box-sizing: border-box;
  }

  .title8 {
    flex: unset;
    align-self: stretch;
  }

  .titlesection {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .whyfeaturecardcontainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: var(--gap-xl);
  }

  .discpointsleft {
    flex: unset;
    align-self: stretch;
  }

  .discpoints {
    flex-direction: column;
  }

  .whysectionoutercontainer {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .title13 {
    font-size: var(--headline3-size);
    text-align: center;
  }

  .disc10 {
    text-align: center;
  }

  .requestdemocontent {
    align-items: center;
    justify-content: flex-start;
    flex: unset;
    align-self: stretch;
  }

  .requestsectionimage-icon {
    flex: unset;
    align-self: stretch;
  }

  .requestdemoinnercontainer {
    flex-direction: column;
    padding-top: var(--padding-11xl);
    padding-bottom: var(--padding-11xl);
    box-sizing: border-box;
  }

  .requestdemooutercontainer {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .faqoutercontainer {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
    height: auto;
    width: 100%;
    object-fit: cover;
  }

  .joinussectioninnercontainer {
    flex-direction: column;
  }

  .joinussectionoutercontainer {
    padding-left: var(--padding-base);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .disc20 {
    text-align: left;
  }

  .contactlefttextcontainer {
    min-height: 40px;
    flex: unset;
    align-self: stretch;
  }

  .primarybuttonwhite {
    display: flex;
    align-self: stretch;
    width: auto;
    padding-left: var(--padding-base);
    padding-top: var(--inset-md);
    padding-right: var(--padding-base);
    box-sizing: border-box;
  }

  .contactusform5 {
    align-self: stretch;
    width: auto;
    border-radius: var(--br-xs);
    padding: var(--padding-5xl) var(--padding-base);
    box-sizing: border-box;
    min-width: 20px;
    max-width: 1000px;
    position: unset;
  }

  .contactusbackground1 {
    flex-direction: column;
    border-radius: var(--br-xs);
    padding: var(--padding-5xl) var(--padding-base);
    box-sizing: border-box;
    min-height: 482px;
    padding-right: var(--padding-13xl);
    display: flex;
  }

  .contactusinnercontainer5 {
    padding-top: 0px;
    box-sizing: border-box;
  }

  .contactusoutercontainer5 {
    padding: var(--padding-17xl) var(--padding-base);
    box-sizing: border-box;
  }

  .footerlinks {
    gap: var(--gap-base);
  }

  .logolinkscontainer8 {
    gap: var(--gap-xl);
  }

  .footeroutercontainer7 {
    padding: var(--padding-17xl) var(--padding-base);
    box-sizing: border-box;
  }
}

.hamburgerlogo5 {
  cursor: pointer;
  border: none;
  padding: 0;
  background-color: transparent;
  width: 124px;
  height: 36px;
  background-image: url("./public/hamburgerlogo2@3x.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
}
.vector-icon17 {
  width: 16px;
  position: relative;
  height: 16px;
}
.iccancel6 {
  cursor: pointer;
  border: none;
  padding: var(--padding-9xs);
  background-color: transparent;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.hamburgerlogosection5 {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-0);
}
.request-a-meeting5 {
  position: relative;
  font-size: var(--body6-size);
  letter-spacing: 0.02em;
  line-height: var(--body7-size);
  text-transform: uppercase;
  font-family: var(--font-heebo);
  color: var(--color-gray-100);
  text-align: center;
}
.btn-arrow-icon5 {
  width: 24px;
  position: relative;
  height: 24px;
}
.btn-banner5 {
  cursor: pointer;
  border: none;
  padding: var(--padding-sm) var(--padding-base);
  background-color: var(--color-mediumseagreen);
  width: 338px;
  border-radius: var(--br-6xs);
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--gap-3xs);
}
.navbaroptionlabel5 {
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  font-family: var(--headline2);
  color: var(--content-text-title);
  text-align: center;
}
.navbar-option56 {
  cursor: pointer;
  border: none;
  padding: var(--padding-5xs);
  background-color: transparent;
  align-self: stretch;
  border-radius: var(--br-9xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.navbaroptionlabel9 {
  position: relative;
  font-size: var(--body2-size);
  line-height: 140%;
  font-weight: 300;
  font-family: var(--headline2);
  color: var(--content-text-title);
  text-align: center;
}
.navbaroptionlabel9:hover {
  font-weight: 700;
  font-family: var(--headline2);
  color: var(--background-backgroundprimary);
}
.navbar-option60 {
  cursor: pointer;
  border: none;
  padding: var(--padding-5xs);
  background-color: transparent;
  align-self: stretch;
  border-radius: var(--br-9xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.navbar-option60:hover {
  background-color: var(--color-steelblue-200);
}
.menu14 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--gap-5xl);
}
.primary-button-label20 {
  width: 127px;
  position: relative;
  font-size: var(--body2-size);
  line-height: 135%;
  font-weight: 600;
  font-family: var(--headline2);
  color: var(--background-bg-banner-video);
  text-align: center;
  display: inline-block;
  flex-shrink: 0;
}
.primary-button19 {
  cursor: pointer;
  border: none;
  padding: var(--inset-md) var(--inset-xl);
  background-color: var(--background-bg-icon-gradient-1);
  border-radius: var(--lg);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
}
.buttonhamburgercontainer10 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.hamburger-builderally {
  width: 370px;
  position: relative;
  background-color: var(--background-bg-banner-video);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--padding-xl) var(--padding-base);
  box-sizing: border-box;
  gap: var(--gap-xl);
  opacity: 0;
  min-width: 280px;
  max-width: 90%;
  overflow: auto;
}
.hamburger-builderally.animate {
  animation: 0.25s ease 0s 1 normal forwards slide-in-right;
}

@keyframes slide-in-right {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1367px) {
  .hamburger-builderally {
    display: none;
  }
}
@media screen and (max-width: 960px) and (min-width: 601px) {
  .menu14 {
    display: flex;
  }
}
@media screen and (max-width: 600px) and (min-width: 298px) {
  .menu14 {
    display: flex;
  }

  .primary-button19 {
    display: flex;
  }
}
@media screen and (max-width: 420px) {
  .request-a-meeting5 {
    font-size: var(--body7-size);
  }

  .btn-banner5 {
    gap: var(--gap-5xs);
    padding: var(--padding-3xs) var(--padding-5xs) var(--padding-3xs)
      var(--padding-xs);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 297px) and (min-width: 100px) {
  .menu14 {
    display: flex;
  }

  .primary-button19 {
    display: flex;
  }
}