@font-face {
  font-family: 'Neue Plak';
  src: url('fonts/neue-plak/neue_plak_extended_regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Neue Plak';
  src: url('fonts/neue-plak/neue_plak_extended_bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}


html {
  scroll-behavior: smooth;
}

/* Custom font for the entire page */
.font-neue-plak {
  font-family: 'Neue Plak', sans-serif;
}

/* Full-section background image with cover and no repeat */
.bg-cover-custom {
  background-image: url("image/header-cover.png");
  background-size: 100% 100%;
  background-position: top;
  background-repeat: no-repeat;
}

.bg-product-custom {
  /*background-image: url("image/our-products.jpg");*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bg-internet-custom {
  background-image: url("image/internet.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@keyframes grow-shrink {
  0% {
    transform: scale(1.5);
    opacity: 1;
  }

  50% {
    transform: scale(1.7);

    opacity: 1;
  }

  100% {
    transform: scale(1.5);

    opacity: 1;
  }
}

.ping-grow-shrink {
  animation: grow-shrink 5s ease-in-out infinite;
}

.small-img {
  width: 5rem;
  height: 5rem;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.large-img {
  width: 6rem;
  height: 6rem;
  transform: scale(1.2);
  z-index: 10;
  transition: transform 1s ease;
}
.custom-button {
  width: max-content;
  background-color: blue;
  color: white;
  padding-left: 2rem; /* 8 * 0.25rem (1rem = 16px) */
  padding-right: 2rem;
  padding-top: 0.5rem; /* 2 * 0.25rem */
  padding-bottom: 0.65rem; /* 3 * 0.25rem */
  border-radius: 8px; /* 12px */
  border-left:  1px solid rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 2px solid rgba(227, 223, 255, 0.5);
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
}
.custom-button.rgb {
  background: linear-gradient(to top, #624DE3, #7C6CE4);
}

button {
  box-sizing: border-box;
}




.selectedCard {
  background: #6860FE1A;
  position: relative;
}
.selectedCard::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  width: 3.5px;
  background: #3983FF;
  height: 85%;
  transition: 0.3s;
  border-radius: 5px;
  z-index: 3;
}
.selectedCard::after {
  content: '';
  position: absolute;
  left: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  background: #000000;
  height: 25%;
  transition: 0.3s;
  border-radius: 5px;
  z-index: 2;
}

@media screen and (max-width: 640px) {
  .small-img {
    width: 40px;
    height: 40px;
  }

  .large-img {
    width: 50px;
    height: 50px;
  }


  @keyframes grow-shrink {
    0% {
      transform: scale(1.5);
      opacity: 1;
    }

    50% {
      transform: scale(3);
      opacity: 1;
    }

    100% {
      transform: scale(1.5);
      opacity: 1;
    }
  }
}

@media screen and (max-width: 375px) {
  .-mt-esm-32vh{
    margin-top: -32vh !important;
  }
}

/* Media query for screens 320px and larger */
@media (max-width: 320px) {

}

/* Media query for screens 375px and larger */
@media (min-width: 340px) {
  
}

/* Media query for screens 425px and larger */
@media (min-width: 425px) {

}

/* Example for larger screen sizes */

@media (min-width: 1024px) {

}
@media (min-width: 1440px) {

}


.custom-union,
.custom-vpn,
.custom-security,
.custom-secret,
.custom-group,
.custom-kleopatra,
.custom-logo,
.custom-group137,
.custom-subtract,
.custom-tor {

  margin: 0 !important;
  transform: translate(-50%, -50%);
}

.custom-union {
  left: calc(320px + 38%);
  top: 110px;
}
.custom-vpn {
  left: calc(320px + 35%);
  top: 350px;
}
.custom-security {
  left: calc(320px + 30%);
  top: 140px;
}
.custom-secret {
  left: calc(320px + 22%);
  top: 170px;
}
.custom-group {
  left: calc(250px + 22%);
  top: 70px;
}
.custom-kleopatra {
  left: calc(120px + 24%);
  top: 255px;
}
.custom-logo {
  left: calc(200px + 12%);
  top: 40px;
}
.custom-group137 {
  left: calc(50px + 12%);
  top: 200px;
}
.custom-subtract {
  left: calc(50px + 12%);
  top: -100px;
}
.custom-tor {
  left: calc(50px + 8%);
  top: -250px;
}


@media (max-width: 768px) {

  .custom-union {
    left: auto;
    right: calc(0px + 4%);
    top: 350px;
    scale: 0.4;
    padding: 12px;
  }
  .custom-vpn {
    left: auto;
    right: calc(-20px - 4%);
    top: 240px;
    scale: 0.7;
    padding: 8px;
    border-radius: 16px;
  }
  .custom-security {
    left: auto;
    right: calc(20px + 14%);
    top: 370px;
    scale: 0.4;
    padding: 12px;
  }
  .custom-secret {
    left: calc(55%);
    top: calc(330px + 30vw);
    scale: 0.4;
    padding: 10px;
  }
  .custom-group {
    left: calc(42%);
    top: calc(330px + 30vw);
    scale: 0.4;
    padding: 10px;
  }
  .custom-kleopatra {
    left: auto;
    right: calc(0px + 4%);
    top: 300px;
    scale: 0.7;
    padding: 12px;
  }
  .custom-logo {
    border-radius: 16px;
    left: calc(30px + 15%);
    top: calc(320px + 25vw);
    scale: 0.6;
    padding: 10px;
  }
  .custom-group137 {
    left: calc(1px + 13%);
    top: 350px;
    scale: 0.9;
    padding: 18px;
  }
  .custom-subtract {
    left: calc(1px + 2%);
    top: 200px;
    scale: 0.4;
  }
  .custom-tor {
    left: calc(1px + 3%);
    top: 150px;
  }

  @keyframes grow-shrink {
    0% {
      transform: scale(1.5);
    }
    49% {
      background: transparent;
    }
    50% {

      transform: scale(2.5);
    }

    100% {
      transform: scale(1.5);
    }
  }

}