/* Ellipses component styles for Finby Theme */
.blur-container-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 150px;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.blur-container-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-width: var(--max-width);
  height: 300px;
  pointer-events: none;
  z-index: -1;
  left: var(--half);
  transform: translateX(-50%);
}

.blur {
  position: absolute;
  mix-blend-mode: screen;
}
.section-blur-bottom::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  background: url(../../images/cards-payments-section-small.png) no-repeat
    center bottom;
  background-size: contain;
  z-index: 0;
  opacity: 1;
}
@media (min-width: 767px) {
  .section-blur-top-108::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 40%;
    background: url(../../images/cards-payments-section-big.svg) no-repeat
      center center;
    background-size: cover;
    transform: translateX(-50%) rotate(180deg);
    z-index: -1;
    opacity: 1;
  }
}
.section-blur-bottom-108::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 65%;
  background: url(../../images/cards-payments-section-big.svg) no-repeat center
    center;
  background-size: cover;
  transform: translateX(-50%);
  z-index: 0;
  opacity: 1;
  mask-image: linear-gradient(
    to top,
    transparent 0%,
    black 0%,
    black 0%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    transparent 0%,
    black 0%,
    black 0%,
    transparent 100%
  );
}
.blur-bottom-1 {
  width: 7.1865rem;
  height: 7.1865rem;
  border-radius: 239px;
  background: var(--Primary-blue-500);
  filter: var(--blur-ease);
  opacity: var(--opacity40);
  right: 15%;
  bottom: -27%;
  animation: float-bottom-1 4s ease-in-out infinite;
}

.blur-bottom-2 {
  width: 14.42rem;
  height: 14.42rem;
  border-radius: 556px;
  opacity: var(--opacity40);
  background: var(--Primary-blue-500);
  filter: var(--blur-ease);
  right: 5%;
  bottom: -55%;
  animation: float-bottom-2 5s ease-in-out infinite;
}

.blur-bottom-3 {
  width: 12.7rem;
  height: 12.7rem;
  border-radius: 12.7rem;
  opacity: var(--opacity40);
  background: var(--Primary-blue-500);
  filter: var(--blur-ease);
  left: -10px;
  bottom: -45%;
  animation: float-bottom-3 4s ease-in-out infinite;
}

.blur-bottom-4 {
  width: 8.56656rem;
  height: 8.56656rem;
  border-radius: 8.56656rem;
  opacity: 0.32;
  background: var(--Secondary-violet-500);
  filter: var(--blur-ease);
  left: 29%;
  bottom: -40%;
  animation: float-bottom-4 8s ease-in-out infinite;
}

.blur-bottom-5 {
  width: 161px;
  height: 161px;
  border-radius: 161px;
  opacity: var(--opacity40);
  background: var(--Secondary-violet-500);
  filter: var(--blur-ease);
  right: 0;
  bottom: -50%;
  animation: float-bottom-5 5s ease-in-out infinite;
}

.blur-top-1 {
  top: -6.5rem;
  left: 1rem;
  width: 8.2rem;
  height: 8.2rem;
  border-radius: 8.2rem;
  opacity: var(--opacity60);
  background: var(--Primary-blue-500);
  filter: blur(19px);
  animation: float-top-1 7s ease-in-out infinite;
}

.blur-top-2 {
  top: -14.5rem;
  left: -2.5rem;
  width: 17.7rem;
  height: 17.7rem;
  border-radius: 26.7rem;
  opacity: var(--opacity60);
  background: var(--Primary-blue-500);
  filter: blur(16.5px);
  animation: float-top-2 4s ease-in-out infinite;
}

.blur-top-3 {
  top: -7.5rem;
  left: -3rem;
  width: 9.9199rem;
  height: 9.9199rem;
  border-radius: 15.9199rem;
  opacity: 0.22;
  background: var(--Secondary-violet-500);
  filter: blur(15.5px);
  animation: float-top-3 12s ease-in-out infinite;
}

.blur-top-4 {
  top: -7.5rem;
  left: 7.5rem;
  width: 9.77172rem;
  height: 9.77172rem;
  border-radius: 9.77172rem;
  opacity: 0.12;
  background: var(--Secondary-violet-500);
  filter: blur(30px);
  z-index: -1;
  animation: float-top-4 5s ease-in-out infinite;
}

.blur-top-5 {
  top: -10rem;
  left: 11.5rem;
  width: 10.77172rem;
  height: 10.77172rem;
  border-radius: 7.77172rem;
  opacity: 0.5;
  background: var(--Secondary-violet-500);
  filter: blur(20px);
  animation: float-top-5 8s ease-in-out infinite;
}

