.hero_container {
  width: 100%;
  height: 600px;
}
.hero_container svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#main_card {
  animation: 20s linear infinite mainCard;
}
#add_to_cart {
  animation: 20s linear infinite addCart;
}
#product_unselect {
  animation: 20s linear infinite addCartDone;
}

#cart {
  animation: 20s linear infinite cartSect;
}
#cart_button {
  animation: 20s linear infinite cartButton;
}
#cart_button_select {
  animation: 20s linear infinite cartButtonUnselect;
}
#loading_card {
  animation: 20s linear infinite loadingCard;
}
#proceed {
  animation: 20s linear infinite cartCardBtn;
}
#continue_payment {
  animation: 20s linear infinite adressBtn;
}
#address {
  animation: 20s linear infinite adressCard;
}
#method_card {
  animation: 20s linear infinite methodCard;
}
#method_unselect {
  animation: 20s linear infinite methodCardSlect;
}

#method_select {
  animation: 20s linear infinite methodBtn;
}
#loading_spiner {
  animation: 20s linear infinite loadingCardSpinner;
}
#final_step {
  animation: 20s linear infinite finalStep;
}
#qr_card {
  animation: 20s linear infinite qrCard;
}
#success_card {
  animation: 20s linear infinite successCard;
}
#scanner {
  animation: 20s linear infinite qrCardDownScanner;
  position: relative;
}
#addres_select_unselect {
  animation: 20s linear infinite addressButtonUnselect;
}
#addres_select {
  animation: 20s linear infinite addressButton;
}
#method_selected_button {
  animation: 20s linear infinite methodSelectButton;
}
#method_unselected_button {
  animation: 20s linear infinite methodUnSelectButton;
}

#loading_card,
#proceed,
#continue_payment,
#address,
#method_card,
#method_select,
#method_select_all,
#method_btn,
#loading_spiner {
  transform-origin: center;
  transform-box: fill-box;
}
.stop1 {
  animation: 20s linear infinite colorTransition;
}

.stop2 {
  animation: 20s linear infinite colorTransition2;
}

.stop3 {
  animation: 20s linear infinite colorTransition3;
}
@keyframes colorTransition {
  0% {
    stop-color: transparent;
  }
  3%,
  100% {
    stop-color: #00b9ee;
  }
}

@keyframes colorTransition2 {
  0% {
    stop-color: transparent;
  }
  3%,
  100% {
    stop-color: #03aee3;
  }
}

@keyframes colorTransition3 {
  0% {
    stop-color: transparent;
  }
  3%,
  100% {
    stop-color: #17598f;
  }
}

@keyframes scanningBackground {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}
@keyframes mainCard {
  0%,
  10% {
    opacity: 1;
  }
  12%,
  100% {
    opacity: 0.4;
  }
}

@keyframes addCart {
  0%,
  4% {
    opacity: 0;
  }

  6%,
  100% {
    opacity: 1;
  }
}

@keyframes addCartDone {
  0%,
  4% {
    opacity: 1;
  }
  6%,
  100% {
    opacity: 0;
  }
}

@keyframes cartSect {
  0%,
  100%,
  20%,
  8% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }

  10%,
  18% {
    opacity: 1;
    transform: scaleX(1.1) scaleY(1.1);
  }
}
@keyframes cartButtonUnselect {
  14% {
    opacity: 1;
  }

  15% {
    opacity: 0;
  }
}
@keyframes cartButton {
  15% {
    opacity: 0;
  }

  16% {
    opacity: 1;
  }
}
@keyframes addressButtonUnselect {
  24% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
}
@keyframes addressButton {
  25% {
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
}
@keyframes adressCard {
  0%,
  100%,
  18%,
  28.5%,
  30% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }

  20%,
  28% {
    opacity: 1;
    transform: scaleX(1.1) scaleY(1.1);
  }
}
@keyframes methodCard {
  0%,
  100%,
  28%,
  42% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }

  30%,
  38% {
    opacity: 1;
    transform: scaleX(1.1) scaleY(1.1);
  }
}
@keyframes methodCardSlect {
  0%,
  30% {
    opacity: 1;
  }

  32% {
    opacity: 0;
  }
}

@keyframes methodBtn {
  0%,
  30% {
    opacity: 0;
  }

  32% {
    opacity: 1;
  }
}
@keyframes methodUnSelectButton {
  0%,
  34% {
    opacity: 1;
  }

  36% {
    opacity: 0;
  }
}
@keyframes methodSelectButton {
  0%,
  35% {
    opacity: 0;
  }

  35% {
    opacity: 1;
  }
}
@keyframes loadingCard {
  0%,
  100%,
  74%,
  84% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }

  76%,
  82% {
    opacity: 1;
    transform: scaleX(1.1) scaleY(1.1);
  }
}
@keyframes loadingCardSpinner {
  0%,
  100%,
  74%,
  88% {
    opacity: 0;
  }

  76% {
    opacity: 1;
    transform: rotate(0);
  }
  80% {
    opacity: 1;
    transform: rotate(360deg);
  }
  84% {
    opacity: 1;
    transform: rotate(720deg);
  }
  86% {
    opacity: 1;
    transform: rotate(900deg);
  }
}
@keyframes finalStep {
  0%,
  100%,
  82%,
  98% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }

  84%,
  96% {
    opacity: 1;
    transform: scaleX(1.8) scaleY(2);
  }
}
@keyframes qrCard {
  0%,
  100%,
  42%,
  68% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }

  44%,
  66% {
    opacity: 1;
    transform: scaleX(1.1) scaleY(1.1);
  }
}
@keyframes successCard {
  0%,
  100%,
  66%,
  74% {
    opacity: 0;
    transform: scaleX(1) scaleY(1);
  }

  68%,
  72% {
    opacity: 1;
    transform: scaleX(1.1) scaleY(1.1);
  }
}
@keyframes qrCardDownScanner {
  0%,
  44%,
  100% {
    opacity: 0;
    transform: translateY(0);
  }

  46%,
  48%,
  96% {
    opacity: 1;
    transform: translateY(0);
  }

  54%,
  69% {
    opacity: 1;
    transform: translateY(40%);
  }

  60%,
  96% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes qrCardUpScanner {
  0%,
  52%,
  62%,
  96% {
    opacity: 0;
  }

  54% {
    opacity: 1;
    transform: translateY(0);
  }
  56%,
  59% {
    opacity: 1;
  }
  60%,
  98% {
    opacity: 0;
    transform: translateY(40%);
  }
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}