:root {
    --neon: #6e31e8;
    --navi: #0c106d;
    --royal: #2750eb;
    --aqua: #7ce5f3;
    --blanco: #fff;
  }
  @font-face {
    font-family: 'Montserrat-medium';
    -webkit-font-family: 'Montserrat-medium';
    src: url('/assets/Montserrat-Font-Family/Montserrat-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }
  @font-face {
    font-family: 'Montserrat-bold';
    -webkit-font-family:  'Montserrat-bold';
    src: url('/assets/Montserrat-Font-Family/Montserrat-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }
  @font-face {
    font-family: 'Montserrat-light';
    -webkit-font-family: 'Montserrat-light';
    src: url('/assets/Montserrat-Font-Family/Montserrat-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
  }

  .toggler-icon{
    font-size: 2rem;
    color: var(--neon)
  }
  .navbar-light .navbar-toggler {
    border: none;
  }
  .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0rem;
  }
.btn-autentiz{
  font-family: 'Montserrat-medium', sans-serif;
  -webkit-font-family: 'Montserrat-medium', sans-serif;
  background-color: var(--neon);
  color: var(--blanco);
  border-radius: 50px;
  font-size: 12px;
  transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.btn-autentiz:hover{
  box-shadow: inset 120px 0 0 0 var(--navi);
  color: var(--blanco);
}
.bannerbg{
  background-image: url(/assets/img/BANNER2_LADO.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 42rem; 
}
.bannertittle{
  padding: 8rem 4rem 2rem;
  color: var(--navi);
  font-family: 'Montserrat-bold', sans-serif;
  -webkit-font-family: 'Montserrat-bold', sans-serif;
  font-size: 4rem;
}

.bannertext{
  font-family: 'Montserrat-light', sans-serif;
  -webkit-font-family: 'Montserrat-light', sans-serif;
  padding: 0rem 4rem;
  color: var(--blanco);
  font-size: 1.5rem;
  text-shadow: 1px 1px #80808099;
}
.tittle{
  background-color: var(--aqua);
  height: 20px;
  border-radius: 50px;
  margin-top: 20px;
}
.text-tittle{
  color: var(--navi);
  font-family: 'Montserrat-bold', sans-serif;
  -webkit-font-family: 'Montserrat-bold', sans-serif;
  font-size: 2rem;
  text-align: center;
  position: absolute;
  
}
.icontext{
  text-transform: uppercase;
  color: var(--navi);
  font-family: 'Montserrat-bold', sans-serif;
  -webkit-font-family: 'Montserrat-bold', sans-serif;
  padding-top: 1rem;
  font-size: 1.2rem;
}
.text-dest{
  color: var(--royal);
  font-family: 'Montserrat-bold', sans-serif;
  -webkit-font-family: 'Montserrat-bold', sans-serif;
}
.number{
  color: var(--royal);
  font-family: 'Montserrat-bold', sans-serif;
  -webkit-font-family: 'Montserrat-bold', sans-serif;
  margin: 0;
}
.textnum{
  color: var(--navi);
  text-transform: uppercase;
  font-family: 'Montserrat-bold', sans-serif;
  -webkit-font-family: 'Montserrat-bold', sans-serif;
}
.description-text{
  color: var(--navi)
}
footer{
  background-color: var(--royal);
  color: var(--blanco)
}
h4{
  font-family: 'Montserrat-light', sans-serif;
  -webkit-font-family: 'Montserrat-light', sans-serif;
  -webkit-font-weight: bold;
}
.footerlink{
  font-family: 'Montserrat-light', sans-serif;
  -webkit-font-family: 'Montserrat-light', sans-serif;
  text-decoration: none;
  color: var(--blanco);
  margin-right: 10px;
}
.footerlink i{
 font-size: 2rem;
}
.footerlink:hover{
  font-family: 'Montserrat-light', sans-serif;
  -webkit-font-family: 'Montserrat-light', sans-serif;
  text-decoration: none;
  color: var(--aqua);
  margin-right: 10px;
}
.hs-input{
  border-radius: 50px;
}
.card{
  border-radius: 30px;
}
@media only screen and (max-width: 767px) {
  .bannerbg{
    background-image: url(/assets/img/BANNER1_CENTRADO.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 110vh; 
  }
  .bannertittle{
    padding: 2rem 1rem 1rem;
    color: var(--navi);
    font-size: 2.5rem;
  }
  .bannertext{
    padding: 0rem 1rem;
    color: var(--blanco);
    font-size: 1.5rem;
  }
  .number{
    color: var(--royal);
    font-size: 3rem;
    margin: 0;
  }
  .textnum{
    color: var(--navi);
    text-transform: uppercase;
    font-size: 3rem;
  }
  h4{
    font-size: 1rem;
  }
  .footerlink{
   font-size: 0.8rem;
  }
  
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .bannertittle{
    padding: 8rem 1rem 1rem;
    color: var(--navi);
    font-size: 2.5rem;
  }
  .bannertext{
    padding: 3rem 1rem;
    color: var(--blanco);
    font-size: 1.5rem;
  }
}