.blur-top-6 {
  top: -8rem;
  right: 7.5rem;
  width: 9.77172rem;
  height: 9.77172rem;
  border-radius: 9.77172rem;
  opacity: var(--opacity40);
  background: var(--Primary-blue-500);
  filter: blur(30px);
  animation: float-top-6 6s ease-in-out infinite;
}

.blur-top-7 {
  top: -6rem;
  right: 6rem;
  width: 7.3939rem;
  height: 7.3939rem;
  border-radius: 13.8939rem;
  opacity: 0.1;
  background: var(--Basic-White);
  filter: blur(20px);
  animation: float-top-7 10s ease-in-out infinite;
}

.blur-top-8 {
  top: -12rem;
  right: -5rem;
  width: 12.5rem;
  height: 17rem;
  border-radius: 36.45631rem;
  opacity: var(--opacity40);
  background: var(--Primary-blue-500);
  filter: var(--blur-ease);
  animation: float-top-8 3s ease-in-out infinite;
}

.blur-top-9 {
  top: -5.5rem;
  right: -3rem;
  width: 10.21175rem;
  height: 10.21175rem;
  border-radius: 21.71175rem;
  opacity: 0.12;
  background: var(--Secondary-violet-500);
  filter: var(--blur-ease);
  animation: float-top-9 28s ease-in-out infinite;
}

