/*
 * assets/css/vendor-animations.css
 * Premora's own copy of the theme's animation library (ripple, spin,
 * jump, wobble, morph, slide-in, swiper transitions, etc.), ported from
 * the vendor's _animation.scss source to plain CSS so nothing on the
 * live site depends on the inotek/ folder for these effects.
 * Converted 2026-07-22: SCSS variables and mixin/include calls were
 * expanded inline; nested selectors were flattened; line comments were
 * converted to block comments. Two values weren't defined in the
 * uploaded partial (they live in the theme's separate variables/mixins
 * files) and were substituted with reasonable, commonly-used defaults:
 * the play-btn ring transition (all .3s ease) and the white-color
 * variable (#ffffff).
 */
:root {
  --ripple-ani-duration: 2s;
  --progress-width: 100%;
}

.ripple-animation {
  animation-duration: var(--ripple-ani-duration);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: ripple;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

@-webkit-keyframes ripple-video {
  0% {
    -webkit-box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3);
  }

  100% {
    -webkit-box-shadow:
      0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3),
      0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow:
      0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3),
      0 0 0 30px rgba(255, 255, 255, 0);
  }
}

@keyframes ripple-video {
  0% {
    -webkit-box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow:
      0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3);
  }

  100% {
    -webkit-box-shadow:
      0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3),
      0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow:
      0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3),
      0 0 0 30px rgba(255, 255, 255, 0);
  }
}

.movingX {
  animation: movingX 5s linear infinite;
}

@keyframes movingX {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(30px);
  }

  100% {
    transform: translateX(0);
  }
}

.moving {
  animation: moving 8s linear infinite;
}

@keyframes moving {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-50px);
  }

  100% {
    transform: translateX(0);
  }
}

.jump {
  animation: jumpAni 7s linear infinite;
}

.jump1 {
  animation: jumpAni 6s linear infinite;
}

.jump2 {
  animation: jumpAni 5s linear infinite;
}

.jump3 {
  animation: jumpAni 4s linear infinite;
}

@keyframes jumpAni {
  0% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-30px);
  }

  100% {
    transform: translateY(0);
  }
}

.jump-reverse {
  animation: jumpReverseAni 7s linear infinite;
}

@keyframes jumpReverseAni {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(0);
  }
}

.spin {
  animation: spin 15s linear infinite;
}

.spin2 {
  animation: spin2 20s linear infinite;
}

.spin3 {
  animation: spin3 20s linear infinite;
}

