/*--------------------------------------------------------------
01. THEME CSS
--------------------------------------------------------------*/
/*----------------------------------------
1.1 Animation
----------------------------------------*/
@keyframes xcfadeUp {
  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);
  }
}
.xcfadeUp {
  -webkit-animation-name: xcfadeUp;
  animation-name: xcfadeUp;
}

@-webkit-keyframes xcfadeLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes xcfadeLeft {
  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);
  }
}
.xcfadeLeft {
  -webkit-animation-name: xcfadeLeft;
  animation-name: xcfadeLeft;
}

@-webkit-keyframes xcfadeRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes xcfadeRight {
  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);
  }
}
.xcfadeRight {
  -webkit-animation-name: xcfadeRight;
  animation-name: xcfadeRight;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@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;
}

@-webkit-keyframes xcfadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xcfadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.xcfadeIn {
  -webkit-animation-name: xcfadeIn;
}

@keyframes moveLight {
  0% {
    background: linear-gradient(
      0deg,
      var(--swiftcart-secondary) 45.13%,
      rgba(45, 255, 168, 0) 99.92%,
      rgba(0, 82, 202, 0) 100%
    );
    opacity: 0.2;
  }
  50% {
    background: linear-gradient(
      360deg,
      var(--swiftcart-secondary) 45.13%,
      rgba(45, 255, 168, 0) 99.92%,
      rgba(0, 82, 202, 0) 100%
    );
    opacity: 0.4;
  }
  100% {
    background: linear-gradient(
      0deg,
      var(--swiftcart-secondary) 45.13%,
      rgba(45, 255, 168, 0) 99.92%,
      rgba(0, 82, 202, 0) 100%
    );
    opacity: 0.2;
  }
}
@keyframes xcswing {
  0% {
    transform: rotate(6deg);
  }
  100% {
    transform: rotate(-6deg);
  }
}
@keyframes xcRound {
  0% {
    transform: rotate(0);
  }
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0);
  }
}
@-webkit-keyframes translateor1 {
  0% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(20px);
  }
}
@keyframes translateor1 {
  0% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(20px);
  }
}
@-webkit-keyframes translateor2 {
  0% {
    transform: translateX(20px);
  }
  50% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(20px);
  }
}
@keyframes translateor2 {
  0% {
    transform: translateX(20px);
  }
  50% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(20px);
  }
}
@-webkit-keyframes titleFill {
  0% {
    width: 0;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes titleFill {
  0% {
    width: 0;
  }
  80% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes icon-bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
@keyframes borderShape {
  0% {
    border-radius: 48% 52% 54% 46%/30% 32% 68% 70%;
  }
  33% {
    border-radius: 32% 68% 23% 77%/58% 29% 71% 42%;
  }
  70% {
    border-radius: 39% 61% 33% 67%/69% 51% 49% 31%;
  }
  100% {
    border-radius: 48% 52% 54% 46%/30% 32% 68% 70%;
  }
}
@keyframes pulsing {
  to {
    box-shadow: 0 0 0 4rem rgba(0, 0, 0, 0);
  }
}
@keyframes scaleUpDown {
  from {
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes xcleftToRight {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
    transform: translateX(-100%);
  }
}
@keyframes xcRightToLeft {
  0% {
    left: 0;
  }
  50% {
    left: 100%;
    transform: translateX(-100%);
  }
}
@keyframes xcXoomIn {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
/* 04. ========= btn-arrow-animation ========== */
@keyframes xcArrowAnimation {
  49% {
    transform: translateX(30%);
  }
  50% {
    opacity: 0;
    transform: translateX(-30%);
  }
  51% {
    opacity: 1;
  }
}