.dots_bg {
  display: grid;
  grid-template-columns: repeat(27, 1fr);
  gap: min(12px, 0.833vw);
  width: 100%;
  height: 100%;
}

.dots_bg[data-active-color="#5DECF4"] div.-active,
.dots_bg[data-active-color="#5DECF4"] div.-active {
  background: #5DECF4;
}

.dots_bg[data-active-color="#9B6EF5"] div.-active,
.dots_bg[data-active-color="#9b6ef5"] div.-active {
  background: #9B6EF5;
}

.dots_bg[data-active-color="#36C293"] div.-active,
.dots_bg[data-active-color="#36c293"] div.-active {
  background: #36C293;
}

.dots_bg[data-active-color="#1F8FFF"] div.-active,
.dots_bg[data-active-color="#1f8fff"] div.-active {
  background: #1F8FFF;
}

.dots_bg[data-active-color="#F0A651"] div.-active,
.dots_bg[data-active-color="#F0A651"] div.-active {
  background: #F0A651;
}

.dots_bg div {
  transition: background 0.4s;
}

.dots_bg>* {
  background: var(--shark-shark-450, #48494D);
  width: min(6px, 0.417vw);
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.dots_bg[data-active-color="#9B6EF5"] div.-disabled {
  opacity: 0 !important;
}

@media screen and (max-width: 1100px) {
  .dots_bg {
    display: grid;
    grid-template-columns: repeat(27, 1fr);
    gap: 8.3px;
  }

  .dots_bg>* {
    background: var(--shark-shark-450, #48494D);
    width: 4.15px;
    height: 4.15px;
    border-radius: 50%;
  }

  .dots_bg .dot {
    width: 4.15px;
    height: 4.15px;
  }
}


/* .product-preview__img */

.product-preview__img .dots_bg {
  grid-template-columns: repeat(29, 1fr);
  gap: min(12.9px, 0.896vw);
  width: 100%;
  height: 100%;
}

.product-preview__img .dots_bg>* {
  width: min(6.471px, 0.449vw);
  height: min(6.471px, 0.449vw);
}

@media screen and (max-width: 1100px) {
  .product-preview__img .dots_bg {
    display: grid;
    grid-template-columns: repeat(27, 1fr);
    gap: 8.3px;
  }

  .product-preview__img .dots_bg>* {
    width: 4.15px;
    height: 4.15px;
  }
}

/* -payment-gateway */

/* .hero.-payment-gateway .dots_bg {
  grid-template-columns: repeat(21, 1fr);
  gap: min(16px, 1.111vw);
}

.hero.-payment-gateway .dots_bg>* {
  width: min(8px, 0.556vw);
  height: min(8px, 0.556vw);
}

@media screen and (max-width: 1100px) {
  .hero.-payment-gateway .dots_bg {
    display: grid;
    gap: 11.2px;
  }

  .hero.-payment-gateway .dots_bg>* {
    width: 5.6px;
    height: 5.6px;
  }
} */


/* -integrations */

/* .hero.-integrations .dots_bg {
  grid-template-columns: repeat(15, 1fr);
  gap: min(16px, 1.111vw);
}

.hero.-integrations .dots_bg>* {
  width: min(8px, 0.556vw);
  height: min(8px, 0.556vw);
}

@media screen and (max-width: 1100px) {
  .hero.-integrations .dots_bg {
    display: grid;
    gap: 15.26px;
  }

  .hero.-integrations .dots_bg>* {
    width: 7.628px;
    height: 7.628px;
  }
} */


/* -banking */

/* .hero.-banking .dots_bg {
  grid-template-columns: repeat(19, 1fr);
  gap: min(16px, 1.111vw);
}

.hero.-banking .dots_bg>* {
  width: min(8px, 0.556vw);
  height: min(8px, 0.556vw);
}

@media screen and (max-width: 1100px) {
  .hero.-banking .dots_bg {
    display: grid;
    gap: 12px;
  }

  .hero.-banking .dots_bg>* {
    width: 6px;
    height: 6px;
  }
} */

/* about-us-main */

.about-us-main .dots_bg {
  grid-template-columns: repeat(76, 1fr);
  gap: min(12px, 0.833vw);
}

.about-us-main .dots_bg>* {
  width: min(6px, 0.417vw);
  height: min(6px, 0.417vw);
}

.about-us-main .dots_bg div {
  background: var(--Shark-Shark-100, #E4E7E9);
}

@media screen and (max-width: 1100px) {
  .about-us-main .dots_bg {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(19, 1fr);
  }

  .about-us-main .dots_bg>* {
    width: 6px;
    height: 6px;
  }
}

/* dots animations in header menu */

.header-dropdown__preview-col .dots_bg {
  grid-template-columns: repeat(21, 1fr);
  gap: min(8.5px, 0.590vw);
  width: 100%;
}

.header-dropdown__preview-col .dots_bg>* {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
}

.header-dropdown__preview-col .dots_bg div {
  background: var(--Shark-Shark-450, #48494D);
  ;
}



/* banking cards */

.-rectangle-dots ellipse {
  opacity: 0;
}


.-flower-dots {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.-flower-dots svg:not(:first-child) {
  position: absolute;
}

.-flower-dots .step {
  transition: opacity 0.4s, transform 0.4s;
}

.-flower-dots .step-6,
.-flower-dots .step-4,
.-flower-dots .step-2 {
  opacity: 0;
  transform: rotate(30deg);
}

.-flower-dots .step-1,
.-flower-dots .step-3,
.-flower-dots .step-5 {
  opacity: 0;
  transform: rotate(-30deg);
}

.-flower-dots .step-7 {
  /* opacity: 0; */
  transition: clip-path 0.7s;
  clip-path: inset(50% 50% 50% 50% round 50%);
}

.-flower-dots .step.-active {
  opacity: 1;
  transform: none;
}

.-flower-dots .step-7.-active {
  clip-path: inset(0 0 0 0 round 50%);
}