.page-background-image {
  background-image: url("./../images/value-added-service/VAS_Hero_Image@2x.png");
  width: 100%;
  height: 300px;
  text-align: center;
  display: table;
}

.page-background-state {
  background: linear-gradient(180deg, #0fc29a 0%, #2b5582 100%);
  opacity: 0.8;
}

.page-header-text {
  display: table-cell;
  vertical-align: middle;
  height: 100%;
  color: #ffffff;
}
.header-title {
  font-size: 50px;
}
.header-data {
  font-size: 32px;
}

.insurance,
.banking,
.legal-consulting,
.credit-card,
.online-sellers,
.business-apps {
  display: inline-block;
}

.card-insurance-block,
.card-legal-consulting-block,
.card-credit-card-block,
.card-online-sellers-block,
.card-business-apps-block {
  display: none;
}

.page-body {
  width: 80%;
  margin: 0 auto;
  position: relative;
  top: -55px;
  padding-top: 96px;
}

.service-text {
  font-size: 14px;
  color: #1c4587;
  text-align: center;
  display: table-footer-group;
}

.margin-auto {
  margin: 0 auto;
  padding-bottom: 10px;
}

.services {
  display: flex;
  justify-content: space-between;
  padding-bottom: 32px;
  z-index: 10;
}

.service-style {
  border: 0.5px solid #becbd9;
  border-radius: 6px;
  padding: 12px 0px;
  width: 162px;
  height: 88px;
  display: table;
  background-color: #ffffff;
  border: 2px solid #e2e4e7;
}

.service-style:hover {
  box-shadow: 0px 5px 20px #4342424d;
  border: 2px solid #0fc29a;
  box-shadow: 0px 3px 8px #4342421a;
  cursor: pointer;
}
.active-service {
  border: 2px solid #0fc29a;
  box-shadow: 0px 5px 20px #4342424d;
}

.welcome-text {
  font-size: 18px;
  color: #202020;
  padding: 8px 0px 24px 0px;
  line-height: 27px;
}

.card-style {
  width: 360px;
  height: 100%;
  box-shadow: 0px 5px 10px #4342421a;
  border-radius: 8px;
}

.card-banking {
  border: 0.5px solid #ec4392;
}

.card-benefit-header {
  font-size: 18px;
}

/* .card-insurance {
 border: 0.5px solid #EC4392;
}

.card-legal-consulting {
 border: 0.5px solid #EC4392;
}

.card-online-selling {
 border: 0.5px solid #EC4392;
}

.card-credit-card {
 border: 0.5px solid #EC4392;
}

.card-business-apps {
 border: 0.5px solid #EC4392;
} */

.card-benefits-list {
  list-style-type: none;
}

.card-benefits-li {
  display: inline-flex;
  line-height: 25px;
  font-size: 18px;
}
.card-benefits-li::before {
  position: relative;
  display: inline-block;
  left: -15px;
  font-size: 16px;
  top: 2px;
}
.card-benefits-li-banking::before {
  content: url(./../images/value-added-service/Check_pink.svg);
}

/* .card-benefits-li-insurance::before{
 content: url(./../images/value-added-service/Check_pink.svg);
}

.card-benefits-li-legal-advice::before{
 content: url(./../images/value-added-service/Check_pink.svg);
}

.card-benefits-li-credit-card::before{
 content: url(./../images/value-added-service/Check_pink.svg);
}

.card-benefits-li-online-sellers::before{
 content: url(./../images/value-added-service/Check_pink.svg);
}

.card-benefits-li-business-apps::before{
 content: url(./../images/value-added-service/Check_pink.svg);
} */

.card-header {
  display: flex;
  justify-content: flex-start;
}

.card-title {
  font-size: 18px;
  color: #202020;
}

.card-info {
  font-size: 18px;
  color: #505050;
  line-height: 25px;
}

.brand-logo {
  padding: 12px 16px;
  z-index: -1;
  border-radius: 8px 0px;
}

.brand-logo-banking {
  background-color: #ffe6f7;
}

.card-interested {
  display: flex;
  justify-content: flex-end;
  color: #ffffff;
}

.card-interested-button {
  background: #2b5582 0% 0% no-repeat padding-box;
  box-shadow: 10px 10px 25px #2b55821a;
  border-radius: 100px;
}

/* .brand-logo-insurance {
 background-color: #FFE6F7;
}

.brand-logo-legal-consulting {
 background-color: #FFE6F7;
}

.brand-logo-credit-card {
 background-color: #FFE6F7;
}

.brand-logo-online-selling {
 background-color: #FFE6F7;
}

.brand-logo-business-apps {
 background-color: #FFE6F7;
} */

.stay-tuned {
  margin: 78px auto auto auto;
  text-align: center;
  width: 50%;
}

.stay-tuned-moto {
  font-size: 20px;
}

.stay-tuned-desscription {
  line-height: 24px;
  font-size: 18px;
}
.stay-tuned-link {
  color: #0fc29a;
  cursor: pointer;
}
.page-footer {
  text-align: center;
}

@media (max-width: 600px) {
  .page-body {
    width: 100%;
    padding-top: 24px;
  }

  .page-background-image {
    height: 140px;
  }

  .header-title {
    font-size: 24px;
  }

  .header-data {
    font-size: 16px;
  }
  .page-body {
    top: 0px;
  }

  .services {
    overflow-x: scroll;
    padding: 18px 0px;
    position: sticky;
    top: 59px;
    background-color: #ffffff;
    padding-left: 24px;
  }

  .service-style {
    display: inline-flex;
    height: 30px;
    width: 100%;
  }

  .service-image {
    display: inline-block;
    padding: 0px 10px;
  }

  .margin-auto {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    padding: 0px;
  }

  .service-text {
    white-space: nowrap;
    margin: auto;
    padding: 0px 10px 0px 0px;
  }

  .active-service {
    border: 2px solid #0fc29a;
    box-shadow: 0px 3px 8px #4342421a;
  }

  .mr-18px {
    margin: 0px 18px 0px 0px;
  }

  .welcome-text {
    margin: auto;
    width: 87%;
    font-size: 16px;
    line-height: 24px;
  }

  .cards {
    margin: auto;
    width: 87%;
  }

  .card-style {
    width: 99.5%;
    padding-bottom: 20px;
  }

  .card-title {
    font-size: 18px;
  }

  .card-info {
    font-size: 16px;
    line-height: 23px;
  }

  .card-benefits-li {
    font-size: 16px;
    line-height: 23px;
  }
  .stay-tuned {
    width: 100%;
  }

  .stay-tuned-desscription {
    line-height: 24px;
    font-size: 16px;
  }
  .stay-tuned-moto {
    font-size: 18px;
  }

  .business-apps::after {
    content: "";
    width: 1px;
    height: 1px;
    position: relative;
    left: 30px;
    top: 0px;
  }
  .online-sellers::after {
    content: "";
    width: 1px;
    height: 1px;
    position: relative;
    left: 30px;
    top: 0px;
  }
  .banking,
  .insurance,
  .legal-consulting,
  .credit-card,
  .online-sellers {
  }
  .page-footer {
    padding: 24px;
  }
}