.card-border-shadow-danger {
      border-top: 4px solid #dc3545;
      /* Rojo de Bootstrap (danger) */
      box-shadow: 0px -3px 10px rgba(220, 53, 69, 0.4);
      /* Sombra roja en la parte superior */
    }

    .card-border-shadow-success {
      border-top: 4px solid #28a745;
      /* Verde de Bootstrap (success) */
      box-shadow: 0px -3px 10px rgba(40, 167, 69, 0.4);
      /* Sombra verde en la parte superior */
    }

    :root {
      --transition-duration: 0.5s;
      --transition-timing-function: ease;
    }

    .element-to-animate {
      transition: transform var(--transition-duration) var(--transition-timing-function);
    }

    .element-to-animate:hover {
      transform: scale(1.1);
    }




    #rombo {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 20px auto;
      width: 100%;
      position: relative;
      max-width: 150px;
    }
    
    #rombo .contenido {
      border-radius: 10px;
      background-color: RGB(114, 103, 239);
      padding: 0;
      width: 100px;
      height: 100px;
      margin: 0 auto;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 3px solid white;
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      transition: transform 0.1s cubic-bezier(0, 1.8, 1, 1.8);
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      z-index: 1;
      position: relative;
      left: 0;
    }

    #rombo .contenido:hover {
      transform: rotate(45deg) scale(1.005) translateX(-0.5px);
      background-color: rgb(5, 120, 177);
      box-shadow: 10px 10px 50px rgb(114, 103, 239) inset, -10px -10px 50px rgb(114, 103, 239) inset;
    }

    #rombo .contenido .texto {
      font-weight: 600;
      border-radius: 4px;
      color: white;
      position: relative;
      padding: 0px;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      font-size: 13px;
      width: 100%;
      text-align: center;
      white-space: nowrap;
      letter-spacing: -0.5px;
    }
    /* Large devices (laptops/desktops, 992px and up) -- This would display the text at 10.0rem on laptops and larger screens */
    @media only screen and (min-width: 992px) {
      h1 {
          font-size: 10.0rem; /* you can also use px here */
      }
    }