@media (min-width: 767px) {
  .blur-container-bottom {
    height: 650px;
  }

  .blur-container-top {
    height: 600px;
  }

  .blur-bottom-1 {
    width: 23.5rem;
    height: 23.5rem;
    border-radius: 23.5rem;
    filter: var(--blur-hard);
    background: rgba(255, 255, 255, 0.16);
    left: 5%;
    bottom: -45%;
    animation: float-gentle-1 5s ease-in-out infinite;
  }

  .blur-bottom-2 {
    width: 54.5rem;
    height: 54.5rem;
    border-radius: 1113px;
    filter: var(--blur-medium);
    left: 3%;
    bottom: -130%;
    animation: float-gentle-2 6s ease-in-out infinite;
    animation-delay: 0.5s;
  }

  .blur-bottom-3 {
    width: 29rem;
    height: 29rem;
    border-radius: 29rem;
    filter: var(--blur-medium);
    background: var(--Secondary-violet-500);
    opacity: 0.32;
    left: -15%;
    bottom: -55%;
    animation: float-gentle-3 4.5s ease-in-out infinite;
    animation-delay: 1s;
  }

  .blur-bottom-4 {
    width: 22.5rem;
    height: 22.5rem;
    border-radius: 22.5rem;
    filter: blur(20px);
    background: var(--Secondary-violet-500);
    bottom: -49%;
    animation: float-gentle-4 5.5s ease-in-out infinite;
    animation-delay: 0.3s;
  }

  .blur-bottom-5 {
    width: 15.8rem;
    height: 15.8rem;
    border-radius: 15.8rem;
    filter: var(--blur-ease);
    background: var(--Primary-blue-500);
    right: 38%;
    bottom: -35%;
    animation: float-gentle-5 6s ease-in-out infinite;
    animation-delay: 0.8s;
  }

  .blur-bottom-6 {
    width: 23.4rem;
    height: 23.45rem;
    border-radius: 23.4rem;
    opacity: 0.16;
    background: var(--Basic-White, #fff);
    filter: var(--blur-ease);
    bottom: -56%;
    left: 20%;
    animation: float-gentle-6 5s ease-in-out infinite;
    animation-delay: 1.2s;
  }

  .blur-bottom-7 {
    width: 45.5rem;
    height: 45.5rem;
    border-radius: 45.5rem;
    opacity: var(--opacity40);
    background: var(--Primary-blue-500);
    filter: var(--blur-ease);
    bottom: -100%;
    right: 5%;
    animation: float-gentle-7 6.5s ease-in-out infinite;
    animation-delay: 0.4s;
  }

  .blur-bottom-8 {
    width: 19.5rem;
    height: 19.5rem;
    border-radius: 19.5rem;
    opacity: 0.32;
    background: var(--Primary-blue-500);
    filter: var(--blur-ease);
    right: 0;
    bottom: -35%;
    animation: float-gentle-8 5s ease-in-out infinite;
    animation-delay: 0.9s;
  }

  .blur-bottom-9 {
    width: 22.5rem;
    height: 22.5rem;
    border-radius: 22.5rem;
    opacity: 0.32;
    background: var(--Secondary-violet-500);
    filter: var(--blur-medium);
    right: 15%;
    bottom: -45%;
    animation: float-gentle-9 6s ease-in-out infinite;
    animation-delay: 1.1s;
  }

  .blur-bottom-10 {
    width: 15.8rem;
    height: 15.8rem;
    background: var(--Primary-blue-500);
    opacity: var(--opacity40);
    filter: var(--blur-ease);
    bottom: -30%;
    right: 30%;
    animation: float-gentle-10 4.8s ease-in-out infinite;
    animation-delay: 0.6s;
  }

  .blur-bottom-11 {
    width: 15.8rem;
    height: 15.8rem;
    border-radius: 15.8rem;
    background: var(--Primary-blue-500);
    opacity: var(--opacity40);
    filter: var(--blur-ease);
    left: 5%;
    top: 90%;
    animation: float-gentle-11 5.2s ease-in-out infinite;
    animation-delay: 0.2s;
  }

  .blur-bottom-12 {
    width: 23.4rem;
    height: 23.4rem;
    border-radius: 23.4rem;
    background: var(--Basic-White);
    opacity: var(--opacity40);
    filter: var(--blur-ease);
    right: 5%;
    top: 97%;
    animation: float-gentle-12 5.5s ease-in-out infinite;
    animation-delay: 0.7s;
  }

  .blur-top-1 {
    top: -13rem;
    left: 2rem;
    width: 16.39513rem;
    height: 16.39513rem;
    border-radius: 16.39513rem;
    filter: var(--blur-ease);
  }

  .blur-top-2 {
    top: -29rem;
    left: -5rem;
    width: 35.46238rem;
    height: 35.46238rem;
    border-radius: 53.46238rem;
    filter: var(--blur-ease);
  }

  .blur-top-3 {
    top: -15rem;
    left: -6rem;
    width: 19.83981rem;
    height: 19.83981rem;
    border-radius: 31.83981rem;
    filter: var(--blur-ease);
  }

  .blur-top-4 {
    top: -15rem;
    left: 15rem;
    width: 19.5rem;
    height: 19.5rem;
    border-radius: 19.5rem;
    filter: var(--blur-medium);
  }

  .blur-top-5 {
    top: -20rem;
    left: 23rem;
    width: 21.5rem;
    height: 21.5rem;
    border-radius: 15.5rem;
    filter: var(--blur-ease);
  }

  .blur-top-6 {
    top: -16rem;
    right: 15rem;
    width: 19.5rem;
    height: 19.5rem;
    border-radius: 19.5rem;
    filter: var(--blur-medium);
  }

  .blur-top-7 {
    top: -12rem;
    right: 12rem;
    width: 14.7rem;
    height: 14.7rem;
    border-radius: 27.7rem;
    filter: var(--blur-ease);
  }

  .blur-top-8 {
    top: -24rem;
    right: -10rem;
    width: 25rem;
    height: 34rem;
    border-radius: 73rem;
    filter: var(--blur-medium);
  }

  .blur-top-9 {
    top: -11rem;
    right: -6rem;
    width: 20.5rem;
    height: 20.5rem;
    border-radius: 43.5rem;
    filter: var(--blur-medium);
  }
}

/* Blur effects card-payments */
.blur-effects {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.blur-1 {
  width: 32rem;
  height: 32rem;
  border-radius: 32rem;
  opacity: var(--opacity40);
  background: var(--Secondary-violet-500);
  filter: var(--blur-hard);
  top: 0;
  left: 25%;
  transform: translate(-50%, -34%);
}

.blur-2 {
  width: 11.4rem;
  height: 11.4em;
  border-radius: 11.4rem;
  opacity: var(--opacity40);
  background: var(--Primary-blue-500);
  filter: var(--blur-ease);
  top: var(--half);
  left: var(--half);
  transform: translate(-50%, -50%);
}

.blur-3 {
  width: 53.5rem;
  height: 53.5rem;
  border-radius: 53.5rem;
  opacity: var(--opacity40);
  background: var(--Primary-blue-500);
  filter: var(--blur-medium);
  bottom: -38rem;
  left: var(--half);
  transform: translate(-50%);
}

.blur-offer-wrapper {
  position: absolute;
  display: block;
  margin: auto;
  max-width: var(--max-width);
  align-items: center;
  width: 100%;
  height: 100%;
  top: var(--half);
  left: var(--half);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.blur-offer-more-1 {
  position: absolute;
  top: 0;
  left: var(--half);
  transform: translate(-50%);
  width: 32.5rem;
  height: 32.5rem;
  border-radius: 53.5rem;
  opacity: var(--opacity40);
  background: var(--Primary-blue-500);
  filter: var(--blur-medium);
  animation: pulse-opacity 5s ease-in-out infinite;
}

.blur-offer-more-2 {
  position: absolute;
  bottom: -2rem;
  right: 15rem;
  width: 8.4rem;
  height: 8.4rem;
  border-radius: 16.5rem;
  opacity: var(--opacity40);
  background: var(--Primary-blue-500);
  filter: var(--blur-ease);
  animation: slide-down 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

.blur-offer-more-3 {
  position: absolute;
  bottom: -5rem;
  left: 7rem;
  width: 16rem;
  height: 16rem;
  border-radius: 16rem;
  opacity: 0.32;
  background: var(--Secondary-violet-500);
  filter: var(--blur-medium);
  animation: slide-down 4.5s ease-in-out infinite;
  animation-delay: 1s;
}

.blur-offer-more-4 {
  position: absolute;
  top: -2rem;
  right: 15rem;
  width: 16.5rem;
  height: 16.5rem;
  border-radius: 16.5rem;
  opacity: var(--opacity40);
  background: var(--Primary-blue-500);
  filter: var(--blur-ease);
  animation: slide-up 4s ease-in-out infinite;
  animation-delay: 0.7s;
}

.blur-offer-more-5 {
  position: absolute;
  top: -2rem;
  left: 9rem;
  width: 16rem;
  height: 16rem;
  border-radius: 16rem;
  opacity: 0.32;
  background: var(--Secondary-violet-500);
  filter: var(--blur-medium);
  animation: slide-up 4.5s ease-in-out infinite;
  animation-delay: 1.2s;
}

@media (min-width: 767px) {
  .blur-offer-more-1 {
    width: 53.5rem;
    height: 53.5rem;
    border-radius: 53.5rem;
    left: var(--half);
    transform: translate(-50%);
    top: -80px;
  }

  .blur-offer-more-2 {
    width: 16.5rem;
    height: 16.5rem;
    border-radius: 16.5rem;
  }

  .blur-offer-more-3 {
    width: 32rem;
    height: 32rem;
    border-radius: 32rem;
  }

  .blur-offer-more-4 {
    width: 16.5rem;
    height: 16.5rem;
    border-radius: 16.5rem;
  }

  .blur-offer-more-5 {
    width: 32rem;
    height: 32rem;
    border-radius: 32rem;
  }
}
@keyframes float-gentle-1 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-1rem) translateX(0.5rem);
  }
}

@keyframes float-gentle-2 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-6.8rem) translateX(3.7rem);
  }
}

