* {
  box-sizing: border-box;

  margin: 0;
  padding: 0;
}

body {
  position: fixed;

  width: 100%;
  height: 100dvh;

  background: #0D1B2A;
}

.banner {
  position: relative;

  height: 100%;

  color: #fff;
  font-family: "Windows Country Flags", Inter, "Segoe UI", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.banner-wrapper {
  display: flex;
  flex-direction: column;

  padding-block-start: 15px;

  height: 100%;
}

.banner-wrapper::after {
  content: "";

  position: absolute;
  z-index: 1;
  bottom: 0;
  inset-inline-start: 0;

  width: 100%;
  height: 170px;

  background: linear-gradient(180deg, rgb(13 27 42 / 0%) 0%, #0D1B2A 100%);
}

.banner-content {
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-bottom: 30px;
  padding-block-start: 0;
  padding-inline: 35px;

  text-align: center;
}

.banner-content-list {
  display: flex;
  flex-direction: column;

  padding-inline-start: 20px;

  max-width: 357px;

  text-align: start;
  gap: 5px;
}

.banner-content-list-item {
  font-size: min(2.4vh, 16px);
  font-weight: 400;
  font-style: normal;
  line-height: 120%;
  letter-spacing: 0.5px;
}

.banner-content-logo-wrapper-mob {
  display: flex;
  justify-content: space-between;

  margin-bottom: 30px;
  padding-inline: 15px;
}

.banner-content-logo-wrapper {
  display: none;
}

.banner-content-logo-text {
  padding-block: 3px;
  padding-inline: 22px 0;

  width: 146px;

  background-image: url("data:image/svg+xml,%3Csvg width='148' height='22' viewBox='0 0 148 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 11C0.5 5.20101 5.20101 0.5 11 0.5H147V1.5H11C5.75329 1.5 1.5 5.75329 1.5 11H0.5ZM147 21.5H11C5.20101 21.5 0.5 16.799 0.5 11H1.5C1.5 16.2467 5.75329 20.5 11 20.5H147V21.5ZM11 21.5C5.20101 21.5 0.5 16.799 0.5 11C0.5 5.20101 5.20101 0.5 11 0.5V1.5C5.75329 1.5 1.5 5.75329 1.5 11C1.5 16.2467 5.75329 20.5 11 20.5V21.5ZM147 1V21V1Z' fill='%23CFA349'/%3E%3Cpath d='M11 18C10.0317 18 9.12166 17.8161 8.27 17.4484C7.41833 17.0807 6.6775 16.582 6.0475 15.9525C5.4175 15.323 4.91887 14.5821 4.5516 13.73C4.18433 12.8779 4.00047 11.9679 4 11C3.99953 10.0321 4.1834 9.12213 4.5516 8.27C4.9198 7.41787 5.41843 6.67703 6.0475 6.0475C6.67657 5.41797 7.4174 4.91933 8.27 4.5516C9.1226 4.18387 10.0326 4 11 4C11.9674 4 12.8774 4.18387 13.73 4.5516C14.5826 4.91933 15.3234 5.41797 15.9525 6.0475C16.5816 6.67703 17.0804 7.41787 17.4491 8.27C17.8178 9.12213 18.0014 10.0321 18 11C17.9986 11.9679 17.8147 12.8779 17.4484 13.73C17.0821 14.5821 16.5834 15.323 15.9525 15.9525C15.3216 16.582 14.5807 17.0809 13.73 17.4491C12.8793 17.8173 11.9693 18.0009 11 18ZM11 16.6C12.5633 16.6 13.8875 16.0575 14.9725 14.9725C16.0575 13.8875 16.6 12.5633 16.6 11C16.6 10.9183 16.5972 10.8336 16.5916 10.7459C16.586 10.6582 16.583 10.5854 16.5825 10.5275C16.5242 10.8658 16.3667 11.1458 16.11 11.3675C15.8533 11.5892 15.55 11.7 15.2 11.7H13.8C13.415 11.7 13.0855 11.563 12.8116 11.2891C12.5377 11.0152 12.4005 10.6855 12.4 10.3V9.6H9.6V8.2C9.6 7.815 9.7372 7.48553 10.0116 7.2116C10.286 6.93767 10.6155 6.80047 11 6.8H11.7C11.7 6.53167 11.773 6.29553 11.9191 6.0916C12.0652 5.88767 12.243 5.7213 12.4525 5.5925C12.2192 5.53417 11.983 5.4875 11.7441 5.4525C11.5052 5.4175 11.2571 5.4 11 5.4C9.43666 5.4 8.1125 5.9425 7.0275 7.0275C5.9425 8.1125 5.4 9.43667 5.4 11H8.9C9.67 11 10.3292 11.2742 10.8775 11.8225C11.4258 12.3708 11.7 13.03 11.7 13.8V14.5H9.6V16.425C9.83333 16.4833 10.0639 16.5272 10.2916 16.5566C10.5193 16.586 10.7555 16.6005 11 16.6Z' fill='%23CFA349'/%3E%3Cpath d='M138 1H147L140 11L147 21H138' stroke='%23CFA349'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;

  color: #CFA349;
  font-size: 12px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 0.4px;
}

.banner-content-logo {
  width: 110px;
  height: 20px;
}

.banner-content-title {
  margin-block-end: 18px;

  font-size: min(5vh, 38px);
  font-weight: 500;
  font-style: normal;
  line-height: 110%;
}

.banner-content-text {
  margin-bottom: 30px;

  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.banner-content-qr, .banner-content-qr-text {
  display: none;
}

.banner-btn {
  position: absolute;
  z-index: 2;
  bottom: 75px;
  inset-inline-start: 50%;

  padding: 20px 0;

  border: none;
  border-radius: 84px;

  width: 267px;

  background-color: #2E5FAA;

  color: #fff;
  font-size: 16px;
  font-weight: 500;
  font-style: normal;
  line-height: normal;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.6px;

  transform: translateX(-50%);
}

.banner-btn.android, .banner-btn.ios {
  margin-inline: auto;

  border-radius: 7px;

  width: 180px;
  height: 53px;

  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.banner-btn.android {
  background-image: url("https://fxprorepo.blob.core.windows.net/repo/bankpro/pages/one-page/android-btn.webp");
}

.banner-btn.ios {
  background-image: url("https://fxprorepo.blob.core.windows.net/repo/bankpro/pages/one-page/ios-btn.webp");
}

.banner-phone {
  position: absolute;
  z-index: 1;
  bottom: -125px;
  inset-inline-start: 50%;

  width: min(44vw, 185px);
  height: min(91vh, 655px);

  background: url("https://fxprorepo.blob.core.windows.net/repo/bankpro/pages/one-page/phone-app.webp") center no-repeat;
  -webkit-background-size: contain;
  background-size: contain;

  transform: translateX(-50%);
}

.banner-rock {
  position: absolute;
  bottom: -160px;

  width: 100%;
  height: 275px;

  background: url("https://fxprorepo.blob.core.windows.net/repo/bankpro/pages/one-page/mob-rock.webp") no-repeat;
  background-position: 0 0;
  -webkit-background-size: cover;
  background-size: cover;
}

.banner-rock-text {
  position: absolute;
  z-index: 1;
  bottom: 28px;
  inset-inline-start: 50%;

  display: block;

  width: 215px;

  color: #C9D2DC;
  font-family: "Windows Country Flags", Inter, "Segoe UI", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  line-height: 150%;
  text-align: center;

  transform: translateX(-50%);
}

.banner-rock-link {
  color: #fff;
  text-underline-offset: 3px;
}

@media (min-height: 650px) and (max-width: 768px) {
  .banner-phone {
    bottom: -170px;
  }
}

@media (min-height: 680px) and (max-width: 768px) {
  .banner-phone {
    bottom: -125px;
  }
}

@media (min-height: 700px) and (max-width: 768px) {
  .banner-phone {
    top: 210px;
    bottom: 0;
  }

  .banner-rock {
    bottom: 0%;
  }
}

@media (min-width: 768px) {
  body {
    position: unset;
  }

  .banner-wrapper {
    flex-direction: row;
    justify-content: center;

    padding-top: 50px;

    min-block-size: 100dvh;
    gap: 20px;
  }

  .banner-wrapper::after {
    display: none;
  }

  .banner-content {
    align-items: flex-start;

    margin-inline-start: -30px;
    padding-block: 100px 0;
    padding-inline: 35px 0;

    width: 430px;

    text-align: start;
  }

  .banner-content-logo-wrapper-mob {
    display: none;
  }

  .banner-content-logo-wrapper {
    display: block;

    margin-block-end: 20px;
  }

  .banner-content-logo {
    margin-inline: 0;

    width: 155px;
    height: 28px;
  }

  .banner-content-logo-text {
    position: relative;
    top: -35px;
    inset-inline-start: 10px;

    display: inline-block;
  }

  .banner-content-title {
    margin-block-end: 35px;

    font-size: 60px;
    line-height: 100%;
  }

  .banner-content-list {
    margin-block-end: 50px;
    padding-inline-start: 24px;

    max-width: 100%;
    gap: 4px;
  }

  .banner-content-list-item {
    font-size: 16px;
  }
    
  .banner-content-text {
    margin-bottom: 50px;
  }

  .banner-content-qr-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
  }

  .banner-content-qr {
    display: block;

    width: 160px;
  }

  .banner-content-qr-text {
    display: block;

    width: 126px;

    color: #CFA349;
    font-size: 22px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 0.7px;
  }
    
  .banner-btn {
    display: none;
  }

  .banner-phone {
    position: relative;
    z-index: -1;
    bottom: 0;
    inset-inline-start: 0;

    width: 274px;
    height: 752px;

    background-image: url('https://fxprorepo.blob.core.windows.net/repo/bankpro/pages/one-page/phone-app.webp');
    -webkit-background-size: contain;
    background-size: contain;

    transform: none;
  }

  .banner-rock {
    z-index: -1;
    top: 720px;

    height: 500px;

    background-image: url("https://fxprorepo.blob.core.windows.net/repo/bankpro/pages/one-page/rock.webp");
    background-position: 0 0;
    -webkit-background-size: cover;
    background-size: cover;
  }

  .banner-rock-text {
    bottom: 50px;
    inset-inline-start: unset;
    inset-inline-end: 40px;

    display: block;

    font-size: 16px;

    transform: translateX(0);
  }
}

@media (min-width: 834px) {
  .banner-content {
    padding-inline-start: 0;
  }
}

@media (min-width: 1024px) {
  .banner-content {
    width: 645px;
  }

  .banner-content-title {
    letter-spacing: 2.6px;
  }

  .banner-phone {
    position: relative;
    inset-inline-start: -100px;
  }

  .banner-rock-text {
    inset-inline-end: 165px;
  }
}

@media (min-width: 2000px) {
  .banner-rock {
    height: -webkit-fill-available;

    background-position: 0 0;
    -webkit-background-size: cover;
    background-size: cover;
  }
}