@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: 0;
  font-family: "Open Sans", sans-serif;
}

body,
input,
button {
  font-family: "Open Sans", sans-serif;
  font-size: 1.6rem;

  border: none;
  background: none;

  transition: filter 0.2s;
}

html {
  font-size: 62.5%;
}

button:hover {
  filter: brightness(0.8);
}

button {
  cursor: pointer;
  background: #00a0e9;
  color: #fff;
  padding: 1.6rem 4rem;
  border-radius: 3rem;
}

button.lg {
  padding: 2rem 5rem;
  border-radius: 4rem;
  font-size: 2.2rem;
}

nav.menu {
  position: absolute;
  z-index: 1;
  margin-top: 45px;
  height: 80px;
  width: 100%;
  border-radius: 64px;
  display: flex;
  align-items: center;
  padding: 0 94px;
  justify-content: space-between;
}

nav.menu ul {
  list-style: none;
}

nav.menu ul {
  display: flex;
  align-items: center;
  margin: 1rem;
  padding: 1rem;
}

nav.menu ul div.neck {
  display: flex;
}

nav.menu ul li {
  padding: 0 20px;
}

nav.menu ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
}

nav.menu ul li a {
  transition: color 0.2s;
}

nav.menu ul li a:hover {
  color: #01b8ff;
}

nav.menu div.conexpayButton {
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4rem;
  padding: 1rem 2rem;
}

nav.menu div.conexpayButton button {
  margin-left: 20px;
}

div.banner {
  position: relative;

  width: 100%;
  height: 1100px;
  background: url(/assets/background.png) no-repeat;
  background-size: cover;
  background-position: center center;
}
div div.content {
  height: 100%;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 2rem;
}

div.banner div.content div.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
}

div.banner div.content h1.title {
  max-width: 600px;
  color: #fff;
  font-size: 8rem;
  line-height: 9rem;
  margin-bottom: 32px;
}

div.banner div.content h1.title span.blue {
  color: #00a0e9;
}

