html,
body {
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}

.blur-bg {
  background-image: url("./imgs/blur-effect.png");
  background-size: contain;
  /* background-repeat: no-repeat; */
  /* background-position: center center; */
}

.header-banner {
  background-image: url("./imgs/hero-bg.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.border-gradient {
  background: radial-gradient(circle at 100% 100%, black 0, black 8px, transparent 8px) 0% 0%/10px 10px no-repeat,
    radial-gradient(circle at 0 100%, black 0, black 8px, transparent 8px) 100% 0%/10px 10px no-repeat,
    radial-gradient(circle at 100% 0, black 0, black 8px, transparent 8px) 0% 100%/10px 10px no-repeat,
    radial-gradient(circle at 0 0, black 0, black 8px, transparent 8px) 100% 100%/10px 10px no-repeat,
    linear-gradient(black, black) 50% 50% / calc(100% - 4px) calc(100% - 20px) no-repeat,
    linear-gradient(black, black) 50% 50% / calc(100% - 20px) calc(100% - 4px) no-repeat, linear-gradient(#173b80 10%, #11573e 87%);
  border-radius: 10px;
  padding: 14px;
  box-sizing: border-box;
}