@media screen and (min-width: 350px) and (max-width: 768px) {
  .display-3 {
    font-size: calc(1rem + 1vw);
  }
  .hero-card {
    position: relative;
    bottom: 0rem;
  }
  .hero {
    padding-top: 0px;
  }
  .display-3 {
    font-size: calc(0.90rem + 0.95vw) !important;
}

.chart{
  width: 100%;
  height: 100%;
}

.banner__title{
  margin-top: 15px;
}

.dots_indicator button{
  display: none;
}

.btn-group{
  margin-bottom: 30px;
}

.banner {
  padding-top: 155px;
  padding-bottom: 12px;
}
.carousel-indicators {
  top: 80%;
}

}

@media screen and (min-width: 768px) and (max-width: 991px) {
  .display-3 {
    font-size: calc(1rem + 1vw);
  }
  .banner {
    padding-top: 155px;
    padding-bottom: 30px;
  }
  .hero-card {
    position: relative;
    bottom: 0rem;
  }
  .hero {
    padding-top: 0px;
  }
  .display-3 {
    font-size: calc(0.90rem + 0.95vw) !important;
}
.btn-group{
  margin-bottom: 30px;
}
.carousel-indicators {
  top: 86%;
}

.dots_indicator button{
  display: none;
}
}

.chart{
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 1024px) {
  .main-menu .navbar-nav>li>a {
    font-size: 17px;
  }
  .display-3 {
    font-size: calc(1.525rem + 1.3vw);
  }
  .banner {
    padding-top: 140px;
    padding-bottom: 15px;
  }
  .banner_main_title {
    font-size: 2rem;
  }
  .hero-card {
    position: relative;
    bottom: 2.5rem;
  }
  .hero {
    padding-top: 45px;
  }

  .carousel-indicators {
    top: 86%;
    }
    .dots_indicator button {
      display: none;
    }
    .btn-group{
      margin-bottom: 30px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .display-3 {
    font-size: calc(1rem + 1vw);
  }
  .banner {
    padding-top: 165px;
    padding-bottom: 20px;
  }
  .hero-card {
    position: relative;
    bottom: 0rem;
  }
  .hero {
    padding-top: 145px;
  }
  .display-3 {
    font-size: calc(0.90rem + 0.95vw) !important;
}
.carousel-indicators {
  top: 86%;
}
.dots_indicator {
  display: block;
}
}
@media screen and (min-width: 1360px) and (max-width: 1366px) {
  .main-menu .navbar-nav>li>a {
    font-size: 16px;
  }
  .display-3 {
    font-size: calc(1.525rem + 1.3vw);
  }
  .banner {
    padding-top: 155px;
    padding-bottom: 30px;
  }
  .banner_main_title {
    font-size: 2rem;
  }
  .hero-card {
    position: relative;
    bottom: 2.5rem;
  }
  .hero {
    padding-top: 145px;
  }
  .carousel-indicators {
    top: 86%;
  }
  .dots_indicator {
    display: block;
  }
}
@media screen and (min-width: 1920px) {

  .main-menu .navbar-nav>li>a {
    font-size: 18px;
  }
  .display-3 {
    font-size: 3.5rem;
  }
  .banner {
    padding-top: 155px;
    padding-bottom: 30px;
  }
  .banner_main_title {
    font-size: 2.5rem;
  }
  .hero-card {
    position: relative;
    bottom: 2.5rem;
  }
  .hero {
    padding-top: 145px;
  }
  .carousel-indicators {
    top: 95%;
  }
  .dots_indicator {
    display: block;
  }
}

 @media only screen and (max-width: 1920px) and (max-height: 1080px) and (-webkit-device-pixel-ratio: 1.25) {
  .main-menu .navbar-nav>li>a {
    font-size: 15px;
  }
  .display-3 {
    font-size: 3.5rem;
  }
  .banner {
    padding-top: 155px;
    padding-bottom: 30px;
  }
  .banner_main_title {
    font-size: 1.5rem;
  }
  .hero-card {
    position: relative;
    bottom: 2.5rem;
  }
  .hero-card {
    position: relative;
    bottom: 2.5rem;
  }
  .hero {
    padding-top: 145px;
  }
  .carousel-indicators {
    top: 80%;
  }
  .dots_indicator {
    display: block;
  }
 }

 @media only screen and (max-width: 1920px) and (max-height: 1080px) and (-webkit-device-pixel-ratio: 1.50) {
  .main-menu .navbar-nav>li>a {
    font-size: 15px;
  }.display-3 {
    font-size: 3.5rem;
  }
  .banner {
    padding-top: 155px;
    padding-bottom: 30px;
  }
  .banner_main_title {
    font-size: 1.5rem;
  }
  .hero-card {
    position: relative;
    bottom: 2.5rem;
  }
  .hero {
    padding-top: 145px;
  }
  .carousel-indicators {
    top: 80%;
  }
  .dots_indicator {
    display: none;
  }
 }