div.cards {
  margin-top: 14rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

div.cards div.productCard {
  height: 22rem;
  padding: 2rem;
  margin: 0 1.2rem;
  background: rgb(82, 41, 179, 0.8);
  border-radius: 1.6rem;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

div.cards div.productCard button {
  background: #fff;
  color: #5329b2;
  align-self: flex-end;
}

div.cards div.productCard h1 {
  color: #fff;
  font-size: 3rem;
}

div.solutions div.content {
  display: flex;
  flex-direction: row;
  padding: 170px 0;
}

div.solutions div.content div.left div.titles h1.subtitle {
  font-size: 2rem;
  color: #1e212c;
}

div.solutions div.content div.left div.titles h1 {
  font-size: 6rem;
}

div.solutions div.content div.left div.titles h1.purple {
  color: #5329b2;
}

div.solutions div.content div.left div.titles h1.blue {
  color: #009fdd;
}

div.solutions div.content div.left div.titles {
  margin-bottom: 70px;
}

div.solutions div.content div.left div.about {
  display: flex;
  flex-direction: column;
  width: 700px;
  padding: 60px;
  background: #f4f5f6;
  border-radius: 2rem;
}

div.solutions div.content div.left div.about h1.title {
  max-width: 400px;
}

div.solutions div.content div.left div.about h1.subtitle {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

div.solutions div.content div.left div.about span.description {
  max-width: 360px;
  margin-top: 24px;
  font-size: 1.8rem;
  color: #787a80;
}

div.solutions div.content div.left div.about span.showMore {
  margin-top: 64px;
}

div.solutions div.content div.right {
  margin-top: 72px;
  margin-left: -164px;
  display: flex;
  flex-direction: column;
}

div.solutions div.content div.right img {
  width: 700px;
}

div.solutions div.content div.right button.requestContact.square {
  display: flex;
  align-items: center;
  justify-content: space-between;

  background: linear-gradient(to right, #5329b2, #009fdd);
  border-radius: 0;
  height: 140px;
  width: 460px;
}

div.solutions div.content div.right button.requestContact.square span {
  font-size: 3.4rem;
  font-weight: bold;
  color: #fff;
}

div.solutions div.content div.right button.requestContact.square img {
  height: 60px;
  width: 60px;
}

div.conexpay {
  width: 100%;
  background: url(/assets/conexpay-banner.png) no-repeat;
  background-size: cover;
  background-position: center center;
}

div.conexpay div.content {
  display: flex;
  padding: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

div.conexpay div.content h1.title {
  max-width: 800px;
  font-size: 6rem;
  color: #fff;
  margin-bottom: 32px;
}

div.conexpay div.content span.subtitle {
  font-weight: lighter;
  font-size: 3rem;
  color: #fff;
  margin-bottom: 32px;
}

div.conexpay div.content a.showmore-link {
  margin-top: 32px;
  align-self: flex-end;
}

div.conexpay div.content div.showmore {
  display: flex;
  align-items: center;
}

div.conexpay div.content div.showmore div.play {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background: #009fdd;
  margin-right: 30px;

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

div.conexpay div.content div.showmore div.play img {
  height: 30px;
  width: 30px;
}

div.conexpay div.content div.showmore span {
  font-size: 2.6rem;
  color: #fff;
  font-weight: bold;
}

div.ratings div.content {
  padding: 110px 0;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

div.ratings div.content div.left {
  max-width: 600px;
  display: flex;
  flex-direction: column;
}

div.ratings div.content div.left h1.title {
  margin-top: 12px;
}

div.ratings div.content div.left img {
  height: 72px;
  width: 72px;
  margin-top: 60px;
}

div.ratings div.content div.left span.description {
  font-size: 1.6rem;
  color: #424551;
  margin-top: 24px;
}

div.ratings div.content div.left span.customerName {
  font-weight: bold;
  color: #1e212c;
  margin-top: 24px;
}

div.financeEducation {
  background: #f4f5f6;
  padding: 80px 0;
}

div.financeEducation div.content div.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

div.financeEducation div.content div.header button.showmore {
  border: 1px solid #009fdd;
  background: #fff;
  color: #009fdd;
  min-width: 160px;
}

div.financeEducation div.content div.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-column-gap: 30px;
  min-height: 390px;
  margin-top: 60px;
}

div.financeEducation div.content div.cards div.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: #fff;
  padding: 40px;
}

div.financeEducation div.content div.cards div.card p {
  margin-top: 2rem;
}

div.financeEducation div.content div.cards div.card span.subtitle {
  font-size: 1.4rem;
  color: #787a80;
  margin-bottom: 16px;
}

div.financeEducation div.content div.cards div.card h1.title {
  font-size: 2rem;
  color: #1e212c;
}

div.financeEducation div.content div.cards div.card div.showmore {
  align-self: flex-end;
  display: flex;
  align-items: center;
}

div.financeEducation div.content div.cards div.card div.showmore span {
  margin-right: 12px;
}

div.financeEducation div.content div.cards div.card.filled {
  padding: 0;
  background: url(/assets/card-background.png) no-repeat;
  background-size: cover;
}

div.financeEducation div.content div.cards div.card.filled div.cardOverlay {
  background: rgba(0, 0, 0, 0.5);
  padding: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

div.financeEducation div.content div.cards div.card.filled h1.title {
  color: #fff;
}

div.financeEducation div.content div.cards div.card.filled p {
  color: #fff;
}

div.financeEducation div.content div.cards div.card.filled div.showmore span {
  color: #fff;
}

footer {
  background: #1c1923;
  padding: 8rem 4rem;
}

footer div.content {
  height: 100%;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  color: #fff;

  display: flex;
  justify-content: space-between;
}

footer div.content div.logo {
  display: flex;
  flex-direction: column;
}

footer div.content div.logo span {
  margin-top: 48px;
  color: #fff;
  font-size: 1.2rem;
}

footer div.content div.links {
  display: flex;
  flex-direction: column;
}

footer div.content div.links span.title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 16px;
}

footer div.content div.links a {
  text-decoration: none;
  color: #787a80;
  margin-bottom: 6px;
}

footer div.content div.links span.value {
  color: #787a80;
}

footer div.content div.social {
  display: flex;
  flex-direction: column;
}

footer div.content div.social span.title {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 16px;
}

footer div.content div.social div.alignLogo {
  display: flex;
}

footer div.content div.social div.alignLogo img {
  margin-right: 12px;
}

input,
textarea {
  margin-bottom: 20px;
  height: 65px;
  background: #f4f5f6;
  border: 1px solid #d7dadd;
  border-radius: 4px;
  padding: 0 20px;
}

a {
  text-decoration: none;
}

@media (max-width: 1300px) {
  div.banner {
    padding-top: 20rem;
    padding-bottom: 4rem;
    height: 100%;
  }

  div div.content {
    padding: 0 2rem;
  }

  div.cards {
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 2rem;
  }

  div.solutions div.content {
    flex-direction: column;
    align-items: center;
    padding: 10rem 0;
  }

  div.solutions div.content div.left {
    width: 90%;
    margin: 0 auto;
  }

  div.solutions div.content div.left div.about {
    width: 100%;
  }

  div.solutions div.content div.right {
    width: 90%;
    margin: 2rem auto;
  }

  div.solutions div.content div.right img {
    width: 100%;
    margin-top: 2rem;
  }

  div.solutions div.content div.right button.requestContact.square {
    width: 100%;
    margin-top: 2rem;
  }

  div.solutions div.content div.left div.about span.description {
    max-width: 100%;
  }

  div.conexpay div.content {
    padding: 2rem 4rem;
  }

  div.conexpay div.content h1.title {
    font-size: 5rem;
  }

  div.conexpay div.content span.subtitle {
    font-size: 2rem;
  }

  div.banner div.content h1.title {
    font-size: 7rem;
  }
}

@media (max-width: 960px) {
  footer div.content {
    flex-direction: column;
  }

  footer div.content div.logo img {
    width: 260px;
  }
}

@media (max-width: 940px) {
  div.banner div.content h1.title {
    font-size: 6rem;
    line-height: 7rem;
  }
}

@media (max-width: 900px) {
  nav.menu {
    flex-direction: column;
    margin-top: 3rem;
  }

  div.banner {
    padding-top: 30rem;
  }

  nav.menu div.conexpayButton {
    margin-top: 1rem;
  }

  div.banner div.content h1.title {
    font-size: 5rem;
    line-height: 6rem;
  }

  div.solutions div.content div.left div.titles h1 {
    font-size: 5rem;
  }

  div.conexpay div.content h1.title {
    font-size: 4rem;
  }

  button.lg {
    font-size: 1.8rem;
  }

  div.conexpay div.content div.showmore span {
    font-size: 1.8rem;
  }

  div.conexpay div.content div.showmore div.play {
    width: 60px;
    height: 60px;
    margin-right: 15px;
  }

  div.conexpay div.content div.showmore div.play img {
    width: 15px;
    height: 15px;
  }

  div.solutions div.content div.right button.requestContact.square span {
    font-size: 2.6rem;
  }
}

@media (max-width: 840px) {
  div.right img.logo {
    display: none;
  }
}

@media (max-width: 700px) {
  div.cards {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 600px) {
  div.solutions div.content div.right button.requestContact.square {
    height: 110px;
  }
}

@media (max-width: 450px) {
  .header-logo {
    width: 120px;
  }

  nav.menu div.conexpayButton img {
    height: 20px;
  }

  nav.menu div.conexpayButton button {
    font-size: 1.4rem;
  }
}