html, body {
    overflow-x: hidden;
    width: 100vw;
    max-width: 100%;
}


 .h1{
    font-size: 42px;
    font-weight: 700;
  }
  .h2{
    font-size: 36px;
    font-weight: 700;
  }
  .container{
    max-width: 540px!important
  }

  .carrusel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100vw; /* Ocupa el ancho de la pantalla */
    height: 100%; /* Altura del carrusel */
  }
  ::-webkit-scrollbar{
    display: none; /* Oculta la barra de desplazamiento en Chrome, Safari y Opera */
  }

  .elemento {
    /*flex: 0 0 66%;*/ /* Cada elemento ocupa el 66% de la pantalla */
    /*scroll-snap-align: start;*/ /* Alineación al hacer scroll */
    color: white; /* Color del texto */
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    font-size: 2em; /* Tamaño del texto */
  }

  .modal-content{
    border-radius: 15px!important;
  }

  .full-height{
    height: 100%;
  }
.primary-text{
  color:#8032f4;
}
.border-radius{
  border-radius: 10px;
}
.overlay-custom{
  position: absolute;top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.0) 60%, rgba(0, 0, 0, 0) 40%);
  border-radius: 10px;
}

.height-160{
  height:190px
}

.card-title{
  margin-bottom: 0px;
  color:white;font-weight:800
}

.card-image{
  background-position: center;background-size: cover;height:100%;border-radius: 10px;width:100%
}

.card-btn-custom{
  background-color:#efde0f;font-weight:bold;font-size:16px;color:black;border:none;padding:10px 15px
}

  .modal-dialog-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
  
  .modal.fade .modal-dialog-bottom {
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
  }

  .modal.show .modal-dialog-bottom {
    transform: translateY(0);
  }

  
      @keyframes shake {
        0% { transform: translate(0, 0); }
        10% { transform: translate(-2px, 0); }
        20% { transform: translate(2px, 0); }
        30% { transform: translate(-2px, 0); }
        40% { transform: translate(2px, 0); }
        50% { transform: translate(-2px, 0); }
        60% { transform: translate(2px, 0); }
        70% { transform: translate(-2px, 0); }
        80% { transform: translate(2px, 0); }
        90% { transform: translate(-2px, 0); }
        100% { transform: translate(0, 0); }
      }

      .shake-now {
        animation: shake 0.8s;
      }