@font-face {
  font-family: "SC Prosper Sans Medium";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/SCProsperSans-Medium.otf"), url("../fonts/SCProsperSans-Medium.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SC Prosper Sans Regular";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/SCProsperSans-Regular.otf"), url("../fonts/SCProsperSans-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SC Prosper Sans Bold";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/SCProsperSans-Bold.otf"), url("../fonts/SCProsperSans-Bold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "SC Prosper Sans Light";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/SCProsperSans-Light.otf"), url("../fonts/SCProsperSans-Light.ttf") format("truetype");
  font-display: swap;
}

body {
  margin: 0;
  padding: 0;
  background: #fafafa;
}

.px-4 {
  padding: 20px;
}

.mt-3 {
  margin-top: 20px;
}

.user-landing-page-container {
  font-family: "SC Prosper Sans Regular", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 15px;
  border-radius: 35px;
  max-width: 100%;
  margin: auto;
  color: #191919;
  padding-top: 0;
}

.user-landing-page-container .header {
  padding: 0;
}

.user-landing-page-container .header .header__left {
  display: none;
}

.user-landing-page-container .header .header__content {
  background: linear-gradient(90deg, #1f2f87 0%, #0a498c 100%);
  padding: 30px;
  text-align: center;
}

.user-landing-page-container .header .header__content .title {
  font-size: 26px;
  line-height: 31px;
  /* padding-bottom: 15px; */
  color: #fff;
}

.user-landing-page-container .body .body__left {
  display: none;
}

.user-landing-page-container .body .body__content .section-container .section {
  background: #fff;
  margin-bottom: 20px;
}

.user-landing-page-container .body .body__content .section-container .section .section__header {
  font-family: "SC Prosper Sans Medium", Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 23px;
}

.user-landing-page-container .body .body__content .section-container .section .section__list {
  font-size: 14px;
  line-height: 20px;
  margin: 0;
  color: #717478;
  padding: 20px;
}

.user-landing-page-container .body .body__content .section-container .section .section__list li {
  list-style-type: disc;
}

.user-landing-page-container .body .body__content .section-container .section .section__button-bg-blue {
  border-radius: 27px;
  display: inline-block;
  align-items: center;
  padding: 10px 28px;
  margin-top: 30px;
  border: 1px solid #2772c7;
  font-size: 16px;
  background: #2772c7;
  color: #fff;
  cursor: pointer;
}

@media screen and (min-width: 768px) {
  .user-landing-page-container {
    max-width: 1000px;
    background: #fafafa;
  }

  .user-landing-page-container .header {
    display: flex;
  }

  .user-landing-page-container .header .header__left {
    width: 30%;
    display: block;
    padding-left: 20px;
  }

  .user-landing-page-container .header .header__left .logo {
    background-size: 130px 51px;
    background-image: url("../img/standard-chartered-logo.svg");
    background-position: left;
    background-repeat: no-repeat;
    height: 100px;
    width: 100%;
  }

  .user-landing-page-container .header .header__content {
    width: 70%;
    display: block;
    background: #fafafa;
  }

  .user-landing-page-container .header .header__content .title {
    color: #000;
    width: 100%;
    font-size: 30px;
    text-align: start;
  }

  .user-landing-page-container .body {
    display: flex;
  }

  .user-landing-page-container .body .body__left {
    width: 30%;
    display: block;
    padding-left: 20px;
  }

  .user-landing-page-container .body .body__content {
    width: 70%;
    display: block;
  }
}

#spinner {
  font-family: "SC Prosper Sans Regular";
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 99;
  background-color: #f8f8f8;
  font-size: 16px;
  color: #333;
}
#spinner .container .footer {
  position: fixed;
  bottom: 40px;
  text-align: center;
  margin: 0 auto;
  padding: 0 10px;
}
#spinner .container {
  display: flex;
  height: 100%;
  flex-flow: column;
  margin: auto;
  justify-content: center;
  align-items: center;
}

.spinner {
  background-image: url("../img/spinner.gif");
  background-size: auto !important;
  width: 145px;
  height: 145px;
  margin: 0 auto 20px;
}
.display-none {
  display: none;
}

.display-block {
  display: block !important;
}

.display-flex {
  display: flex !important;
}