.spinning-card {
    background-color: #DEE1E1;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    height: 130px;
    perspective: 1000px;
  }
  
  @media (max-width: 575px) {
    .spinning-card {
      height: 200px;
    }
  }
  
  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .col-lg-6 {
      width: 50%;
      float: left;
  }
  .col-md-12 {
      width: 100%;
  }

    .spinning-card {
      height: 150px;
      width: 90%;
      margin-left: 20px;
    }
  }
  
  .spinning-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .spinning-card-front,
  .spinning-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  .spinning-card-front {
    background-color: #DEE1E1;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(0deg);
  }
  
  .spinning-card-back {
    background-color: #DEE1E1;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .spinning-card.flipped .spinning-card-inner {
    transform: rotateY(180deg);
  }
  
  .spinning-card p {
    margin: 0;
    padding: 10px;
    text-align: center;
  }
  
  /* .spinning-card img {
    animation-name: wobble;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  } */

  .spinning-card-image {
    transition: transform 0.5s;
    height: 100px;
  }

  .spinning-card:hover .spinning-card-image {
    animation: wobble 1s infinite;
  }

  .spinning-card-front:hover .spinning-card-image-1 {
    /* CSS code to change the image on hover */
    content: url("../images/icons/warning-orange.png");
  }

  .spinning-card-front:hover .spinning-card-image-2 {
    /* CSS code to change the image on hover */
    content: url("../images/icons/safety-cone-orange.png");
  }

  .spinning-card-front:hover .spinning-card-image-3 {
    /* CSS code to change the image on hover */
    content: url("../images/icons/megaphone-orange.png");
  }


  
  @keyframes wobble {
    0% {
      transform: rotateZ(0deg);
    }
    10% {
      transform: rotateZ(-1deg);
    }
    20% {
      transform: rotateZ(1deg);
    }
    30% {
      transform: rotateZ(-1deg);
    }
    40% {
      transform: rotateZ(1deg);
    }
    50% {
      transform: rotateZ(-1deg);
    }
    60% {
      transform: rotateZ(1deg);
    }
    70% {
      transform: rotateZ(-1deg);
    }
    80% {
      transform: rotateZ(1deg);
    }
    90% {
      transform: rotateZ(-1deg);
    }
    100% {
      transform: rotateZ(0deg);
    }
  }