.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: 0.4;
    }

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

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

    10% {
        opacity: 0.60;
    }

    30% {
        opacity: 0.40;
    }

    40% {
        opacity: 0.20;
    }

    50% {
        opacity: 0.14;
    }

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

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

    30% {
        opacity: 1;
    }

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

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

    50% {
        opacity: 1;
    }

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

.scale {
    animation: scale 5s ease forwards;
}

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

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

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

@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%;
    }
}

.morph2 {
    animation: morph2 8s ease-in-out infinite;
}
@keyframes morph2 {
    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 morph3 {
    0%, 100% {
      border-radius: 53% 37% 54% 46%/55% 48% 52% 45%;
    }
    14% {
      border-radius: 40% 60% 54% 46%/49% 50% 40% 51%;
    }
    28% {
      border-radius: 54% 46% 38% 52%/49% 70% 30% 51%;
    }
    42% {
      border-radius: 51% 39% 55% 45%/41% 38% 52% 39%;
    }
    56% {
      border-radius: 51% 39% 57% 33%/50% 40% 50% 30%;
    }
    70% {
      border-radius: 50% 50% 34% 66%/56% 58% 32% 44%;
    }
    84% {
      border-radius: 46% 54% 50% 50%/35% 61% 39% 55%;
    }
  }
 
// @keyframes morph2 {
//     0%, 100% {
//       border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
//     }
//     14% {
//       border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
//     }
//     28% {
//       border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
//     }
//     42% {
//       border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
//     }
//     56% {
//       border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
//     }
//     70% {
//       border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
//     }
//     84% {
//       border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
//     }
//   }




.swing {
    animation: swing 10s infinite ease-in-out;
}

@keyframes swing {

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

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

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

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

@keyframes footerLine {
    0% {
        left: 40px;
    }

    50% {
        left: 0;
    }

    100% {
        left: 40px;
    }
}

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

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

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

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

.movingCar {
    animation: movingCar 25s linear infinite;
}

@keyframes movingCar {
    0% {
        transform: translateX(0) rotateY(0deg);
    }

    50% {
        transform: translateX(calc(100vw*-1 + 108%));
    }

    51% {
        transform: translateX(calc(100vw*-1 + 108%)) rotateY(180deg);
    }

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

.th-ani {
    transition: all 500ms ease
}

.th-ani:hover {
    transform: translate(0, -26px);
}

.img-alt {
    animation: img-alt 10s infinite;
}

@keyframes img-alt {
    0% {
        transform: rotate(-117deg) scale(0.7) translate(-134%, 25%);
    }

    75% {
        opacity: 1;
    }

    100% {
        transform: inherit;
        opacity: 0;
    }
}


.dance {
    animation: dance 2s alternate infinite;
}

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

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

.dance2 {
    animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(15px, -15px, 0);
    }

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

@-webkit-keyframes in-top {
    from {
        -webkit-transform: rotate3d(-1, 0, 0, 90deg);
        transform: rotate3d(-1, 0, 0, 90deg)
    }

    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg)
    }
}

@keyframes in-top {
    from {
        -webkit-transform: rotate3d(-1, 0, 0, 90deg);
        transform: rotate3d(-1, 0, 0, 90deg)
    }

    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg)
    }
}

@-webkit-keyframes in-right {
    from {
        -webkit-transform: rotate3d(0, -1, 0, 90deg);
        transform: rotate3d(0, -1, 0, 90deg)
    }

    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg)
    }
}

@keyframes in-right {
    from {
        -webkit-transform: rotate3d(0, -1, 0, 90deg);
        transform: rotate3d(0, -1, 0, 90deg)
    }

    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg)
    }
}

@-webkit-keyframes in-bottom {
    from {
        -webkit-transform: rotate3d(1, 0, 0, 90deg);
        transform: rotate3d(1, 0, 0, 90deg)
    }

    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg)
    }
}

@keyframes in-bottom {
    from {
        -webkit-transform: rotate3d(1, 0, 0, 90deg);
        transform: rotate3d(1, 0, 0, 90deg)
    }

    to {
        -webkit-transform: rotate3d(0, 0, 0, 0deg);
        transform: rotate3d(0, 0, 0, 0deg)
    }
}

