.animation {
  overflow: hidden;
  margin: 8px;
  min-width: 240px;
  max-width: 320px;
  width: 100%;
}

.animation img {
  transition: all 0.3s;
  box-sizing: border-box;
  max-width: 100%;
}

.animation:hover img {
  transform: scale(1.3) rotate(5deg);
}

.flip-card {
  background-color: transparent;
  width: 350px;
  height: 370px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
}

.flip-card:focus {
    outline: 0;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner{
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
}

.flip-card-front {
  
  color: black;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card-back {
  
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
h3 {
  font-size: 20px;
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: #fff;
}


/*.animate-charcter*/
/*{*/
/*   text-transform: uppercase;*/
/*  background-image: linear-gradient(*/
/*    -225deg,*/
/*    #231557 0%,*/
/*    #44107a 29%,*/
/*    #ff1361 67%,*/
/*    #fff800 100%*/
/*  );*/
/*  background-size: auto auto;*/
/*  background-clip: border-box;*/
/*  background-size: 200% auto;*/
/*  color: #fff;*/
/*  background-clip: text;*/
/*  text-fill-color: transparent;*/
/*  -webkit-background-clip: text;*/
/*  -webkit-text-fill-color: transparent;*/
/*  animation: textclip 2s linear infinite;*/
  
/*      font-size: 2rem;*/
/*}*/

/*@keyframes textclip {*/
/*  to {*/
/*    background-position: 200% center;*/
/*  }*/
/*}*/

.bounce{
    opacity:0;
}

.leftanimation, .rightanimation{
    opacity:0;
}

.bounce.animated{
    opacity:1;
}

.leftanimation.animated, .rightanimation.animated{
    opacity:1;
}

.zoomin1{
    opacity:0;
}

.zoomin1.animated{
    opacity:1;
}

.zoomin2{
    opacity:0;
}

.zoomin2.animated{
    opacity:1;
}

.zoomin3{
    opacity:0;
}

.zoomin3.animated{
    opacity:1;
}

.whyanimation{
    opacity:0;
}

.whyanimation.animated{
    opacity:1;
}

.faqanimation{
    opacity:0;
}

.faqanimation.animated{
    opacity:1;
}

.newsanimation{
    opacity:0;
}

.newsanimation.animated{
    opacity:1;
}

.brandanimation{
    opacity:0;
}

.brandanimation.animated{
    opacity:1;
}

.tanimation{
    opacity:0;
}

.tanimation.animated{
    opacity:1;
}

/*.footerformanimation{*/
/*    opacity:0;*/
/*}*/

/*.footerformanimation.animated{*/
/*    opacity:1;*/
/*}*/

/*.footerserviceanimation{*/
/*    opacity:0;*/
/*}*/

/*.footerserviceanimation.animated{*/
/*    opacity:1;*/
/*}*/

/*.footertimeanimation{*/
/*    opacity:0;*/
/*}*/

/*.footertimeanimation.animated{*/
/*    opacity:1;*/
/*}*/

/*.footeraddressanimation{*/
/*    opacity:0;*/
/*}*/

/*.footeraddressanimation.animated{*/
/*    opacity:1;*/
/*}*/


.aboutleftBox,
.ourBoxLeft,
.ourBoxRight,
.techBoxLeft,
.techBoxRight,
.advantageBoxLeft,
.advantageBoxRight,
.our_meet_sec{
    opacity:0;
}

.aboutleftBox.animated,
.ourBoxLeft.animated,
.ourBoxRight.animated,
.techBoxLeft.animated,
.techBoxRight.animated,
.advantageBoxLeft.animated,
.advantageBoxRight.animated,
.our_meet_sec.animated{
    opacity:1;
}

.appointBottom{
    opacity:0;
}

.appointBottom.animated{
    opacity:1;
}

.aboutrightBox{
    opacity:0;
}

.aboutrightBox.animated{
    opacity:1;
}