.background-icons {
  width: 0;
  height: 0;
  pointer-events: none; /* Disable interaction to avoid any issues */
}

.bg-icon {
  position: absolute;
  width: 100px;
  z-index: 0;
}
.bg-badge {
  position: absolute;
  width: 200px;
  z-index: 0;
}

.icon-1 {
  top: 25%;
  left: 2%;
}
.icon-2 {
  bottom: 10%;
  left: 5%;
}
.icon-3 {
  top: 0%;
  right: 2%;
}
.icon-4 {
  bottom: 5%;
  right: 5%;
}

.hero-bg-icon {
  position: absolute;
}

.hero-icon-1 {
  bottom: -30px;
  right: -30px;
  width: 150px;
}
.hero-icon-2 {
  top: -30px;
  right: -30px;
  width: 75px;
}
.hero-icon-3 {
  top: -10px;
  left: 100px;
  width: 50px;
}
.hero-icon-4 {
  bottom: -20px;
  left: 0;
  width: 50px;
}



@media (max-width: 768px) {
  .bg-icon {
    position: absolute;
    width: 50px;
    z-index: 0;
  }
  .bg-badge {
    position: absolute;
    width: 100px;
    z-index: 0;
  }
  
  .icon-1 {
    top: 2%;
    left: 2%;
  }
  .icon-2 {
    bottom: 5%;
    left: 15%;
  }
  .icon-3 {
    top: 0%;
    right: 5%;
  }
  .icon-4 {
    bottom: 5%;
    right: 25%;
  }
  .hero-bg-icon {
    /* position: absolute; */
    width: 50px;
    display: none;
  }
}