.spin-slow {
  animation: spin 50s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes spin2 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin3 {
  0% {
    transform: rotateX(0);
  }

  100% {
    transform: rotateX(-180deg);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

  0% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }

  75% {
    border-top-color: #fff;
    border-left-color: #fff;
    border-right-color: #fff;
    border-bottom-color: transparent;
  }

  100% {
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
  }
}

/*======== Image Animation ===========*/
.img-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-right {
  0% {
    transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.img-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.img-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

@keyframes img-anim-top {
  0% {
    transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* New Image Animation code */

.data-img-hover {
  position: relative;
  width: 100%;
}

.data-img-hover img {
  width: 100%;
  height: auto;
}

.data-img-hover canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}






/*Text-Animation**********************/
/* Original SCSS used $anim-duration/$anim-timing/$opacity-anim variables and
   @mixin animation/keyframes-transform/keyframes-clip/zoom-in. This is plain
   CSS (no build step), so those are expanded inline below. */

.text-anim-right {
  animation: text-anim-right 0.4s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

@keyframes text-anim-right {
  from {
    transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.text-anim-left {
  animation: text-anim-left 0.4s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

@keyframes text-anim-left {
  from {
    transform: translateX(-5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.text-anim-top {
  animation: text-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

@keyframes text-anim-top {
  from {
    transform: translateY(-5%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* >>>>> Video Animation Start <<<<<// */
@-webkit-keyframes rippleOne {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}

@keyframes rippleOne {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}

/* >>>>> Video Animation End <<<<<// */

/* >>>>> Circle Animation Start <<<<<// */
@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rounded {
  50% {
    transform: rotate(15deg);
  }
}

/* >>>>> Circle Animation End <<<<<// */

/* >>>>> Preloader Animation Start <<<<<// */
@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}

@-webkit-keyframes letters-loading {

  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes letters-loading {

  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

/* >>>>> Preloader Animation Start <<<<<// */
@keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes tpswing {
  0% {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes width {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes width {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

@-webkit-keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes loaderpulse {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.2);
  }
}

/* >>>>> Preloader Animation End <<<<<// */

/* animation */
@keyframes rounded {
  50% {
    transform: rotate(20deg);
  }
}

@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}

.float-bob-y {
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

@keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}

@keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }

  to {
    -webkit-mask-position: -50%;
  }
}

@keyframes bounce-x {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounce-x {
  -webkit-animation: bounce-x 7s infinite linear;
  animation: bounce-x 7s infinite linear;
}

/* This is for Progress bar animation also has a js code */
@keyframes animate-positive {
  0% {
    width: 0;
  }

  100% {
    width: var(--progress-width);
  }
}

.scroll {
  animation: scroll 60s linear infinite;
  -webkit-animation: scroll 60s linear infinite;
}

.scroll2 {
  animation: scroll2 60s linear infinite;
  -webkit-animation: scroll2 60s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-200%);
  }
}

.rotate360 {
  animation: rotate360 10s linear infinite;
  -webkit-animation: rotate360 10s linear infinite;
}

@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
  }
}

.img-shine {
  position: relative;
  overflow: hidden;
}

.img-shine:after {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  transform: skewX(-20deg);
  opacity: 0;
}

.img-shine:hover:after {
  animation: imgShine 1s;
  opacity: 1;
}

@keyframes imgShine {
  100% {
    left: 125%;
  }
}

@keyframes stickyAni {
  0% {
    transform: translate3d(0, -40px, 0) scaleY(0.8);
    opacity: 0.7;
  }

  100% {
    transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 1;
  }
}

.moveAround {
  animation: moveAround 200s linear infinite;
  -webkit-animation: moveAround 200s linear infinite;
}

@keyframes moveAround {
  0% {
    transform: translate(-100%, -100%) translate(-300px, 80px);
    -webkit-transform: translate(-100%, -100%) translate(-300px, 80px);
    -moz-transform: translate(-100%, -100%) translate(-300px, 80px);
    -ms-transform: translate(-100%, -100%) translate(-300px, 80px);
    -o-transform: translate(-100%, -100%) translate(-300px, 80px);
  }

  25% {
    transform: translate(50%, -60%) translate(1900px, 300px);
    -webkit-transform: translate(50%, -60%) translate(1900px, 300px);
    -moz-transform: translate(50%, -60%) translate(1900px, 300px);
    -ms-transform: translate(50%, -60%) translate(1900px, 300px);
    -o-transform: translate(50%, -60%) translate(1900px, 300px);
  }

  50% {
    transform: translate(-80%, -80%) translate(-150px, 0px);
    -webkit-transform: translate(-80%, -80%) translate(-150px, 0px);
    -moz-transform: translate(-80%, -80%) translate(-150px, 0px);
    -ms-transform: translate(-80%, -80%) translate(-150px, 0px);
    -o-transform: translate(-80%, -80%) translate(-150px, 0px);
  }

  75% {
    transform: translate(50%, 50%) translate(1160px, 550px);
    -webkit-transform: translate(50%, 50%) translate(1160px, 550px);
    -moz-transform: translate(50%, 50%) translate(1160px, 550px);
    -ms-transform: translate(50%, 50%) translate(1160px, 550px);
    -o-transform: translate(50%, 50%) translate(1160px, 550px);
  }

  100% {
    transform: translate(100%, 100%) translate(-800px, -50px);
    -webkit-transform: translate(100%, 100%) translate(-800px, -50px);
    -moz-transform: translate(100%, 100%) translate(-800px, -50px);
    -ms-transform: translate(100%, 100%) translate(-800px, -50px);
    -o-transform: translate(100%, 100%) translate(-800px, -50px);
  }
}

.moveAround2 {
  animation: moveAround2 160s linear infinite;
  -webkit-animation: moveAround2 160s linear infinite;
}

@keyframes moveAround2 {
  0% {
    transform: translate(30%, 60%) translate(1450px, 500px);
    -webkit-transform: translate(30%, 60%) translate(1450px, 500px);
    -moz-transform: translate(30%, 60%) translate(1450px, 500px);
    -ms-transform: translate(30%, 60%) translate(1450px, 500px);
    -o-transform: translate(30%, 60%) translate(1450px, 500px);
  }

  25% {
    transform: translate(-50%, -60%) translate(-100px, -290px);
    -webkit-transform: translate(-50%, -60%) translate(-100px, -290px);
    -moz-transform: translate(-50%, -60%) translate(-100px, -290px);
    -ms-transform: translate(-50%, -60%) translate(-100px, -290px);
    -o-transform: translate(-50%, -60%) translate(-100px, -290px);
  }

  50% {
    transform: translate(-50%, -0%) translate(150px, 0px);
    -webkit-transform: translate(-50%, -0%) translate(150px, 0px);
    -moz-transform: translate(-50%, -0%) translate(150px, 0px);
    -ms-transform: translate(-50%, -0%) translate(150px, 0px);
    -o-transform: translate(-50%, -0%) translate(150px, 0px);
  }

  75% {
    transform: translate(50%, -50%) translate(1160px, -50px);
    -webkit-transform: translate(50%, -50%) translate(1160px, -50px);
    -moz-transform: translate(50%, -50%) translate(1160px, -50px);
    -ms-transform: translate(50%, -50%) translate(1160px, -50px);
    -o-transform: translate(50%, -50%) translate(1160px, -50px);
  }

  100% {
    transform: translate(50%, 50%) translate(-80px, 50px);
    -webkit-transform: translate(50%, 50%) translate(-80px, 50px);
    -moz-transform: translate(50%, 50%) translate(-80px, 50px);
    -ms-transform: translate(50%, 50%) translate(-80px, 50px);
    -o-transform: translate(50%, 50%) translate(-80px, 50px);
  }
}

.moveAround3 {
  animation: moveAround3 120s linear infinite;
  -webkit-animation: moveAround3 120s linear infinite;
}

@keyframes moveAround3 {
  0% {
    transform: translate(-50%, -50%) translate(400px, 300px);
    -webkit-transform: translate(-50%, -50%) translate(400px, 300px);
    -moz-transform: translate(-50%, -50%) translate(400px, 300px);
    -ms-transform: translate(-50%, -50%) translate(400px, 300px);
    -o-transform: translate(-50%, -50%) translate(400px, 300px);
  }

  25% {
    transform: translate(50%, -60%) translate(1900px, -300px);
    -webkit-transform: translate(50%, -60%) translate(1900px, -300px);
    -moz-transform: translate(50%, -60%) translate(1900px, -300px);
    -ms-transform: translate(50%, -60%) translate(1900px, -300px);
    -o-transform: translate(50%, -60%) translate(1900px, -300px);
  }

  50% {
    transform: translate(-50%, -0%) translate(-150px, 0px);
    -webkit-transform: translate(-50%, -0%) translate(-150px, 0px);
    -moz-transform: translate(-50%, -0%) translate(-150px, 0px);
    -ms-transform: translate(-50%, -0%) translate(-150px, 0px);
    -o-transform: translate(-50%, -0%) translate(-150px, 0px);
  }

  75% {
    transform: translate(50%, 50%) translate(160px, 50px);
    -webkit-transform: translate(50%, 50%) translate(160px, 50px);
    -moz-transform: translate(50%, 50%) translate(160px, 50px);
    -ms-transform: translate(50%, 50%) translate(160px, 50px);
    -o-transform: translate(50%, 50%) translate(160px, 50px);
  }

  100% {
    transform: translate(50%, 50%) translate(-200px, 200px);
    -webkit-transform: translate(50%, 50%) translate(-200px, 200px);
    -moz-transform: translate(50%, 50%) translate(-200px, 200px);
    -ms-transform: translate(50%, 50%) translate(-200px, 200px);
    -o-transform: translate(50%, 50%) translate(-200px, 200px);
  }
}

.moveAround4 {
  animation: moveAround4 200s linear infinite;
  -webkit-animation: moveAround4 200s linear infinite;
}

@keyframes moveAround4 {
  0% {
    transform: translate(50%, -50%) translate(500px, 300px);
    -webkit-transform: translate(50%, -50%) translate(500px, 300px);
    -moz-transform: translate(50%, -50%) translate(500px, 300px);
    -ms-transform: translate(50%, -50%) translate(500px, 300px);
    -o-transform: translate(50%, -50%) translate(500px, 300px);
  }

  25% {
    transform: translate(50%, 60%) translate(-100px, -300px);
    -webkit-transform: translate(50%, 60%) translate(-100px, -300px);
    -moz-transform: translate(50%, 60%) translate(-100px, -300px);
    -ms-transform: translate(50%, 60%) translate(-100px, -300px);
    -o-transform: translate(50%, 60%) translate(-100px, -300px);
  }

  50% {
    transform: translate(50%, -0%) translate(150px, 0px);
    -webkit-transform: translate(50%, -0%) translate(150px, 0px);
    -moz-transform: translate(50%, -0%) translate(150px, 0px);
    -ms-transform: translate(50%, -0%) translate(150px, 0px);
    -o-transform: translate(50%, -0%) translate(150px, 0px);
  }

  75% {
    transform: translate(50%, 50%) translate(760px, 550px);
    -webkit-transform: translate(50%, 50%) translate(760px, 550px);
    -moz-transform: translate(50%, 50%) translate(760px, 550px);
    -ms-transform: translate(50%, 50%) translate(760px, 550px);
    -o-transform: translate(50%, 50%) translate(760px, 550px);
  }

  100% {
    transform: translate(50%, 50%) translate(-800px, 350px);
    -webkit-transform: translate(50%, 50%) translate(-800px, 350px);
    -moz-transform: translate(50%, 50%) translate(-800px, 350px);
    -ms-transform: translate(50%, 50%) translate(-800px, 350px);
    -o-transform: translate(50%, 50%) translate(-800px, 350px);
  }
}

@keyframes characters {

  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

.bg-anime-scratch {
  animation: scratch 4s linear infinite;
  overflow: hidden;
}

@keyframes scratch {
  0% {
    height: 0;
  }

  70% {
    height: 158px;
  }

  100% {
    height: 158px;
  }
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

.fadein,
.scalein,
.slidetopleft,
.slidebottomright,
.slideinleft,
.slideinright,
.slideindown,
.slideinup,
.rollinleft,
.rollinright {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-duration: 1.3s;
  animation-delay: 0.3s;
  animation-name: var(--animation-name);
}

.swiper-slide-active .fadein {
  --animation-name: fadein;
}

.swiper-slide-active .scalein {
  --animation-name: scalein;
}

.swiper-slide-active .slidetopleft {
  --animation-name: slidetopleft;
}

.swiper-slide-active .slidebottomright {
  --animation-name: slidebottomright;
}

.swiper-slide-active .slideinleft {
  --animation-name: slideinleft;
}

.swiper-slide-active .slideinright {
  --animation-name: slideinright;
}

.swiper-slide-active .slideinup {
  --animation-name: slideinup;
}

.swiper-slide-active .slideindown {
  --animation-name: slideindown;
}

.swiper-slide-active .rollinleft {
  --animation-name: rollinleft;
}

.swiper-slide-active .rollinright {
  --animation-name: rollinright;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes scalein {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.3);
  }
}

@keyframes slideinup {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideinright {
  0% {
    opacity: 0;
    transform: translateX(180px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideindown {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideinleft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slidebottomright {
  0% {
    opacity: 0;
    transform: translateX(120px) translateY(120px);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes slidetopleft {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes wobble_vertical {
  16.65% {
    transform: translateY(8px);
  }

  33.3% {
    transform: translateY(-6px);
  }

  49.95% {
    transform: translateY(4px);
  }

  66.6% {
    transform: translateY(-2px);
  }

  83.25% {
    transform: translateY(1px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes wobble_vertical {
  16.65% {
    transform: translateY(8px);
  }

  33.3% {
    transform: translateY(-6px);
  }

  49.95% {
    transform: translateY(4px);
  }

  66.6% {
    transform: translateY(-2px);
  }

  83.25% {
    transform: translateY(1px);
  }

  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes wobble_spatial {
  16.65% {
    transform: translate3d(10px, 8px, 0px);
  }

  33.3% {
    transform: translate3d(-10px, -6px, 5px);
  }

  49.95% {
    transform: translate3d(7px, 4px, -5px);
  }

  66.6% {
    transform: translate3d(-7px, -2px, 3px);
  }

  83.25% {
    transform: translate3d(3px, 1px, -2px);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wobble_spatial {
  16.65% {
    transform: translate3d(10px, 8px, 0px);
  }

  33.3% {
    transform: translate3d(-10px, -6px, 5px);
  }

  49.95% {
    transform: translate3d(7px, 4px, -5px);
  }

  66.6% {
    transform: translate3d(-7px, -2px, 3px);
  }

  83.25% {
    transform: translate3d(3px, 1px, -2px);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes wobble_bell {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-10deg);
  }

  30% {
    transform: rotate(10deg);
  }

  45% {
    transform: rotate(-5deg);
  }

  60% {
    transform: rotate(5deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes wobble_bell {
  0% {
    transform: rotate(0deg);
  }

  15% {
    transform: rotate(-10deg);
  }

  30% {
    transform: rotate(10deg);
  }

  45% {
    transform: rotate(-5deg);
  }

  60% {
    transform: rotate(5deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes mirror_effect {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(-1);
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes mirror_effect {
  0% {
    transform: scaleX(1);
  }

  50% {
    transform: scaleX(-1);
  }

  100% {
    transform: scaleX(1);
  }
}

@keyframes mirrorEffect {
  0% {
    transform: scaleX(1);
    opacity: 1;
  }

  25% {
    transform: scaleX(1.2);
    opacity: 0.9;
  }

  50% {
    transform: scaleX(0.8);
    opacity: 0.7;
  }

  75% {
    transform: scaleX(1.1);
    opacity: 0.85;
  }

  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes mirrorReflection {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

@keyframes mirrorWave {

  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.05);
  }

  50% {
    transform: scale(1.1);
  }

  75% {
    transform: scale(1.05);
  }
}

@keyframes mirrorSlide {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-20px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes rotateAndScale {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.2);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.rotateAndScale {
  animation: rotateAndScale 4s infinite ease-in-out;
}

/* Keyframes for typing effect */
@-webkit-keyframes typing {
  0% {
    width: 0;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes typing {
  0% {
    width: 0;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes moveBorder {
  0% {
    left: 0;
  }

  50% {
    left: calc(100% - 100px);
  }

  100% {
    left: 0;
  }
}

@keyframes swirlArrow {
  0% {
    transform: rotate(0deg) scale(1);
    stroke-dasharray: 0, 100;
    opacity: 1;
  }

  50% {
    transform: rotate(45deg) scale(1.2);
    stroke-dasharray: 50, 50;
    opacity: 0.8;
  }

  100% {
    transform: rotate(90deg) scale(1);
    stroke-dasharray: 100, 0;
    opacity: 1;
  }
}

.scribble {
  animation: scribble 2s infinite linear;
}

@keyframes scribbleLeft {
  0% {
    transform: rotate(0deg) translateX(0);
  }

  25% {
    transform: rotate(10deg) translateX(-10px);
  }

  50% {
    transform: rotate(-10deg) translateX(10px);
  }

  75% {
    transform: rotate(5deg) translateX(-5px);
  }

  100% {
    transform: rotate(0deg) translateX(0);
  }
}

.your-element {
  animation: scribbleLeft 2s infinite;
  transform-origin: right center;
}

@keyframes scribble {
  0% {
    transform: rotate(0deg) translateX(0);
  }

  25% {
    transform: rotate(-10deg) translateX(10px);
  }

  50% {
    transform: rotate(10deg) translateX(-10px);
  }

  75% {
    transform: rotate(-5deg) translateX(5px);
  }

  100% {
    transform: rotate(0deg) translateX(0);
  }
}

@keyframes scribble2 {
  0% {
    transform: scaleX(-1) rotate(35deg);
  }

  25% {
    transform: scaleX(-1) rotate(17.5deg);
  }

  50% {
    transform: scaleX(-1) rotate(0deg);
  }

  75% {
    transform: scaleX(-1) rotate(17.5deg);
  }

  100% {
    transform: scaleX(-1) rotate(35deg);
  }
}

@keyframes bounceArrowX {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(10px);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.8);
  }
}

/* Applying the animations */
.zoomInAnimation1 {
  animation: zoomIn 2s ease-in-out infinite;
}

.ripple-animation,
.play-btn:after,
.play-btn:before {
  -webkit-animation-duration: var(--ripple-ani-duration);
  animation-duration: var(--ripple-ani-duration);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: ripple2;
  animation-name: ripple2;
}

@-webkit-keyframes ripple2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 0.4;
  }

  100% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes ripple2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 0.4;
  }

  100% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
    opacity: 0;
  }
}

@-webkit-keyframes ripple3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 0.4;
  }

  100% {
    -webkit-transform: scale(2.8);
    transform: scale(2.8);
    opacity: 0;
  }
}

@keyframes ripple3 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }

  30% {
    opacity: 0.4;
  }

  100% {
    -webkit-transform: scale(2.8);
    transform: scale(2.8);
    opacity: 0;
  }
}

.fancy-animation {
  -webkit-animation: morph 8s ease-in-out infinite;
  animation: morph 8s ease-in-out infinite;
}

@-webkit-keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }

  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

@keyframes morph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }

  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

.popup-video {
  position: relative;
  z-index: 1;
}

.play-btn:after,
.play-btn:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: -1;
  border-radius: 50%;
  transition: all .3s ease;
}

.play-btn:after {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.play-btn.style-2:before,
.play-btn.style-2:after {
  background-color: transparent;
  border: 2px solid #ffffff;
}

/* Button animation */
@-webkit-keyframes pxl_btn_shine {
  100% {
    left: 200%;
  }
}

@keyframes pxl_btn_shine {
  100% {
    left: 200%;
  }
}

/* Wow custom animation */

/* 1. Slide from Left */
@keyframes slideFromLeft {
  0% {
    transform: translateX(-200px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate__slideFromLeft {
  animation-name: slideFromLeft;
  animation-duration: 1.2s;
  animation-fill-mode: both;
}

/* 2. Slide from Right */
@keyframes slideFromRight {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }

  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate__slideFromRight {
  animation-name: slideFromRight;
  animation-duration: 1.2s;
  animation-fill-mode: both;
}

/* 3. Slide from Top */
@keyframes slideFromTop {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate__slideFromTop {
  animation-name: slideFromTop;
  animation-duration: 1.2s;
  animation-fill-mode: both;
}

/* 4. Slide from Bottom */
@keyframes slideFromBottom {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate__slideFromBottom {
  animation-name: slideFromBottom;
  animation-duration: 1.2s;
  animation-fill-mode: both;
}

/* 5. Zoom In */
@keyframes myZoomIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate__myZoomIn {
  animation-name: myZoomIn;
  animation-duration: 1.4s;
  animation-fill-mode: both;
}

/* 6. Zoom Out */
@keyframes myZoomOut {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate__myZoomOut {
  animation-name: myZoomOut;
  animation-duration: 1.4s;
  animation-fill-mode: both;
}

/* Swiper Custom Slide Animation Style */
.pageTurn.swiper-slide-active .bg.image,
.pageTurn.swiper-slide-active .thumb img {
  animation: pageTurn 2s ease-in-out forwards;
  transform-origin: left center;
}

@keyframes pageTurn {
  0% {
    transform: rotateY(-90deg) scale(1.1);
    opacity: 0;
  }

  100% {
    transform: rotateY(0deg) scale(1);
    opacity: 1;
  }
}

.blurSkew.swiper-slide-active .bg.image,
.blurSkew.swiper-slide-active .thumb img {
  animation: blurSkew 1.5s ease-in forwards;
}

@keyframes blurSkew {
  0% {
    filter: blur(10px);
    transform: skewX(20deg) scale(1.1);
    opacity: 0;
  }

  100% {
    filter: blur(0);
    transform: skewX(0deg) scale(1);
    opacity: 1;
  }
}

.centerCurtain.swiper-slide-active .bg.image,
.centerCurtain.swiper-slide-active .thumb img {
  animation: centerCurtain 2s ease-in-out forwards;
  will-change: clip-path, opacity;
}

@keyframes centerCurtain {
  0% {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
    opacity: 0;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

@-webkit-keyframes emgSwing {
  0% {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  100% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}

@keyframes emgSwing {
  0% {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  100% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
}

/* extra swiper animation */

.skewCurtain.swiper-slide-active .thumb img {
  animation: skewCurtain 2s ease-in-out forwards;
}

@keyframes skewCurtain {
  0% {
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
    transform: skewX(-10deg);
    opacity: 0.5;
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform: skewX(0deg);
    opacity: 1;
  }
}

.blurStretch.swiper-slide-active .thumb img {
  animation: blurStretch 1.7s ease-in-out forwards;
}

@keyframes blurStretch {
  0% {
    transform: scaleX(1.3) scaleY(0.8);
    filter: blur(10px) brightness(0.4);
    opacity: 0;
  }

  100% {
    transform: scaleX(1) scaleY(1);
    filter: blur(0) brightness(1);
    opacity: 1;
  }
}

.wipeDiagonal.swiper-slide-active .thumb img {
  animation: wipeDiagonal 2s ease-in-out forwards;
  will-change: clip-path, transform, opacity;
}

@keyframes wipeDiagonal {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform: skewX(-10deg) scale(1.1);
    opacity: 0;
    filter: brightness(0.5) blur(3px);
  }

  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: skewX(0deg) scale(1);
    opacity: 1;
    filter: brightness(1) blur(0);
  }
}

.ant-bounce {
  display: inline-block;
  animation: antWalkBounce 1s ease-in-out infinite;
}

@keyframes antWalkBounce {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  25% {
    transform: translateY(-5px) rotate(-2deg) scale(1.02);
    /* হালকা উপরে */
  }

  50% {
    transform: translateY(0) rotate(0deg) scale(1);
  }

  75% {
    transform: translateY(-5px) rotate(2deg) scale(1.02);
    /* আবার উপরে */
  }

  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

/* robot animation */

.robot {
  width: 150px;
  filter: drop-shadow(0px 0px 5px rgba(0, 170, 255, 0.5));
  animation: glow 2s ease-in-out infinite;
}

@keyframes glow {

  0%,
  100% {
    filter: drop-shadow(0px 0px 5px rgba(0, 170, 255, 0.5));
  }

  50% {
    filter: drop-shadow(0px 0px 15px rgba(0, 170, 255, 0.8));
  }
}

/* gsap animation */
.qtecMask {
  width: 110%;
  height: 100%;
  position: absolute;
  top: 0;
  opacity: 1;
  transform: translateX(-10%);
  background: linear-gradient(270deg, rgba(255, 255, 255, 1) 90%, rgba(237, 221, 83, 0) 100%);
}

.animateImg {
  transform: scale(2);
}



/* rocket animation */
.rocket {
  animation: shake 0.2s infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-3px);
  }

  50% {
    transform: translateX(3px);
  }

  75% {
    transform: translateX(-3px);
  }

  100% {
    transform: translateX(0);
  }
}


/* Integrations icon animation */

/* left */
@keyframes rollInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

.rollInLeft {
  animation-name: rollInLeft;
}


/* right */
@keyframes rollInRight {
  0% {
    opacity: 0;
    transform: translateX(100%) rotate(120deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
}

.rollInRight {
  animation-name: rollInRight;
}



/* Topleft */
@keyframes slideFromTopLeft45 {
  0% {
    opacity: 0;
    transform: translate(-150px, -150px) rotate(-45deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

.slideTopLeft45 {
  animation-name: slideFromTopLeft45;
}



/* TopRight */
@keyframes slideFromTopRight45 {
  0% {
    opacity: 0;
    transform: translate(150px, -150px) rotate(45deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

.slideTopRight45 {
  animation-name: slideFromTopRight45;
}


/* bottom left */
@keyframes slideFromBottomLeft45 {
  0% {
    opacity: 0;
    transform: translate(-150px, 150px) rotate(45deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

.slideBottomLeft45 {
  animation-name: slideFromBottomLeft45;
}


/* bottom right */
@keyframes slideFromBottomRight45 {
  0% {
    opacity: 0;
    transform: translate(150px, 150px) rotate(-45deg);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

.slideBottomRight45 {
  animation-name: slideFromBottomRight45;
}