body{
         
          font-family: "Dosis", sans-serif !important;
          font-optical-sizing: auto;
          font-weight: weight;
          font-style: normal;
          margin: auto;
          align-items: center;
           background-color:#292828 !important;
        }
        .logo1{
            height: 50px;
            border-radius: 3px;
            margin-right: 100px;
        }
        li a {
          text-transform: uppercase;

        }
        .navbar-nav li a:hover , .dropdown-menu li a:hover{
          color: rgb(110, 177, 236);
          text-decoration: underline;

          
         }
         .container {
          border-radius: 7px;
         }
         .containerHeader{
          margin: 100px 0px;
          display: flex;
         justify-content: center;
         }
         p {
          font-size: 24px;
          color: #ffffff;
         }
         .card-img-overlay {
          /* Asegúrate de que el overlay tenga un padding adecuado si es necesario */
          padding: 20px;
        }

        /* Ajusta el botón si es necesario */
        .btn-info {
          white-space: normal; /* Permite que el texto del botón se ajuste según sea necesario */
        }
        .parrafos{
          color: black;
          font-size: 20px;
        }
        .icono{
          font-size: 100px;
          color: black;
        }
        .carousel-indicators .circular-button {
          border-radius: 50%; /* Hace el botón circular */
          width: 15px; /* Establece el ancho del botón */
          height: 15px; /* Establece la altura del botón */
          margin-right: 5px;
          margin-left: 5px;
          background-color: #fff; /* Color de fondo del botón */
      }

      .carousel-indicators .active {
          background-color: #000; /* Color de fondo del botón activo */
      }
     .btn-wsp{
      position: fixed;
      width: 55px;
      height: 55px;
      border-radius: 50px;
      background: rgb(119, 255, 0);
      color: white;
      line-height: 55px;
      bottom: 30px;
      right: 30px ;
      text-align: center;
      font-size: 30px;
      box-shadow: 0px 1px 10px rgb(0,0,0,0.3);
      z-index: 100;     
    }
      .btn-wsp:hover{
        text-decoration: none;
        color: rgb(102, 255, 0);
        background: rgb(156, 203, 248);
        animation: shake 1s;
        animation-iteration-count: infinite;

      }
      .card-img {
    object-fit: cover; 
    width: 100%;       
   
  }

  .card {

    overflow: hidden;;
  }
  .hero-card {
  height: 150vh;
  overflow: hidden;
  position: relative;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}






    
      @keyframes shake{
        0% { transform: rotate(0deg); }
        0% { transform: translateY(0) }
        25% { transform: translateY(5px) }
        50% { transform: translateY(-5px) }
        75% { transform: translateY(5px) }
        100% { transform: translateY(0) }

}

@media (max-width: 768px) {
  .carousel-item img {
    height: 100vh;
    object-fit: cover;
    object-position: center;
  }
  .hero-img {
    object-position: top; /* recorta desde arriba */
    
  }
 
  .hero-card {
    height: 100vh;
    
  }

}