/* Start Pullets */
.pullets {
  position: fixed;
  width: 14px;
  height: 100px;
  top: 50%;
  transform: translateX(-50%);
  left: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 500;
}

.pullets a {
  width: 8px;
  height: 8px;
  background: #d1d1d1;
  margin-top: 10px;
  border-radius: 50%;
  transition: 0.2s;
}

.pullets a.selected {
  background: var(--purple);
  width: 14px;
  height: 14px;
}

/* End Pullets */

/* Start Background */
.bg {
  position: fixed;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  user-select: none;
  background-attachment: fixed;
}

.bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.logo_bg {
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.logo_bg,
.logo_bg .layer {
  position: absolute;
}

.logo_bg .p1 {
  width: 300px;
  left: 10%;
  top: 20%;
  -webkit-animation: p1 2s linear infinite;
  animation: p1 2s linear infinite;
}

@keyframes p1 {
  0% {
    left: 10%;
    top: 20%;
  }

  25% {
    left: 11%;
    top: 21%;
  }

  50% {
    left: 12%;
    top: 22%;
  }

  75% {
    left: 11%;
    top: 21%;
  }

  100% {
    left: 10%;
    top: 20%;
  }
}

.logo_bg .p2 {
  width: 150px;
  right: 15%;
  top: 15%;
  animation: p2 2s linear infinite;
  -webkit-animation: p2 2s linear infinite;
}
@keyframes p2 {
  0% {
    right: 15%;
    top: 15%;
  }

  25% {
    right: 16%;
    top: 16%;
  }

  50% {
    right: 17%;
    top: 17%;
  }

  75% {
    right: 16%;
    top: 16%;
  }

  100% {
    right: 15%;
    top: 15%;
  }
}

.logo_bg .p3 {
  width: 230px;
  right: 36%;
  bottom: 10%;
  animation: p3 2s linear infinite;
  -webkit-animation: p3 2s linear infinite;
}

@keyframes p3 {
  0% {
    right: 36%;
    bottom: 10%;
  }

  25% {
    right: 37%;
    bottom: 11%;
  }

  50% {
    right: 38%;
    bottom: 12%;
  }

  75% {
    right: 37%;
    bottom: 11%;
  }

  100% {
    right: 36%;
    bottom: 10%;
  }
}
/* End Background */

/* Start Home */
.home {
  padding: 0 20px;
  padding-top: 80px;
}

.home .image {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 50%;
}

.home .texts,
.pos .texts {
  padding-right: 50px;
}

.texts {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  flex-basis: 50%;
}

.title {
  color: var(--purple);
}

.description {
  color: var(--gray);
  max-width: 371px;
}

.description span {
  font-weight: 800;
}

.checkout .image,
.merchantControlPanel .image,
.merchantControl .image,
.sdk .image {
  width: 60%;
}

/* End Home */

/* Start Online payment */
.online .image img {
  width: 90%;
}
/* End Online payment */

/* Start Responsive */
@media (min-width: 1600px) {
  .title {
    font-size: 40px;
  }
  .description {
    font-size: 20px;
    max-width: 500px;
    line-height: 35px;
  }
  .home .image img {
    transform: scale(1);
  }
  .image img {
    width: 100%;
    transform: scale(0.9);
  }
  .online .image img {
    width: 100%;
  }
  .online .image {
    padding-right: 100px;
  }
  .logo_bg .p1 {
    width: 350px;
  }
  .logo_bg .p2 {
    width: 300px;
  }
  .logo_bg .p3 {
    width: 250px;
  }
  .vpos .image {
    padding-left: 200px;
  }
  .vpos img {
    transform: scale(1.5);
  }
  .pullets {
    width: auto;
    height: auto;
  }
  .pullets a {
    width: 10px;
    height: 10px;
  }
  .pullets a.selected {
    width: 15px;
    height: 15px;
  }
}

@media (max-width: 1110px) {
  .online .image,
  .merchantControlPanel .image,
  .merchantControl .image,
  .sdk .image {
    width: 100%;
  }

  .online .image img,
  .merchantControlPanel .image img,
  .merchantControl .image img,
  .sdk .image img {
    transform: scale(0.8);
  }
  .pullets {
    left: 20px;
  }
  .merchantControlPanel.flex_space,
  .home.flex_space,
  .merchantControl.flex_space {
    flex-direction: column;
  }
  .home .texts,
  .pos .texts {
    padding-left: 0;
    padding-right: 0;
  }
  .texts {
    text-align: center;
    display: inline-block;
  }
  .title {
    width: 100%;
    font-size: 25px;
    text-align: center;
  }
  .image {
    margin-bottom: 30px;
  }
  .online .image,
  .pos .image,
  .vpos .image {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .layer.p1 {
    width: 150px;
    top: 33%;
  }
  .layer.p2 {
    width: 100px;
  }
  .layer.p3 {
    width: 150px;
  }
  @keyframes p1 {
    0% {
      top: 33%;
    }

    25% {
      top: 34%;
    }
    50% {
      top: 35%;
    }
    75% {
      top: 34%;
    }
    100% {
      top: 33%;
    }
  }
}
/* End Responsive */