header p:first-of-type {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 88px;
  letter-spacing: -1px;
  line-height: 100%;
}

.main-cta div span {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 64px;
  letter-spacing: 0px;
  line-height: 100%;
}

.main-cta h1 {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 40px;
  letter-spacing: 0px;
  line-height: 110%;
}

.main-cta div, .main-cta p, header p:last-of-type {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 20px;
  letter-spacing: 0px;
  line-height: 150%;
}

footer p,
footer span {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 16px;
  letter-spacing: 0px;
  line-height: 150%;
}

.main-cta .android-button, .main-cta .ios-button {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  font-size: 18px;
  letter-spacing: 0px;
  line-height: 180%;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  background-color: #fcfaf9;
  overflow-x: hidden;
}

.logo {
  width: 144px;
  height: 32px;
}

header {
  background-color: #fcfaf9;
  background-image: url("../img/bg-main-mobile.png");
  background-size: 384px 655px;
  background-position: 120px -170px;
  padding: 64px 20px;
  margin-bottom: 100px;
  color: #191826;
}
header p:first-of-type {
  font-size: 40px;
}
header p:last-of-type {
  font-size: 16px;
}

.decorative-middle {
  background-color: #191826;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}
.decorative-middle .clip {
  overflow: hidden;
  position: absolute;
  height: 430px;
  width: 380px;
}
.decorative-middle .clip .decorative-background {
  margin: 0 auto;
  background-image: url("../img/bg-pattern-1.svg");
  background-repeat: no-repeat;
  background-size: contain;
  height: 465px;
  width: 312px;
  top: 0;
}
.decorative-middle img {
  height: 430px;
  transform: translateY(-100px);
  z-index: 20;
}

.main-cta {
  color: #191826;
  background-color: #fa7453;
  padding: 48px 20px;
}
.main-cta h1 {
  margin: 0;
  padding: 0;
}
.main-cta .custom-button {
  /* 1. Reset default browser styles */
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  outline: none;
  /* 2. Visual appearance */
  height: 64px;
  width: 335px;
  border-radius: 12px; /* Slightly rounded corners */
  cursor: pointer; /* Changes cursor to a hand tool */
}
.main-cta .button-bank {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.main-cta .ios-button {
  margin-bottom: 16px;
  margin-top: 48px;
  background-color: #191826;
  color: #fcfaf9;
}
.main-cta .ios-button::before {
  content: ""; /* Required for the pseudo-element to render */
  display: inline-block; /* Allows setting width and height */
  flex-shrink: 0; /* Keeps the icon from shrinking next to the text */
  width: 20px;
  height: 20px;
  margin-right: 5px; /* Adds space between the icon and text */
  background-size: contain; /* Ensures the icon fits the box scales */
  background-repeat: no-repeat;
  vertical-align: middle; /* Aligns it vertically with adjacent text */
}
.main-cta .ios-button::before {
  background-color: #fcfaf9;
  -webkit-mask-image: url("../img/icon-apple.svg");
  mask-image: url("../img/icon-apple.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  width: 20px;
  height: 20px;
}
.main-cta .ios-button:active::before, .main-cta .ios-button:hover::before {
  background-color: #191826;
}
.main-cta .ios-button:active, .main-cta .ios-button:hover {
  color: #191826;
  background-color: #66e2dc;
}
.main-cta .android-button {
  background-color: #fcfaf9;
  color: #191826;
  margin-bottom: 46px;
  left: 0;
}
.main-cta .android-button::before {
  content: ""; /* Required for the pseudo-element to render */
  display: inline-block; /* Allows setting width and height */
  flex-shrink: 0; /* Keeps the icon from shrinking next to the text */
  width: 20px;
  height: 20px;
  margin-right: 5px; /* Adds space between the icon and text */
  background-image: url("../img/icon-android.svg");
  background-size: contain; /* Ensures the icon fits the box scales */
  background-repeat: no-repeat;
  vertical-align: middle; /* Aligns it vertically with adjacent text */
}
.main-cta .android-button:active, .main-cta .android-button:hover {
  background-color: rgb(255, 185, 100);
}

footer {
  padding: 64px 12px;
  height: 357px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
footer p {
  margin: 0px;
}
footer span {
  font-weight: 900;
}
footer .social-media-buttons {
  width: 120px;
  height: 20px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

@media (min-width: 768px) {
  header {
    position: relative;
    background-image: none;
  }
  header::after {
    position: absolute;
    content: "";
    background-image: url("../img/bg-main-tablet.png");
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    height: 628px;
    width: 788px;
    top: 0;
  }
  header::before {
    position: absolute;
    content: "";
    display: inline-block;
    height: 300px;
    width: 266.67px;
    right: -140px;
    top: -50px;
    background-image: url("../img/bg-pattern-1.svg");
    background-size: contain;
    background-repeat: no-repeat;
  }
  header p:first-of-type {
    width: 416px;
    font-size: 64px;
  }
  header p:last-of-type {
    width: 504px;
    font-size: 18px;
  }
  .clip {
    left: 0;
  }
  .decorative-middle .clip .decorative-background {
    margin: 0;
  }
  .decorative-middle {
    border-radius: 16px;
    z-index: 50;
    width: 680px;
    height: 600px;
    margin: 0 auto;
  }
  .decorative-middle .clip {
    height: 600px;
  }
  .decorative-middle img {
    height: 566px;
    transform: translate(-150px, -90px);
  }
  .main-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16px;
    height: 628px;
    width: 356px;
    z-index: 90;
    margin-top: -490px;
    transform: translateX(120px);
  }
  .button-bank {
    align-self: center;
  }
  .main-cta .custom-button {
    width: 260px;
  }
  main,
  header,
  footer {
    padding: 64px 40px;
  }
  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .footer-content {
    display: flex;
    flex-direction: row;
  }
  footer {
    gap: 20px;
    justify-content: center;
    height: 137px;
    margin: 64px 40px 80px 40px;
  }
  .social-media-buttons {
    margin-left: 50px;
    align-self: center;
  }
}
@media (min-width: 1190px) {
  header {
    width: 100%;
    height: 694px;
    margin: 0 auto;
    overflow: hidden;
  }
  header p:first-of-type {
    font-size: 88px;
    width: 928px;
  }
  header p:last-of-type {
    width: 736px;
    font-size: 20px;
  }
  header::after {
    position: absolute;
    content: "";
    background-image: url("../img/bg-main-desktop.png");
    background-repeat: no-repeat;
    background-size: 1000px;
    display: inline-block;
    height: 655px;
    width: 380px;
    top: 200px;
    right: 200px;
  }
  header::before {
    width: 312px;
    height: 468px;
    top: -45px;
    right: 0;
    background-image: url("../img/bg-pattern-1.svg");
  }
  .decorative-middle {
    width: 1120px;
    height: 600px;
  }
  .decorative-middle img {
    height: 642px;
    transform: translate(-260px, -90px);
  }
  .decorative-middle .clip {
    width: 1120px;
  }
  .decorative-middle .clip .decorative-background {
    background-image: url("../img/bg-pattern-2.svg");
    margin: 0 auto;
  }
  .main-cta {
    width: 482px;
    height: 632px;
    transform: translateX(280px);
    margin-top: -510px;
  }
  .main-cta .custom-button {
    width: 400px;
  }
  .footer-content {
    justify-content: space-around;
  }
}/*# sourceMappingURL=style.css.map */