@keyframes float-gentle-3 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: var(--opacity40);
  }
  50% {
    transform: translateY(-2.2rem) translateX(2.7rem);
    opacity: var(--opacity60);
  }
}

@keyframes float-gentle-4 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-2rem) translateX(-0.5rem);
  }
}

@keyframes float-gentle-5 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-0.9rem) translateX(0.4rem);
  }
}

@keyframes float-gentle-6 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-1.1rem) translateX(-0.6rem);
  }
}

@keyframes float-gentle-7 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: var(--opacity40);
  }
  50% {
    transform: translateY(-3.7rem) translateX(0.3rem);
    opacity: var(--opacity60);
  }
}

@keyframes float-gentle-8 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-1rem) translateX(-0.4rem);
  }
}

@keyframes float-gentle-9 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-0.8rem) translateX(0.5rem);
  }
}

@keyframes float-gentle-10 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-1.2rem) translateX(-0.2rem);
  }
}

@keyframes float-gentle-11 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-0.9rem) translateX(0.6rem);
  }
}

@keyframes float-gentle-12 {
  0%,
  100% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-1rem) translateX(-0.3rem);
  }
}

@keyframes float-bottom-1 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-40px) translateX(40px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-bottom-2 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-25px) translateX(-100px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-bottom-3 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-45px) translateX(20px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-bottom-4 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20px) translateX(10px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-bottom-5 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-30px) translateX(-30px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-top-1 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(15px) translateX(-10px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-top-2 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20px) translateX(35px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-top-3 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(10px) translateX(-20px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-top-4 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-15px) translateX(10px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-top-5 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(50px) translateX(-15px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-top-6 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-10px) translateX(20px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-top-7 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(15px) translateX(-10px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-top-8 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(-20px) translateX(-60px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

@keyframes float-top-9 {
  0% {
    transform: translateY(0) translateX(0);
  }
  50% {
    transform: translateY(10px) translateX(-20px);
  }
  100% {
    transform: translateY(0) translateX(0);
  }
}

/* Blur effect offer more */
@keyframes pulse-opacity {
  0%,
  100% {
    opacity: var(--opacity40);
  }
  50% {
    opacity: var(--opacity80);
  }
}

@keyframes slide-down {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4rem);
  }
}

@keyframes slide-up {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5rem);
  }
}