.banner-middle {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
  width: 100%;
  min-height: 74vh;
  background-image: url("/static/images/png/investments/banner2.png");
}

.banner-target {
  background-image: url("/static/images/png/investments/target.png");
}

.new-banner-top {
  background-image: url("/static/images/png/investments/banner-top.png");
}

.banner-by-themes {
  background-image: url("/static/images/png/investments/by-themes.png");
}

.banner-esg {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
  width: 100%;
  min-height: 39vh;
  background-image: url("/static/images/png/investments/banner3.png");
}

.bg-gradient-brown {
  background: linear-gradient(90deg, rgba(222, 115, 117, 1) 0%, rgba(247, 189, 174, 1) 50%);
}

.bg-gradient-light-green {
  background: linear-gradient(90deg, rgba(253, 209, 141, 1) 33%, rgba(124, 203, 153, 1) 85%);
}

.bg-logo-gray {
  background: url("/static/images/svg/background-gray-elaslogo.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right center;
}

.bg-gradient-1 {
  background: url("/static/images/svg/background-left-elaslogo.svg"), linear-gradient(90deg, rgba(222, 115, 117, 1) 0%, rgba(247, 189, 174, 1) 50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left top;
}

.bg-gradient-2 {
  background: url("/static/images/svg/background-left-elaslogo.svg"), linear-gradient(90deg, rgba(237, 126, 94, 1) 0%, rgba(252, 204, 139, 1) 50%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.bg-gradient-3 {
  background: url("/static/images/svg/background-left-elaslogo.svg"), linear-gradient(90deg, rgba(253, 209, 141, 1) 33%, rgba(124, 203, 153, 1) 85%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.bg-two-images {
  background: url('/static/images/png/thematic-investments/img2.png') top left no-repeat, url('/static/images/png/thematic-investments/img3.png') top right no-repeat;
}

.card-cel {
  background: url("/static/images/png/investments/cel.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  height: 537px;
}

.card-robo {
  background: url("/static/images/png/investments/robo.png");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: right;
  height: 676px;
}

.card-mulher {
  background: url("/static/images/png/investments/mulher.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  height: 640px;
}

.card-investir {
  background: url("/static/images/png/investments/investir.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 80px;
  width: 100%;
}

.card-temas {
  background: url("/static/images/png/investments/temas.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 80px;
  width: 100%;
}

.card-simular {
  background: url("/static/images/png/investments/simule.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 80px;
  width: 100%;
}

.card-1 {  
  border-radius: 18px;
  border-width: 1px;
  border-style: solid;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 2rem;
  text-align: center;
  min-height: 140px;
}

.card-1.card-green {
  border-color: #A5CDBE;
}

.card-1.card-orange {
  border-color: #EEC678;
}

.card-1.card-brown {
  border-color: #CA623F;
}

.card-1.card-red {
  border-color: #B85155;
}

.carteiras {
  background: url("/static/images/png/investments/carteiras.png"), #FFF;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 100%;
  height: 649px;
}

.carteira-atual {
  background: url("/static/images/png/investments/carteira-atual.png"), #FFF;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}

.carteira-ideal {
  background: url("/static/images/png/investments/carteira-ideal.png"), #F4F5F4;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
}

.carteira-atual,
.carteira-ideal {
  background-size: contain;
  height: 649px;
}

.objetivo {
  min-height: 25vh;
}

.img-1 {
  background: url("/static/images/png/investments/img1.png") no-repeat;
  background-size: contain;
  background-position: center;
}

.img-2 {
  background: url("/static/images/png/investments/img2.png") no-repeat;
  background-size: contain;
  background-position: center;
}

.img-3 {
  background: url("/static/images/png/investments/img3.png") no-repeat;
  background-size: contain;
  background-position: center;
}

.img-4 {
  background: url("/static/images/png/investments/img4.png") no-repeat;
  background-size: contain;
  background-position: center;
}

.tablet {
  background: url("/static/images/png/investments/tablet.png");
  background-size: auto;
  background-repeat: no-repeat;
  background-position: right;
  height: 676px;
}

.img-responsive {
  width: 75%;
}

.guava {
  color: #B85155;
}

.card-success-opacity {
  background-color: #E9F7E2 !important;
  border: 1px solid #ACD298 !important;
  border-radius: 22px !important;
  text-align: center;
}

.card-success-opacity li {
  text-align: left;
}

@media screen and (max-width: 1366px) {
  .banner-middle {
    background-size: cover;
    background-position: center left;
  }

  .card-cel {
    background-position: center;
    height: 509px;
  }

  .card-robo {
    background-size: contain;
    height: 611px;
  }

  .card-mulher {
    background-position: left center;
    height: 733px;
  }

  .tablet {
    background-size: contain;
    background-position: center;
    height: 641px;
  }

  .carteira-atual,
  .carteira-ideal {
    background-size: contain;
    height: 532px;
  }

  .img-responsive {
    width: 75%;
  }
}

@media screen and (max-width: 991px) {
  .img-responsive {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .banner-middle {
    background-size: cover;
    background-position: center left;
  }

  .card-cel {
    background-position: center;
    height: 476px;
  }

  .card-robo {
    background-size: contain;
    height: 447px;
  }

  .card-mulher {
    background-position: left center;
    height: 549px;
  }

  .tablet {
    background-size: contain;
    background-position: center;
    height: 595px;
  }

  .carteira-atual,
  .carteira-ideal {
    background-size: contain;
    height: 396px;
  }

  .img-responsive {
    width: 100%;
  }
}

@media screen and (max-width: 658px) {
  .main-background {
    height: 133px;
  }

  .img-responsive {
    width: 100%;
  }
}

@media screen and (max-width: 400px) {
  .img-responsive {
    width: 100%;
  }
}

@media screen and (max-width: 360px) {
  .banner-middle {
    background-size: cover;
    background-position: center bottom;
  }

  .card-cel {
    background-position: center;
    height: 415px;
  }

  .card-robo {
    background-size: contain;
    height: 423px;
  }

  .card-mulher {
    background-position: left center;
    height: 507px;
  }

  .tablet {
    background-size: contain;
    background-position: center;
    height: 530px;
  }

  .carteira-atual,
  .carteira-ideal {
    background-size: contain;
    height: 376px;
  }

  .img-responsive {
    width: 100%;
  }
}