.pulse {
    animation: pulse 6s linear infinite;
}

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

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes fillAni {
    0% {
        stroke-dashoffset: 2500;
        fill: transparent;
    }

    100% {
        stroke-dashoffset: 0;
        stroke-width: 1;
        fill: $white-color;
    }
}

.anim01 {
    animation: anim01 4s infinite linear;
}

@keyframes anim01 {

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

    25% {
        transform: rotate(90deg);
    }

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

.anim02 {
    animation: anim02 4s infinite linear;

}

@keyframes anim02 {
    0% {
        transform: translate(0px, 0px) rotate(0);
    }

    25% {
        transform: translate(-10px, -10px) rotate(5deg);
    }

    50% {
        transform: translate(-20px, 0px) rotate(0);
    }

    75% {
        transform: translate(-10px, -10px) rotate(-2deg);
    }

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

.anim03 {
    animation: anim03 4s infinite linear;

}

@keyframes anim03 {
    0% {
        transform: translate(0px, 0px) rotate(0);
    }

    25% {
        transform: translate(10px, 10px) rotate(-5deg);
    }

    50% {
        transform: translate(-5px, 15px) rotate(-10deg);
    }

    75% {
        transform: translate(-10px, 5px) rotate(-5deg);
    }

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

.anim04 {
    animation: anim04 2s infinite alternate;
}

@keyframes anim04 {
    0% {
        transform: scale(1.0);
    }

    50% {
        transform: scale(1.1);
    }

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

.anim06 {
    animation: anim06 4s infinite linear;
}

@keyframes anim06 {

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

    50% {
        transform: translate(30px, 0);
    }
}

.ding-dong {
    animation: ding-dong 25s linear infinite;

}

@keyframes ding-dong {
    0% {
        -webkit-transform: translateX(0) rotateY(0deg);
        transform: translateX(0) rotateY(0deg);
    }

    5% {
        -webkit-transform: rotateZ(5.3deg);
        transform: rotate(5.3deg);
    }

    10% {
        -webkit-transform: rotateZ(7.8deg);
        transform: rotate(7.8deg);
    }

    15% {
        -webkit-transform: rotateZ(7deg);
        transform: rotate(7deg);
    }

    20% {
        -webkit-transform: rotateZ(3.9deg);
        transform: rotate(3.9deg);
    }

    20% {
        -webkit-transform: rotateZ(3.9deg);
        transform: rotate(3.9deg);
    }

    25% {
        -webkit-transform: rotateZ(0);
        transform: rotate(0);
    }

    30% {
        -webkit-transform: rotateZ(-3.2deg);
        transform: rotate(-3.2deg);
    }

    35% {
        -webkit-transform: rotateZ(-4.7deg);
        transform: rotate(-4.7deg);
    }

    40% {
        transform: rotate(-4.3deg);
    }

    45% {
        -webkit-transform: rotateZ(-2.4deg);
        transform: rotate(-2.4deg);
    }

    50% {
        -webkit-transform: rotateZ(0);
        transform: rotate(0);
    }

    55% {
        -webkit-transform: rotateZ(2deg);
        transform: rotate(2deg);
    }

    60% {
        -webkit-transform: rotateZ(2.9deg);
        transform: rotate(2.9deg);
    }

    65% {
        -webkit-transform: rotateZ(2.6deg);
        transform: rotate(2.6deg);
    }

    70% {
        -webkit-transform: rotateZ(1.4deg);
        transform: rotate(1.4deg);
    }

    75% {
        -webkit-transform: rotateZ(0);
        transform: rotate(0);
    }

    80% {
        -webkit-transform: rotateZ(-1.2deg);
        transform: rotate(-1.2deg);
    }

    85% {
        -webkit-transform: rotateZ(-1.7deg);
        transform: rotate(-1.7deg);
    }

    90% {
        -webkit-transform: rotateZ(-1.6deg);
        transform: rotate(-1.6deg);
    }

    95% {
        -webkit-transform: rotateZ(-.9deg);
        transform: rotate(-.9deg);
    }

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

.watermark-animate {
    -webkit-animation: watermark-animate 8s infinite;
    animation: watermark-animate 8s infinite;
    animation-direction: alternate-reverse;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes watermark-animate {
    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}

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

    100% {
        transform: translateX(calc(-100% - var(--gap)));
    }
}


@keyframes fadeLeftRight {

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

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

@keyframes headerShapeAnim {
    0% {
        background-position: top left;
    }

    100% {
        background-position: top left 2000px;
    }
}

@keyframes lineMove {
    0% {
        left: 0px;
    }

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

    100% {
        left: 0px;
    }
}

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

    100% {
        transform: translateX(calc(-100% - var(--gap)));
    }
}


.jump {
    animation: jumpAni 7s 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 10s linear infinite;
}

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

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

.bg-color-ani,
.color-animate {
    animation: bgColor 6s linear infinite;
}

@keyframes bgColor {
    0% {
        background-color: #F2BA4C;
    }

    25% {
        background-color: #81F24C;
    }

    50% {
        background-color: #41F27D;
    }

    75% {
        background-color: #0500FF;
    }

    100% {
        background-color: #F2BA4C;
    }
}

.zoom {
    animation: zoom 25s linear infinite;
}

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

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

@keyframes zoom1 {
    0% {
        scale: 0.2;
    }

    50% {
        scale: 1;
    }

    100% {
        scale: 0.2;
    }
}

/* Mooving Animation */

@-webkit-keyframes moving {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }

    20% {
        -webkit-transform: translate(0px, -30px);
        transform: translate(0px, -30px);
    }

    50% {
        -webkit-transform: translate(-100px, -30px);
        transform: translate(-100px, -30px);
    }

    70% {
        -webkit-transform: translate(-100px, 0px);
        transform: translate(-100px, 0px);
    }

    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

@keyframes moving {
    0% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }

    20% {
        -webkit-transform: translate(0px, -30px);
        transform: translate(0px, -30px);
    }

    50% {
        -webkit-transform: translate(-100px, -30px);
        transform: translate(-100px, -30px);
    }

    70% {
        -webkit-transform: translate(-100px, 0px);
        transform: translate(-100px, 0px);
    }

    100% {
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}

.cloudAni {
    animation: cloudAni 15s linear infinite
}

@keyframes cloudAni {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    50% {
        -webkit-transform: translateY(-300px);
        transform: translateY(-300px);
        opacity: 0
    }

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


@keyframes fadeLeftRight {

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

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

@keyframes slideTop {
    49% {
        transform: translateY(100%);
    }

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

    51% {
        opacity: 1;
    }
}

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

// .svg-animate {
//     animation: svgAnimate 80s linear infinite both;
// }

// @keyframes svgAnimate {
//     0% {
//         transform: rotateZ(0);
//     }
//     50% {
//         transform: rotateZ(180deg);
//     }
//     100% {
//         transform: rotateZ(360deg);
//     }
// }

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

.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);
}

// .slidebottomright {
//     opacity: 1;
// }
// .swipe-fade {
//     .swipe-slide-prev {
//         .slidebottomright {
//             visibility: hidden;
//         }
//     }
// }
.swiper-slide-active {
    .fadein {
        --animation-name: fadein;
    }

    .scalein {
        --animation-name: scalein;
    }

    .slidetopleft {
        --animation-name: slidetopleft;
    }

    .slidebottomright {
        --animation-name: slidebottomright;
    }

    .slideinleft {
        --animation-name: slideinleft;
    }

    .slideinright {
        --animation-name: slideinright;
    }

    .slideinup {
        --animation-name: slideinup;
    }

    .slideindown {
        --animation-name: slideindown;
    }

    .rollinleft {
        --animation-name: rollinleft;
    }

    .rollinright {
        --animation-name: rollinright;
    }
}

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

    100% {
        opacity: 1;
    }
}

@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);
    }
}


@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }

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

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px);
    }

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

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}


@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

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

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}


@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }

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

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.zoomIn {
    animation-name: zoomIn;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }

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

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px);
    }

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

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}


@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);
    }

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

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}


@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }

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

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}