.gradient {
  background: linear-gradient(90deg, #10163a 0%, #262c49 100%);
}

.cardcolour{
background-color: #10163a;
}

.cardbackcolour{
background-color: #262c49;
}

.hidden {
opacity: 0;
}

.visible {
opacity: 1;
transition: opacity 1s ease-out;
}

.hover div:hover {
  transform: scale(1.05);
  color: #fff;
}

.hover div:hover .icon-round {
  transform: scale(1.05);
  color: #fff;
  animation: ShakeAnim 1.5s infinite linear;
}

@keyframes ShakeAnim {
  from { transform: scale3d(1, 1, 1); }

  10%, 20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to { transform: scale3d(1, 1, 1); }
}

.pricingTable {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: all .3s ease 0s
}

/* ---- particles.js container ---- */

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background: gradient;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
opacity: 0.3;
}

#particles-js {
background: gradient;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
opacity: 0.3;
}

#overlay {
position: relative;
padding: 50px;
}

/* ---- floating image container ---- */

@keyframes img-perspective-main {
  0% {
    transform: perspective(800px) scale(.9)  translateY(20px)
  }
  
  100% {
    transform: perspective(800px) scale(.9) translateY(-20px)
  }
  }
  
  .img-perspective-main {
  transform: perspective(800px) rotateY(-25deg) scale(.9) rotateX(10deg);
  transition: .6s;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  animation-name: img-perspective-main;
  animation-iteration-count: infinite;
  animation-direction: alternate
  }
  
  .img-perspective {
  /* transform: perspective(800px) rotateY(25deg) scale(.9) rotateX(10deg); */
  transition: .6s ease all
  }
  
  .img-perspective:hover {
  transform: perspective(800px) rotateY(-15deg) translateY(-50px) rotateX(10deg) scale(1)
  }
  
  .img-perspective-reverse {
  transform: perspective(800px) rotateY(-25deg) scale(.9) rotateX(10deg);
  transition: .6s ease all
  }
  
  .img-perspective-reverse:hover {
  transform: perspective(800px) rotateY(15deg) translateY(-50px) rotateX(10deg) scale(1)
  }