.bb-layout {
  width: 1905px;
  height: 3888px;
  display: flex;
  background-color: #f0f2f4;
}


.bb-layout, .bb-layout * {
  font-family: "Geomanist", Arial, sans-serif !important;
}

.bb-layout .bb-layout-column {
  margin-top: 0px;
  flex: 1;
  width: 1905px;
  position: relative;
}

.bb-layout .section {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 893px;
  display: flex;
  background-color: #ffffff;
}

.bb-layout .bb-receptive-banner {
  height: 893px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  background-image: url(img/banner.png);
  background-size: 100% 100%;
}

.bb-layout .bb-see-more {
  margin-bottom: 32px;
  width: 198.09px;
  height: 32px;
  margin-left: 44.8%;
  margin-right: 44.8%;
  flex: 1;
  position: relative;
}

.bb-layout .text-wrapper {
  position: absolute;
  top: 7px;
  left: 44px;
  width: 154px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16.8px;
  letter-spacing: 0;
  line-height: 22.4px;
  white-space: nowrap;
}

.bb-layout .background {
  position: absolute;
  top: -5px;
  left: calc(50.00% - 91px);
  width: 16px;
  height: 11px;
  background-color: #3d5aff;
  border-radius: 6.67px;
}

.bb-layout .div {
  position: absolute;
  top: calc(50.00% - 16px);
  left: calc(50.00% - 99px);
  width: 32px;
  height: 32px;
  background-color: #3d5aff;
  border-radius: 16px;
}

.bb-layout .background-2 {
  position: absolute;
  top: calc(50.00% - 5px);
  left: calc(50.00% - 91px);
  width: 16px;
  height: 11px;
  background-color: #3d5aff;
  border-radius: 6.67px;
}

.bb-layout .SVG {
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
}

.bb-layout .vector {
  position: absolute;
  width: 42.36%;
  height: 60.80%;
  top: 19.59%;
  left: 28.80%;
}

.bb-layout .section-2 {
  position: absolute;
  width: calc(100% - 765px);
  height: calc(100% - 3457px);
  top: 893px;
  left: 382px;
  display: flex;
  flex-direction: column;
  gap: 53.4px;
}

.bb-layout .bb-title-component {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  width: 451px;
  height: 36px;
  margin-top: 41px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #525dff;
  font-size: 30.4px;
  letter-spacing: 0;
  line-height: 38.4px;
  white-space: nowrap;
}

.bb-layout .bb-credit-card-wc-bb {
  margin-left: 10px;
  margin-right: 10px;
  flex: 1;
  max-height: 214.38px;
  position: relative;
  overflow: hidden;
}

.bb-layout .group-button {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 0;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
}

