/* ASIFrontDesk Image Animation Start */

.tp-about__bg-shape {
    position: absolute;
    /* top: -41%;
    right: -4px; */
}

.tp-about__main-img {
    padding-right: 40px;
    animation: scale_up_down 3s infinite alternate both;
}
@keyframes scale_up_down {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
    
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.z-index {
    position: relative;
    z-index: 2;
}

.tp-about__main-img img {
    /* box-shadow: 10px 40px 40px rgba(1, 16, 61, 0.06), -20px -20px 120px rgba(1, 16, 61, 0.01); */
    box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
    /* border-radius: 20px; */
}
.tp-about__sub-img-1 {
    position: absolute !important;
    bottom: -20%;
    left: 76%;
    animation: tptranslateY2 4s forwards infinite alternate;
}
@keyframes tptranslateY2{
    0% {
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    
    100% {
        -webkit-transform: translateY(20px);
        -moz-transform: translateY(20px);
        -ms-transform: translateY(20px);
        -o-transform: translateY(20px);
        transform: translateY(20px);
    }
}

.z-index-3 {
    position: relative;
    z-index: 3;
}
.tp-about__sub-img-1 img {
    /* box-shadow: 10px 40px 40px rgba(1, 16, 61, 0.06), -20px -20px 120px rgba(1, 16, 61, 0.01); */
    /* box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px; */
    border-radius: 20px;
}

.tp-about__sub-img-2 {
    position: absolute;
    top: 15%;
    left: -5%;
    /* top: -32%;
    left: 8%; */
    animation: tptranslateX2 4s forwards infinite alternate;
}
@keyframes tptranslateX2 {
    0% {
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        -o-transform: translateX(-30px);
        transform: translateX(-30px);
    }
    
    100% {
        -webkit-transform: translatXY(20px);
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        transform: translateX(20px);
    }
}
.tp-about__sub-img-2 img {
    /* box-shadow: 10px 40px 40px rgba(1, 16, 61, 0.06), -20px -20px 120px rgba(1, 16, 61, 0.01); */
    /* box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px; */
    /* border-radius: 20px; */
}
.tp-about__sub-img-3 {
    position: absolute;
    bottom: -31%;
    left: -13%;
}
.tp-about__sub-img-3 img {
    height: 170px;
    width: 150px;
}


/* Webres animation css start */
.tp-plan-2-img-box {
    /* margin-left: 95px; */
}
.tp-plan-2-img-1 img {
    border-radius: 30px;
    width: 100%;
}
.tp-plan-2-img-2 {
    position: absolute;
    top: 26%;
    right: -20%;
    z-index: 2;
}
.tp-plan-2-img-2 img {
    border-radius: 16px;
    /* box-shadow: 0px 20px 50px rgba(32, 33, 36, 0.14); */
    border-radius: 10px;
}
.tp-plan-2-img-3 {
    position: absolute;
    left: -8%;
    bottom: 1%;
    animation: tptranslateX2 4s forwards infinite alternate;
}
.tp-plan-2-img-3 img {
    border-radius: 16px;
    /* box-shadow: 0px 20px 50px rgba(32, 33, 36, 0.14); */
    border-radius: 10px;
}
.tp-plan-2-img-4 {
    position: absolute;
    bottom: 5%;
    left: 76%;
    animation: tptranslateY2 4s forwards infinite alternate;
}
.tp-plan-2-img-4 img {
    border-radius: 16px;
    /* box-shadow: 0px 20px 50px rgba(32, 33, 36, 0.14); */
    border-radius: 10px;
}
.tp-plan-2-img-5 {
    position: absolute;
    bottom: 23%;
    right: 40%;
    animation: tptranslateX2 4s forwards infinite alternate;
}
.tp-plan-2-img-6 {
    position: absolute;
    top: 18%;
    left: 18%;
}
/* fdpage infrastructure */
.fd-card-main-img img {
    border-radius: 30px;
    width: 75%;
    position: relative;
    top: 10%;;
  }

/* POS animation */
.tp-card-main-img img {
    border-radius: 30px;
    width: 92%;
  }
  .tp-card-img-1 {
    position: absolute;
    top: -53px;
    left: 45px;
    animation: rotate2 15s linear infinite;
  }
  @keyframes rotate2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .tp-card-img-2 {
    position: absolute;
    bottom: -42%;
    left: 0px;
  }
  .tp-card-img-3 {
    position: absolute;
    top: -11%;
    right: 57px;
    z-index: -1;
  }
  .tp-card-img-4 {
    position: absolute;
    top: 19%;
    right: 28px;
    z-index: -1;
  }
  .tp-card-img-5 {
    position: absolute;
    top: 43%;
    right: 19%;
    animation: tptranslateX2 5s forwards infinite alternate;
  }
  @keyframes tptranslateX2 {
    0% {
      -webkit-transform: translateX(-30px);
      -moz-transform: translateX(-30px);
      -ms-transform: translateX(-30px);
      -o-transform: translateX(-30px);
      transform: translateX(-30px);
    }
    100% {
      -webkit-transform: translatXY(20px);
      -moz-transform: translateX(20px);
      -ms-transform: translateX(20px);
      -o-transform: translateX(20px);
      transform: translateX(20px);
    }
  }