@media (min-width: 360px) and (max-width: 740px)  {

    .hero {

        height: 80em;

        padding-top: 2%;

    }
    .carousel-control-next {
        right: 0em !important;
      }
      
      .carousel-control-prev {
        left: 0em !important;
      }


}

@media (min-width: 480px) and (max-width: 854px)  {

    .hero {

        height: 90em;

        padding-top: 2%;

    }

    .header{

        position: absolute;

        top: 0;

    }



}

@media (min-width: 430px) and (max-width: 932px)  {

    .hero {

        height: 92em;

    }

    .header{

        position: absolute;

        top: 0;

    }



}



@media (min-width: 320px) and (max-width: 480px)  {

    .hero {

        height: 80em;

        padding-top: 2%;

    }

    .header{

        position: absolute;

        top: 0;

    }
    .carousel-control-next {
        right: 0em !important;
      }
      
      .carousel-control-prev {
        left: 0em !important;
      }


}



@media (min-width: 280px) and (max-width: 653px)  {

    .hero {

        height: 75em;

        padding-top: 20%;

    }
    .hero .stats-item{
        padding: 0;
    }
    .header{

        position: absolute;

        top: 0;

    }

    .carousel-control-next {
        right: 0em !important;
      }
      
      .carousel-control-prev {
        left: 0em !important;
      }

}