.bb-layout .ilustrao-de-um {
  background-image: url(./img/ilustra-o-de-um-boleto-de-cobran-a-com-sinal-de-download.png);
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-via-de {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 67px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geomanist";
  font-weight: 700;
  color: #525dff;
  font-size: 15.6px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.bb-layout .group-button-2 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 166px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
}

.bb-layout .ilustrao-de-uma {
  background-image: url(./img/ilustra-o-de-uma-maquininha-de-pagamentos-com-cart-o-de-cr-dito.png);
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-contesta-o {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 97px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  font-size: 15.4px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.bb-layout .group-button-3 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 332px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
}

.bb-layout .ilustrao-de-um-2 {
  background-image: url(./img/ilustra-o-de-um-calend-rio-com-data-de-pagamento-marcada.png);
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-pasep {
  width: 46px;
  font-size: 15.1px;
  position: absolute;
  top: 116px;
  left: 16px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  letter-spacing: 0;
  line-height: 19.2px;
  white-space: nowrap;
}

.bb-layout .group-button-4 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 498px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
}

.bb-layout .ilustrao-de-um-3 {
  background-image: url(./img/ilustra-o-de-um-cadeado-com-umacaixa-de-inser-o-de-senha.png);
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-senhas {
  width: 55px;
  font-size: 15.1px;
  position: absolute;
  top: 116px;
  left: 16px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  letter-spacing: 0;
  line-height: 19.2px;
  white-space: nowrap;
}

.bb-layout .group-button-5 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 664px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
}

.bb-layout .ilustrao-de-um-ponto {
  background-image: url(./img/Icone-Alerta.jpg);
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-suspeitou {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 101px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  font-size: 15.6px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.bb-layout .group-button-6 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 830px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
}

.bb-layout .ilustrao-duas {
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-image: url(./img/Icone-Atendimento.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading {
  width: 103px;
  font-size: 16px;
  position: absolute;
  top: 116px;
  left: 16px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  letter-spacing: 0;
  line-height: 19.2px;
  white-space: nowrap;
}

.bb-layout .group-button-7 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 996px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
}

.bb-layout .ilustrao-de-uma-2 {
  background-image: url(./img/Icone-Ajuda.jpg);
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-central-de {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 81px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.bb-layout .button-slide {
  left: calc(50.00% - 18px);
  background-color: #007aff;
  position: absolute;
  top: calc(50.00% + 92px);
  width: 10px;
  height: 10px;
  border-radius: 10px;
}

.bb-layout .button-slide-2 {
  position: absolute;
  top: calc(50.00% + 92px);
  left: calc(50.00% + 8px);
  width: 10px;
  height: 10px;
  background-color: #000000;
  border-radius: 10px;
  opacity: 0.2;
}

.bb-layout .container-wrapper {
  position: absolute;
  width: 100%;
  top: 1268px;
  left: 0;
  height: 334px;
  display: flex;
  background-color: #f4f4f6;
}

.bb-layout .container {
  height: 334px;
  margin-left: 382.5px;
  margin-right: 382.5px;
  flex: 1;
  position: relative;
}

.bb-layout .bb-card-banner {
  position: absolute;
  width: calc(100% - 401px);
  top: 50px;
  left: 10px;
  height: 274px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 1px #19191c40, 0px 1px 1px #1515182e;
}

.bb-layout .img-mulher-feliz-com {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 8px;
  background-image: url(./img/muler.png);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .container-2 {
  position: absolute;
  width: calc(100% - 402px);
  top: 76px;
  left: 32px;
  height: 123px;
  display: flex;
  flex-direction: column;
}

.bb-layout .heading-conta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 232.51px;
  height: 29px;
  margin-top: 3px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #fcfc30;
  font-size: 25.5px;
  letter-spacing: 0;
  line-height: 36.4px;
  white-space: nowrap;
}

.bb-layout .p {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 331.83px;
  height: 21px;
  margin-top: 10.4px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 25.2px;
  white-space: nowrap;
}

.bb-layout .bb-link-nav {
  width: 170.73px;
  height: 24px;
  margin-top: 35.4px;
  display: flex;
  align-items: center;
}

.bb-layout .link-abrir-conta {
  height: 48px;
  width: 170.73px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fcf800;
  border-radius: 4px;
}

.bb-layout .abrir-conta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  margin-left: 0.2px;
  width: 106.93px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #4466ee;
  font-size: 15.5px;
  text-align: center;
  letter-spacing: 0.08px;
  line-height: 16px;
  white-space: nowrap;
}

.bb-layout .bb-card-banner-2 {
  position: absolute;
  width: calc(100% - 780px);
  top: 50px;
  left: 769px;
  height: 274px;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0px 0px 1px #19191c40, 0px 1px 1px #1515182e;
}

.bb-layout .img-mulher {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 8px;
  background-image: url(./img/picture-mulher-realizando-compras-com-o-seu-ourocard.png);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .container-3 {
  position: absolute;
  width: calc(100% - 212px);
  top: 45px;
  left: 32px;
  height: 184px;
  display: flex;
  flex-direction: column;
}

.bb-layout .heading-cart-o-de {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 122.95px;
  height: 65.39px;
  margin-top: 3px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #4864fa;
  font-size: 25.5px;
  letter-spacing: 0;
  line-height: 36.4px;
}

.bb-layout .aproveite-as {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 142.42px;
  height: 71.38px;
  margin-top: 10.4px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 17.7px;
  letter-spacing: 0;
  line-height: 25.2px;
}

.bb-layout .bb-link-nav-2 {
  width: 129.88px;
  margin-top: 10.2px;
  display: flex;
  gap: 8px;
}

.bb-layout .link-pea-j-o-seu {
  height: 24px;
  width: 97.88px;
  align-self: center;
  display: flex;
  align-items: center;
}

.bb-layout .text-wrapper-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  width: 98.08px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #4864fa;
  font-size: 15.1px;
  letter-spacing: 0.24px;
  line-height: 18px;
  white-space: nowrap;
}

.bb-layout .img {
  width: 24px;
  height: 24px;
  position: relative;
}

.bb-layout .vector-2 {
  position: absolute;
  width: 33.20%;
  height: 54.30%;
  top: 22.85%;
  left: 33.40%;
}

.bb-layout .div-wrapper {
  position: absolute;
  width: 100%;
  top: 1602px;
  left: 0;
  height: 414px;
  display: flex;
  background-color: #f4f4f6;
}

.bb-layout .container-4 {
  height: 414.06px;
  margin-left: 382.5px;
  margin-right: 382.5px;
  flex: 1;
  position: relative;
}

.bb-layout .bb-card-image-wc {
  position: absolute;
  width: calc(100% - 780px);
  top: 10px;
  left: 10px;
  height: 394px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 1px #19191c40, 0px 1px 1px #1515182e;
}

.bb-layout .heading-strong {
  width: 131px;
  font-size: 22px;
  position: absolute;
  top: 237px;
  left: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #4864fa;
  letter-spacing: 0;
  line-height: 30.8px;
  white-space: nowrap;
}

.bb-layout .cliente-BB-tem {
  position: absolute;
  top: 271px;
  left: 32px;
  width: 294px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #6c7077;
  font-size: 15.5px;
  letter-spacing: 0;
  line-height: 22.4px;
}

.bb-layout .button-simule-aqui {
  position: absolute;
  top: calc(50.00% + 133px);
  left: 32px;
  width: 112px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4864fa;
  border-radius: 4px;
}

.bb-layout .simule-aqui {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -0.5px;
  height: 13px;
  margin-left: 0.2px;
  width: 79.78px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #f5f500;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.18px;
  line-height: 13.5px;
  white-space: nowrap;
}

.bb-layout .homem-solicitando-um {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 202px;
  border-radius: 8px;
  background-image: url(./img/img-homem-solicitando-um-empr-stimo-pelo-app-BB.png);
  background-size: 100% 100%;
}

.bb-layout .bb-card-image-wc-2 {
  left: 390px;
  position: absolute;
  width: calc(100% - 780px);
  top: 10px;
  height: 394px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 1px #19191c40, 0px 1px 1px #1515182e;
}

.bb-layout .heading-strong-2 {
  width: 153px;
  font-size: 21.8px;
  position: absolute;
  top: 237px;
  left: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #4864fa;
  letter-spacing: 0;
  line-height: 30.8px;
  white-space: nowrap;
}

.bb-layout .invista-em-seus {
  position: absolute;
  top: 271px;
  left: 32px;
  width: 268px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #6c7077;
  font-size: 15.4px;
  letter-spacing: 0;
  line-height: 22.4px;
}

.bb-layout .button-saiba-mais {
  position: absolute;
  top: calc(50.00% + 133px);
  left: 32px;
  width: 103px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4864fa;
  border-radius: 4px;
}

.bb-layout .saiba-mais {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -0.5px;
  height: 13px;
  margin-left: 0.2px;
  width: 70.86px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #fcfc30;
  font-size: 11.6px;
  text-align: center;
  letter-spacing: 0.18px;
  line-height: 13.5px;
  white-space: nowrap;
}

.bb-layout .homem-analisando-os {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 202px;
  border-radius: 8px;
  background-image: url(./img/img-homem-analisando-os-seus-investimentos-no-BB.png);
  background-size: 100% 100%;
}

.bb-layout .bb-card-image-wc-3 {
  left: 770px;
  position: absolute;
  width: calc(100% - 780px);
  top: 10px;
  height: 394px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 0px 1px #19191c40, 0px 1px 1px #1515182e;
}

.bb-layout .heading-strong-3 {
  position: absolute;
  top: 237px;
  left: 32px;
  width: 136px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #4864fa;
  font-size: 21.8px;
  letter-spacing: 0;
  line-height: 30.8px;
  white-space: nowrap;
}

.bb-layout .cashback-gift-cards {
  position: absolute;
  top: 271px;
  left: 32px;
  width: 252px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #6c7077;
  font-size: 16.8px;
  letter-spacing: 0;
  line-height: 22.4px;
}

.bb-layout .button-acesse-o {
  position: absolute;
  top: calc(50.00% + 133px);
  left: 32px;
  width: 176px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4864fa;
  border-radius: 4px;
}

.bb-layout .acesse-o-shopping-BB {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -0.5px;
  height: 13px;
  margin-left: 0.2px;
  width: 144.01px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #fcfc30;
  font-size: 11.6px;
  text-align: center;
  letter-spacing: 0.18px;
  line-height: 13.5px;
  white-space: nowrap;
}

.bb-layout .mulher-conferindo-as {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 202px;
  border-radius: 8px;
  background-image: url(./img/img-mulher-conferindo-as-promo-es-da-loja-BB.png);
  background-size: 100% 100%;
}

.bb-layout .section-3 {
  position: absolute;
  width: 100%;
  top: 2016px;
  left: 0;
  height: 50px;
  background-color: #f4f4f6;
}

.bb-layout .background-wrapper {
  position: absolute;
  width: 100%;
  top: 2066px;
  left: 0;
  height: 115px;
  display: flex;
  background-color: #f4f4f6;
}

.bb-layout .bb-receptive-content-wrapper {
  height: 115.19px;
  margin-left: 382.5px;
  margin-right: 382.5px;
  flex: 1;
  display: flex;
  background-color: #f4f4f6;
}

.bb-layout .bb-receptive-content {
  flex: 1;
  margin-bottom: 32px;
  width: 843px;
  display: flex;
  flex-direction: column;
  gap: 9.2px;
}

.bb-layout .heading-bb-text {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  width: 483.47px;
  height: 29px;
  margin-top: 1px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #333333;
  font-size: 25.8px;
  letter-spacing: 0;
  line-height: 31.2px;
  white-space: nowrap;
}

.bb-layout .container-5 {
  margin-left: 16px;
  flex: 1;
  max-height: 44px;
  display: flex;
  overflow: scroll;
}

.bb-layout .container-5::-webkit-scrollbar {
  width: 0;
  display: none;
}

.bb-layout .text-wrapper-3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 639.12px;
  height: 28px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #767a86;
  font-size: 19.5px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.bb-layout .section-4 {
  position: absolute;
  width: 100%;
  top: 2181px;
  left: 0;
  height: 524px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: #f4f4f6;
}

.bb-layout .bb-tabs-with-cards-wrapper {
  flex: 1;
  max-height: 506px;
  margin-top: -27px;
  display: flex;
  background-color: #f4f4f6;
}

.bb-layout .bb-tabs-with-cards {
  height: 506px;
  flex: 1;
  display: flex;
}

.bb-layout .container-6 {
  margin-left: 23.49%;
  width: 994px;
  margin-right: 24.33%;
  flex: 1;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}

.bb-layout .list {
  margin-left: 12px;
  margin-right: -4px;
  flex: 1;
  max-height: 46px;
  position: relative;
  margin-top: 20px;
}

.bb-layout .item-button {
  width: calc(100% - 797px);
  left: 4px;
  height: 46px;
  position: absolute;
  top: 0;
}

.bb-layout .patrim-nio-e-finan {
  position: absolute;
  top: 16px;
  left: calc(50.00% - 87px);
  width: 174px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #4864fa;
  font-size: 12.9px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.bb-layout .background-3 {
  position: absolute;
  top: 43px;
  left: 0;
  width: 189px;
  height: 3px;
  background-color: #afafaf;
  border-radius: 3px;
}

.bb-layout .background-4 {
  position: absolute;
  top: 43px;
  left: 0;
  width: 189px;
  height: 3px;
  background-color: #4864fa;
  border-radius: 3px;
}

.bb-layout .item-button-2 {
  left: 201px;
  gap: 13px;
  position: absolute;
  width: calc(100% - 797px);
  top: 0;
  height: 46px;
  display: flex;
  flex-direction: column;
}

.bb-layout .casa-e-fam-lia {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.2px;
  height: 14px;
  width: 109.73px;
  align-self: center;
  margin-top: 16px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #afafaf;
  font-size: 13.7px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.bb-layout .background-5 {
  width: 189.19px;
  height: 3px;
  background-color: #afafaf;
  border-radius: 3px;
}

.bb-layout .item-button-3 {
  left: 398px;
  gap: 13px;
  position: absolute;
  width: calc(100% - 797px);
  top: 0;
  height: 46px;
  display: flex;
  flex-direction: column;
}

.bb-layout .sa-de-e-bem-estar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.2px;
  height: 14px;
  width: 143.22px;
  align-self: center;
  margin-top: 16px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #afafaf;
  font-size: 13.7px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.bb-layout .item-button-4 {
  left: 596px;
  gap: 5px;
  position: absolute;
  width: calc(100% - 797px);
  top: 0;
  height: 46px;
  display: flex;
  flex-direction: column;
}

.bb-layout .lazer-e {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.2px;
  height: 30px;
  width: 129.59px;
  align-self: center;
  margin-top: 8px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #afafaf;
  font-size: 13.9px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
}

.bb-layout .item-button-5 {
  left: 793px;
  gap: 13px;
  position: absolute;
  width: calc(100% - 797px);
  top: 0;
  height: 46px;
  display: flex;
  flex-direction: column;
}

.bb-layout .educa-o-e-carreira {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.2px;
  height: 14px;
  width: 161.76px;
  align-self: center;
  margin-top: 16px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #afafaf;
  font-size: 13.1px;
  text-align: center;
  letter-spacing: 0;
  line-height: 14px;
  white-space: nowrap;
}

.bb-layout .list-wrapper {
  margin-left: 16px;
  flex: 1;
  max-height: 424px;
  display: flex;
  overflow: hidden;
}

.bb-layout .list-2 {
  margin-top: 28px;
  height: 380px;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.bb-layout .item-list {
  width: 100%;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}

.bb-layout .item-link {
  width: calc(100% - 727px);
  height: 100%;
  left: 8px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-image: url(./img/item1.jpg);
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
}

.bb-layout .heading-open {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 118.22px;
  height: 21px;
  margin-top: 229.9px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #0c0c0c;
  font-size: 17.4px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.bb-layout .aumente-suas-chances {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 167.67px;
  height: 56.37px;
  margin-top: 2.6px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #0c0c0c;
  font-size: 16.8px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.bb-layout .text-wrapper-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 132.83px;
  height: 18px;
  margin-top: 14.2px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #4864fa;
  font-size: 16.8px;
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
}

.bb-layout .text-wrapper-5 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 46.31px;
  height: 18px;
  margin-top: 0.5px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #4864fa;
  font-size: 15.6px;
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
}

.bb-layout .item {
  width: 28.50%;
  height: 100%;
  left: 28.50%;
  position: absolute;
  top: 0;
}

.bb-layout .link {
  position: absolute;
  width: calc(100% - 16px);
  height: calc(100% - 111px);
  top: 0;
  left: 8px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-image: url(./img/bloco2-min-1.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .badge-solues {
  align-self: flex-end;
  margin-right: 8px;
  width: 100.56px;
  height: 18px;
  position: relative;
  margin-top: 15px;
  background-color: #fcf800;
  border-radius: 999px;
}

.bb-layout .text-wrapper-6 {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 89px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #465eff;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: 12.4px;
  white-space: nowrap;
}

.bb-layout .container-7 {
  position: absolute;
  top: 8px;
  left: 50px;
  width: 1px;
  height: 1px;
  display: flex;
  overflow: hidden;
}

.bb-layout .text-wrapper-7 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124.37px;
  height: 12px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #465eff;
  font-size: 10.7px;
  letter-spacing: 0;
  line-height: 12.4px;
  white-space: nowrap;
}

.bb-layout .heading-minhas {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 143.08px;
  height: 21px;
  margin-top: 136.9px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 17.4px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.bb-layout .no-aplicativo-do-BB {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 183.87px;
  height: 56.37px;
  margin-top: 2.6px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 15.6px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.bb-layout .link-2 {
  position: absolute;
  width: calc(100% - 16px);
  height: calc(100% - 285px);
  top: 285px;
  left: 8px;
  border-radius: 8px;
  overflow: hidden;
  background-color: #6a696f;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .badge-produtos {
  position: absolute;
  top: 15px;
  right: 8px;
  width: 60px;
  height: 18px;
  background-color: #fcf800;
  border-radius: 999px;
}

.bb-layout .text-wrapper-8 {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 48px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #465eff;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 12.4px;
  white-space: nowrap;
}

.bb-layout .container-8 {
  position: absolute;
  top: 8px;
  left: 30px;
  width: 1px;
  height: 1px;
  display: flex;
  overflow: hidden;
}

.bb-layout .text-wrapper-9 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84.04px;
  height: 12px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #465eff;
  font-size: 10.8px;
  letter-spacing: 0;
  line-height: 12.4px;
  white-space: nowrap;
}

.bb-layout .heading-seguro-de {
  position: absolute;
  top: 17px;
  left: 18px;
  width: 163px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 17.4px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.bb-layout .praticidade-e {
  position: absolute;
  top: 42px;
  left: 18px;
  width: 180px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 12.8px;
  letter-spacing: 0;
  line-height: 18px;
}

.bb-layout .item-link-2 {
  position: absolute;
  width: calc(100% - 583px);
  height: 100%;
  top: 0;
  left: 575px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-image: url(./img/0000-destaque1-min.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .badge-produtos-2 {
  align-self: flex-end;
  margin-right: 8px;
  width: 60.25px;
  position: relative;
  margin-top: 15px;
  height: 18px;
  background-color: #fcf800;
  border-radius: 999px;
}

.bb-layout .heading-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 125.23px;
  height: 21px;
  margin-top: 215.4px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #000000;
  font-size: 17.9px;
  letter-spacing: 0;
  line-height: 21.6px;
  white-space: nowrap;
}

.bb-layout .quer-saber-quanto {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 181.77px;
  height: 56.37px;
  margin-top: 2.6px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.header {
  width: 1905px;
  height: 56px;
  display: flex;
  background-color: #fcfc30;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  border-color: #465eff;
}

.header .button-boto-de-menu {
  margin-top: -4px;
  height: 32px;
  width: 32px;
  align-self: center;
  margin-left: 16px;
  display: flex;
  border-radius: 4px;
}

.header .img {
  margin-top: 4px;
  width: 24.22px;
  height: 24px;
  margin-left: 4px;
  position: relative;
}

.header .vector {
  position: absolute;
  width: 82.45%;
  height: 66.80%;
  top: 16.60%;
  left: 8.78%;
}

.header .link-logo-do-BB {
  margin-top: -4px;
  height: 36px;
  width: 36px;
  align-self: center;
  margin-left: 4px;
  display: flex;
  flex-direction: column;
}

.header .img-cone-do-banco-do {
  height: 37px;
  position: relative;
  margin-top: -1px;
}

.header .vector-2 {
  position: absolute;
  width: 83.20%;
  height: 80.95%;
  top: 11.52%;
  left: 8.40%;
}

.header .container {
  width: 1px;
  height: 1px;
  display: flex;
  overflow: hidden;
}

.header .text-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36.03px;
  height: 17px;
  font-family: "Geomanist", Arial, sans-serif;
  font-weight: 400;
  color: #2d37f5;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 18.8px;
  white-space: nowrap;
}

.header .vertical-divider {
  margin-top: -4px;
  height: 32px;
  width: 1px;
  align-self: center;
  margin-left: 12px;
  background-color: #11121440;
}

.header .list {
  margin-top: -4px;
  height: 32px;
  width: 599.72px;
  align-self: center;
  position: relative;
  margin-left: 12px;
}

.header .item-bb-navbar {
  position: absolute;
  top: 0;
  left: 16px;
  width: 111px;
  height: 32px;
  border-radius: 4px;
}

.header .div {
  position: absolute;
  top: 7px;
  left: calc(50.00% - 47px);
  width: 67px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geomanist", Arial, sans-serif;
  font-weight: 500;
  color: #465eff;
  font-size: 16.8px;
  text-align: center;
  letter-spacing: 0.24px;
  line-height: 18px;
  white-space: nowrap;
}

.header .vector-wrapper {
  position: absolute;
  top: 5px;
  left: 83px;
  width: 20px;
  height: 21px;
}

.header .vector-3 {
  position: absolute;
  width: 50.00%;
  height: 29.76%;
  top: 36.25%;
  left: 25.00%;
}

.header .item-bb-navbar-2 {
  left: 127px;
  width: 172px;
  position: absolute;
  top: 0;
  height: 32px;
  border-radius: 4px;
}

.header .text-wrapper-2 {
  position: absolute;
  top: 7px;
  left: calc(50.00% - 78px);
  width: 128px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geomanist", Arial, sans-serif;
  font-weight: 500;
  color: #465eff;
  font-size: 16.8px;
  text-align: center;
  letter-spacing: 0.24px;
  line-height: 18px;
  white-space: nowrap;
}

.header .img-wrapper {
  position: absolute;
  top: 5px;
  left: 144px;
  width: 20px;
  height: 21px;
}

.header .item-bb-navbar-3 {
  left: 298px;
  width: 152px;
  position: absolute;
  top: 0;
  height: 32px;
  border-radius: 4px;
}

.header .text-wrapper-3 {
  position: absolute;
  top: 7px;
  left: calc(50.00% - 68px);
  width: 108px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geomanist", Arial, sans-serif;
  font-weight: 500;
  color: #465eff;
  font-size: 16.8px;
  text-align: center;
  letter-spacing: 0.24px;
  line-height: 18px;
  white-space: nowrap;
}

.header .img-2 {
  position: absolute;
  top: 5px;
  left: 124px;
  width: 20px;
  height: 21px;
}

.header .item-bb-navbar-4 {
  left: 450px;
  width: 150px;
  position: absolute;
  top: 0;
  height: 32px;
  border-radius: 4px;
}

.header .text-wrapper-4 {
  position: absolute;
  top: 7px;
  left: calc(50.00% - 67px);
  width: 106px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geomanist", Arial, sans-serif;
  font-weight: 500;
  color: #465eff;
  font-size: 16.8px;
  text-align: center;
  letter-spacing: 0.24px;
  line-height: 18px;
  white-space: nowrap;
}

.header .img-3 {
  position: absolute;
  top: 5px;
  left: 122px;
  width: 20px;
  height: 21px;
}

.header .bb-search-field {
  margin-top: 8px;
  width: 320px;
  margin-left: 16px;
  display: flex;
  background-color: #11121440;
  border-radius: 4px;
}

.header .overlay {
  width: 42px;
  height: 36px;
  display: flex;
  background-color: #fdfeff33;
  border-radius: 4px 0px 0px 4px;
}

.header .img-4 {
  margin-top: 8px;
  width: 20px;
  height: 21px;
  margin-left: 16px;
  position: relative;
}

.header .vector-4 {
  position: absolute;
  width: 83.20%;
  height: 79.24%;
  top: 10.38%;
  left: 8.40%;
}

.header .input-pesquisar {
  width: 278px;
  height: 36px;
  flex: 1;
  display: flex;
  background-color: #fdfeff33;
  border-radius: 0px 4px 4px 0px;
  overflow: hidden;
}

.header .div-wrapper {
  margin-top: 9px;
  margin-right: 12px;
  flex: 1;
  display: flex;
}

.header .text-wrapper-5 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 154.01px;
  height: 18px;
  font-family: "Geomanist", Arial, sans-serif;
  font-weight: 500;
  color: #fdfeff;
  font-size: 15.4px;
  letter-spacing: 0.24px;
  line-height: normal;
  white-space: nowrap;
}

.header .bb-navbar-select {
  margin-top: 10px;
  width: 197.19px;
  height: 32px;
  position: relative;
  margin-left: 647.1px;
  border-radius: 4px;
}

.header .bb-navbar-select:focus-visible {
  outline: 2px solid #4864fa;
  outline-offset: 2px;
}

.header .bb-account-dropdown {
  position: absolute;
  top: 32px;
  right: 0;
  width: 240px;
  display: none;
  flex-direction: column;
  gap: 0;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  border: 1px solid #e5e7eb;
  z-index: 1000;
}

.header .bb-account-dropdown.open {
  display: flex;
}

.header .bb-account-dropdown .dropdown-item {
  padding: 12px 16px;
  font-family: "Geomanist", Arial, sans-serif;
  font-weight: 700;
  color: #0c0c0c;
  font-size: 16px;
  text-decoration: none;
  display: block;
}

.header .bb-account-dropdown .dropdown-item:hover {
  background-color: #f7f8f9;
}

.header .bb-account-dropdown .dropdown-separator {
  height: 1px;
  background-color: #e5e7eb;
}

.header .text-wrapper-6 {
  position: absolute;
  top: 7px;
  left: calc(50.00% - 91px);
  width: 153px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Geomanist", Arial, sans-serif;
  font-weight: 500;
  color: #465eff;
  font-size: 16.9px;
  text-align: center;
  letter-spacing: 0.24px;
  line-height: 18px;
  white-space: nowrap;
}

.header .img-5 {
  position: absolute;
  top: 5px;
  left: 169px;
  width: 20px;
  height: 21px;
}
.bb-layout .text-wrapper-10 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 118.03px;
  height: 18px;
  margin-top: 14.2px;
  font-family: "Inter-Medium", Helvetica;
  font-weight: 500;
  color: #465eff;
  font-size: 15.5px;
  letter-spacing: 0;
  line-height: 16px;
  white-space: nowrap;
}

.bb-layout .item-list-2 {
  left: 970px;
  position: absolute;
  width: calc(100% - 3896px);
  height: 100%;
  top: 0;
  object-fit: cover;
}

.bb-layout .item-list-3 {
  left: 1948px;
  position: absolute;
  width: calc(100% - 3896px);
  height: 100%;
  top: 0;
  object-fit: cover;
}

.bb-layout .item-list-4 {
  left: 2926px;
  position: absolute;
  width: calc(100% - 3896px);
  height: 100%;
  top: 0;
  object-fit: cover;
}

.bb-layout .item-list-5 {
  left: 3904px;
  position: absolute;
  width: calc(100% - 3896px);
  height: 100%;
  top: 0;
  object-fit: cover;
}

.bb-layout .background-6 {
  flex: 1;
  max-height: 25px;
  background-color: #f4f4f6;
}

.bb-layout .section-5 {
  position: absolute;
  width: 100%;
  top: 2705px;
  left: 0;
  height: 355px;
  display: flex;
  flex-direction: column;
  gap: 53.4px;
  background-color: #f4f4f6;
}

.bb-layout .bb-title-component-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 392.5px;
  width: 267.47px;
  height: 36px;
  margin-top: 41px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #525dff;
  font-size: 31.3px;
  letter-spacing: 0;
  line-height: 38.4px;
  white-space: nowrap;
}

.bb-layout .bb-credit-card-wc-bb-2 {
  margin-left: 367.5px;
  margin-right: 382.5px;
  flex: 1;
  max-height: 214.38px;
  position: relative;
  overflow: hidden;
}

.bb-layout .group-button-8 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 0;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 8px 16px #00000026;
}

.bb-layout .ilustrao-de-uma-3 {
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-image: url(./img/Icone-Beneficios-BB.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-benef-cios {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 105px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  font-size: 15.6px;
  letter-spacing: 0;
  line-height: 19.2px;
  white-space: nowrap;
}

.bb-layout .group-button-9 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 166px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 8px 16px #00000026;
}

.bb-layout .ilustrao-de-um-4 {
  background-image: url(./img/Icone-Portabilidade.jpg);
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-3 {
  width: 107px;
  font-size: 16px;
  position: absolute;
  top: 116px;
  left: 16px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  letter-spacing: 0;
  line-height: 19.2px;
  white-space: nowrap;
}

.bb-layout .group-button-10 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 332px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 8px 16px #00000026;
}

.bb-layout .pix {
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-image: url(./img/pix.png);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-pix {
  width: 25px;
  font-size: 16px;
  position: absolute;
  top: 116px;
  left: 16px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  letter-spacing: 0;
  line-height: 19.2px;
  white-space: nowrap;
}

.bb-layout .group-button-11 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 498px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 8px 16px #00000026;
}

.bb-layout .ilustrao-de-uma-4 {
  background-image: url(./img/Icone-Pacotes-e-tarifas.jpg);
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-pacotes-e {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 73px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  font-size: 16.8px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.bb-layout .group-button-12 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 664px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 8px 16px #00000026;
}

.bb-layout .ilustrao-de-dois {
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-image: url(./img/Icone-Cambio.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-c-mbio {
  width: 59px;
  font-size: 15.5px;
  position: absolute;
  top: 116px;
  left: 16px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  letter-spacing: 0;
  line-height: 19.2px;
  white-space: nowrap;
}

.bb-layout .group-button-13 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 830px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 8px 16px #00000026;
}

.bb-layout .cone-de-libras {
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-image: url(./img/Libras-2.jpg);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-4 {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 103px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.bb-layout .group-button-14 {
  position: absolute;
  height: calc(100% - 40px);
  top: 0;
  left: 996px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 8px 16px #00000026;
}

.bb-layout .ilustrao-de-um-homem {
  background-image: url(./img/Icone-Produtos-para-o-cidadao.jpg);
  position: absolute;
  width: 100%;
  height: calc(100% - 74px);
  top: 0;
  left: 0;
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .heading-servi-os {
  position: absolute;
  top: 116px;
  left: 16px;
  width: 118px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #525dff;
  font-size: 15.5px;
  letter-spacing: 0;
  line-height: 19.2px;
}

.bb-layout .button-slide-3 {
  position: absolute;
  top: calc(50.00% + 92px);
  left: calc(50.00% - 46px);
  width: 10px;
  height: 10px;
  background-color: #007aff;
  border-radius: 10px;
}

.bb-layout .button-slide-4 {
  left: calc(50.00% - 18px);
  background-color: #000000;
  opacity: 0.2;
  position: absolute;
  top: calc(50.00% + 92px);
  width: 10px;
  height: 10px;
  border-radius: 10px;
}

.bb-layout .button-slide-5 {
  left: calc(50.00% + 36px);
  background-color: #000000;
  opacity: 0.2;
  position: absolute;
  top: calc(50.00% + 92px);
  width: 10px;
  height: 10px;
  border-radius: 10px;
}

.bb-layout .section-6 {
  position: absolute;
  width: 100%;
  top: 3060px;
  left: 0;
  height: 40px;
  background-color: #f4f4f6;
}

.bb-layout .bb-card-banner-wrapper {
  position: absolute;
  width: 100%;
  top: 3100px;
  left: 0;
  height: 307px;
  display: flex;
  background-color: #f4f4f6;
}

.bb-layout .bb-card-banner-3 {
  margin-top: 10px;
  height: 287px;
  margin-left: 392.5px;
  margin-right: 392.5px;
  flex: 1;
  position: relative;
  border-radius: 4px;
  background-color: #ffffff;
  box-shadow: 0px 0px 1px #19191c40, 0px 1px 1px #1515182e;
}

.bb-layout .img-descrio-da {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 4px;
  background-image: url(./img/picture-descri-o-da-imagem.png);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .container-9 {
  position: absolute;
  width: calc(100% - 576px);
  top: 99px;
  left: 16px;
  height: 89px;
  display: flex;
  flex-direction: column;
}

.bb-layout .heading-a-gente-se {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 202.98px;
  height: 30.8px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 22px;
  letter-spacing: 0;
  line-height: 30.8px;
  white-space: nowrap;
}

.bb-layout .text-wrapper-11 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 522.25px;
  height: 18px;
  margin-top: 6px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 22.4px;
  white-space: nowrap;
}

.bb-layout .link-saiba-mais-wrapper {
  width: 156.61px;
  height: 24px;
  margin-top: 10.4px;
  display: flex;
  align-items: center;
}

.bb-layout .link-saiba-mais {
  height: 48px;
  width: 156.61px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.bb-layout .saiba-mais-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  margin-left: 0.2px;
  width: 92.81px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.08px;
  line-height: 16px;
  white-space: nowrap;
}

.bb-layout .section-7 {
  position: absolute;
  width: 100%;
  top: 3407px;
  left: 0;
  height: 49px;
  background-color: #f4f4f6;
}

.bb-layout .section-8 {
  position: absolute;
  width: 100%;
  top: 3456px;
  left: 0;
  height: 20px;
  background-color: #ffffff;
}

.bb-layout .bb-float-section-wrapper {
  position: absolute;
  width: 100%;
  height: calc(100% - 3736px);
  top: 3476px;
  left: 0;
  display: flex;
  align-items: flex-end;
  background-color: #f4f4f6;
}

.bb-layout .bb-float-section {
  margin-bottom: 90.0px;
  width: 1905px;
  display: flex;
  background-color: #4466ee;
  opacity: 1.0;
}

.bb-layout .background-7 {
  height: 80px;
  flex: 1;
  position: relative;
  background-color: #4466ee;
}

.bb-layout .heading-ainda-n-o {
  position: absolute;
  top: 18px;
  left: calc(50.00% - 267px);
  width: 313px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #fcfc30;
  font-size: 31.6px;
  text-align: center;
  letter-spacing: 0;
  line-height: 44.8px;
  white-space: nowrap;
}

.bb-layout .button-abrir-modal {
  position: absolute;
  top: 16px;
  left: 1014px;
  width: 205px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fcfc30;
  border-radius: 4px;
}

.bb-layout .abra-sua-conta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  margin-left: 0.2px;
  width: 141.61px;
  font-family: "Inter-Bold", Helvetica;
  font-weight: 700;
  color: #4466ee;
  font-size: 16.8px;
  text-align: center;
  letter-spacing: 0.24px;
  line-height: 48px;
  white-space: nowrap;
}

.bb-layout .bb-footer-footer {
  position: absolute;
  width: 100%;
  top: 3572px;
  left: 0;
  height: 215px;
  display: flex;
  background-color: #f7f8f9;
}

.bb-layout .container-10 {
  margin-top: 32px;
  height: 111.5px;
  margin-left: 376.5px;
  margin-right: 376.5px;
  flex: 1;
  position: relative;
}

.bb-layout .link-3 {
  position: absolute;
  top: 0;
  left: 16px;
  width: 308px;
  height: 40px;
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}

.bb-layout .text-wrapper-12 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 169.61px;
  height: 13px;
  margin-top: 3px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  font-size: 11.8px;
  letter-spacing: 0;
  line-height: 18.8px;
  white-space: nowrap;
}

.bb-layout .strong {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 215.29px;
  height: 18px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.bb-layout .link-4 {
  position: absolute;
  top: 0;
  left: 404px;
  width: 115px;
  height: 40px;
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}

.bb-layout .text-wrapper-13 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21.79px;
  height: 13px;
  margin-top: 3px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  font-size: 10.7px;
  letter-spacing: 0;
  line-height: 18.8px;
  white-space: nowrap;
}

.bb-layout .strong-2 {
  width: 115.31px;
  font-size: 15.9px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.bb-layout .link-5 {
  position: absolute;
  top: 0;
  left: 599px;
  width: 166px;
  height: 40px;
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}

.bb-layout .text-wrapper-14 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 73.09px;
  height: 13px;
  margin-top: 3px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  font-size: 11.8px;
  letter-spacing: 0;
  line-height: 18.8px;
  white-space: nowrap;
}

.bb-layout .strong-3 {
  width: 115.04px;
  font-size: 16.8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.bb-layout .link-6 {
  position: absolute;
  top: 56px;
  left: 16px;
  width: 308px;
  height: 40px;
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}

.bb-layout .text-wrapper-15 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 238.17px;
  height: 13px;
  margin-top: 3px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  font-size: 11.6px;
  letter-spacing: 0;
  line-height: 18.8px;
  white-space: nowrap;
}

.bb-layout .strong-4 {
  width: 308.54px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.bb-layout .link-7 {
  position: absolute;
  top: 56px;
  left: 404px;
  width: 115px;
  height: 40px;
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}

.bb-layout .text-wrapper-16 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 59.64px;
  height: 13px;
  margin-top: 3px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 18.8px;
  white-space: nowrap;
}

.bb-layout .strong-5 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104.47px;
  height: 18px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  font-size: 16px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.bb-layout .link-8 {
  position: absolute;
  top: 56px;
  left: 599px;
  width: 166px;
  height: 40px;
  display: flex;
  flex-direction: column;
  gap: 4.8px;
}

.bb-layout .text-wrapper-17 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 166.18px;
  height: 13px;
  margin-top: 3px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  font-size: 11.4px;
  letter-spacing: 0;
  line-height: 18.8px;
  white-space: nowrap;
}

.bb-layout .strong-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 117.81px;
  height: 18px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #467dbe;
  font-size: 16.8px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.bb-layout .imagem-de-acesso-a-wrapper {
  position: absolute;
  top: 46px;
  left: 1028px;
  width: 108px;
  height: 17px;
  display: flex;
}

.bb-layout .imagem-de-acesso-a {
  margin-top: -12.4px;
  width: 108px;
  height: 45px;
  background-image: url(./img/imagem-de-acesso-a-informa-o.png);
  background-size: cover;
  background-position: 50% 50%;
}

.bb-layout .background-8 {
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 1905px;
  height: 80px;
  display: flex;
  gap: 18.9px;
  background-color: #fcfc30;
}

.bb-layout .banco-do-brasil-s-a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  width: 336.09px;
  height: 29.8px;
  margin-left: 392.5px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #1b1b23;
  font-size: 11.6px;
  letter-spacing: 0;
  line-height: 16.8px;
}

.bb-layout .list-3 {
  margin-top: 21.3px;
  width: 765px;
  margin-right: 392.5px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 13px;
}

.bb-layout .item-link-3 {
  height: 21px;
  width: 110.5px;
  margin-left: 112.3px;
  display: flex;
  gap: 6.7px;
  border-right-width: 1px;
  border-right-style: solid;
  border-color: #ffffff4c;
}

.bb-layout .vector-wrapper {
  margin-top: 2px;
  width: 17.33px;
  height: 17px;
  position: relative;
}

.bb-layout .vector-3 {
  position: absolute;
  width: 65.52%;
  height: 66.80%;
  top: 16.60%;
  left: 17.24%;
}

.bb-layout .text-wrapper-18 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.8px;
  width: 75.7px;
  height: 13.5px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #1b1b23;
  font-size: 11.8px;
  letter-spacing: 0.32px;
  line-height: 13.5px;
  white-space: nowrap;
}

.bb-layout .item-link-4 {
  height: 21px;
  width: 96.02px;
  display: flex;
  gap: 6.7px;
  border-right-width: 1px;
  border-right-style: solid;
  border-color: #ffffff4c;
}

.bb-layout .vector-4 {
  position: absolute;
  width: 78.47%;
  height: 76.17%;
  top: 11.91%;
  left: 8.76%;
}

.bb-layout .text-wrapper-19 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.8px;
  width: 61.22px;
  height: 13.5px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #1b1b23;
  font-size: 11.6px;
  letter-spacing: 0.32px;
  line-height: 13.5px;
  white-space: nowrap;
}

.bb-layout .item-link-5 {
  height: 21px;
  width: 145.88px;
  display: flex;
  gap: 6.7px;
  border-right-width: 1px;
  border-right-style: solid;
  border-color: #ffffff4c;
}

.bb-layout .vector-5 {
  position: absolute;
  width: 73.57%;
  height: 66.80%;
  top: 16.60%;
  left: 13.21%;
}

.bb-layout .text-wrapper-20 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.8px;
  width: 111.08px;
  height: 13.5px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #1b1b23;
  font-size: 11.8px;
  letter-spacing: 0.32px;
  line-height: 13.5px;
  white-space: nowrap;
}

.bb-layout .item-link-6 {
  height: 21px;
  width: 142.63px;
  display: flex;
  gap: 6.7px;
  border-right-width: 1px;
  border-right-style: solid;
  border-color: #ffffff4c;
}

.bb-layout .vector-6 {
  position: absolute;
  width: 90.05%;
  height: 62.50%;
  top: 18.75%;
  left: 4.98%;
}

.bb-layout .text-wrapper-21 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.8px;
  width: 107.83px;
  height: 13.5px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #1b1b23;
  font-size: 11.8px;
  letter-spacing: 0.32px;
  line-height: 13.5px;
  white-space: nowrap;
}

.bb-layout .item-link-7 {
  height: 21px;
  width: 105.64px;
  display: flex;
  gap: 6.7px;
}

.bb-layout .vector-7 {
  position: absolute;
  width: 81.62%;
  height: 83.20%;
  top: 8.40%;
  left: 9.19%;
}

.bb-layout .text-wrapper-22 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.8px;
  width: 81.84px;
  height: 13.5px;
  font-family: "Inter-Regular", Helvetica;
  font-weight: 400;
  color: #1b1b23;
  font-size: 11.6px;
  letter-spacing: 0.32px;
  line-height: 13.5px;
  white-space: nowrap;
}