/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
    padding-top: 3rem;
    padding-bottom: 0rem;
  }

  /* CUSTOMIZE THE CAROUSEL
  -------------------------------------------------- */

  /* Carousel base class */
  .carousel {
    margin-bottom: 0rem;
    margin-top: 70px;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 35%;
    z-index: 10;
  }

  .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 85vh;
    padding-top: 0px;
  }

  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 100vh;
  }
  .carousel-item > img {
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: auto;
  }

  .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    padding: 0;
    margin-right: 15%;
    margin-bottom: 3rem;
    margin-left: 15%;
    list-style: none;
  }

  .carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 10px;
    height: 10px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff0;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: 1;
    transition: opacity .6s ease;
    border-radius: 50%;
    border: 1px solid #fff;
  }

  .carousel-indicators .active {
    background-color: #fff;
  }

  .carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 0;
    bottom: 0rem;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
  }

  .caption-1 {
    font-size: 40px!important;
  }

  .caption-2 {
    font-size: 30px!important;
  }


  /* MARKETING CONTENT
  -------------------------------------------------- */

  /* Center align the text within the three columns below the carousel */
  .marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
  }
  .marketing h2 {
    font-weight: 400;
  }
  /* rtl:begin:ignore */
  .marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
  }
  /* rtl:end:ignore */


  /* Featurettes
  ------------------------- */

  .featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
  }

  /* Thin out the marketing headings */
  .featurette-heading {
    font-weight: 300;
    line-height: 1;
    /* rtl:remove */
    letter-spacing: -.05rem;
  }


  /* RESPONSIVE CSS
  -------------------------------------------------- */

  @media screen and (max-width: 1023px) {
    .carousel {
      margin-bottom: 0rem;
      margin-top: 25px;
    }
    .carousel-inner {
      height: 95vh;
    }
    .carousel-item > img {
      position: absolute;
      top: -50px;
      left: 0;
      width: 100%;
      height: auto;
    }
    .carousel-caption {
      bottom: 30%;
      z-index: 10;
    }
    .caption-1 {
      font-size: 35px!important;
    }
    .caption-2 {
      font-size: 25px!important;
    }
    .btn-ver-catalogo {
      min-width: 130px;
      font-size: 16px;
    }
    .carousel-inner {
      height: 100vh;
    }
    .carousel-item {
      height: 100vh;
    }
  }

  @media screen and (max-width: 991px) {
    .carousel-item > img {
      position: absolute;
      top: -250px;
      left: 0;
      width: 100%;
      height: auto;
    }
  }
  @media screen and (max-width: 767px) {
    .carousel-inner {
      height: 90vh;
    }
    .carousel-item {
      height: 90vh;
    }
    .carousel-item > img {
      position: absolute;
      top: -50px;
      left: 0;
      width: 100%;
      height: auto;
    }
  }

  @media screen and (max-width: 425px) {
    .carousel-item > img {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        height: auto;
    }
  }

  @media screen and (max-width: 400px) {
    .caption-1 {
        font-size: 30px!important;
    }
    .caption-2 {
      font-size: 20px!important;
    }
    .carousel-item > img {
      position: absolute;
      top: 0px;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .carousel {
      height: 90vh;
    }
  }
  @media screen and (min-width: 1024px) {
    .caption-1 {
      font-size: 36px!important;
    }
    .caption-2 {
        font-size: 27px!important;
    }
    .btn-ver-catalogo {
        min-width: 140px;
        font-size: 17px;
    }
    .carousel {
      margin-bottom: 0rem;
      margin-top: 70px;
    }
  }

  @media screen and (min-width: 1200px) {
    .caption-1 {
        font-size: 40px!important;
    }
    .caption-2 {
        font-size: 30px!important;
    }
    .btn-ver-catalogo {
      border: 1px solid rgb(217,10,35);
      color: #fff;
      background: rgb(217,10,35);
      border-radius: 0px;
      min-width: 150px;
      font-size: 18px;
    }
    .carousel {
      margin-bottom: 0rem;
      margin-top: 70px;
    }
  }

  @media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
      margin-bottom: 2rem;
      font-size: 1.5rem;
      line-height: 1.3;
    }

    .featurette-heading {
      font-size: 50px;
    }
  }

  @media (min-width: 62em) {
    .featurette-heading {
      margin-top: 7rem;
    }
  }