.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #edf5f9 52%,
      #dceaf3 100%
    );
  border-bottom: 1px solid #d5e2ea;
}

.hero > .container,
.page-hero > .container {
  position: relative;
  z-index: 2;
}



.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 50%,
      transparent 0%,
      transparent 29.7%,
      rgba(41, 112, 190, 0.50) 29.9%,
      rgba(41, 112, 190, 0.50) 30.2%,
      transparent 30.4%,
      transparent 47.7%,
      rgba(81, 142, 205, 0.40) 47.9%,
      rgba(81, 142, 205, 0.40) 48.2%,
      transparent 48.4%,
      transparent 65.7%,
      rgba(143, 187, 226, 0.50) 65.9%,
      rgba(143, 187, 226, 0.50) 66.2%,
      transparent 66.4%
    );
  pointer-events: none;
}

.hero::before {
  top: -110px;
  right: -135px;
}

.page-hero::before {
  top: -95px;
  right: -125px;
  width: 500px;
  height: 500px;
}

.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: -5%;
  bottom: 0;
  width: 110%;
  height: 120px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20120'%20preserveAspectRatio='none'%3E%3Cpath%20d='M-160%20104%20C80%2092%20280%2050%20520%2058%20C760%2066%20910%20112%201150%2090%20C1380%2068%201540%2038%201760%2046'%20fill='none'%20stroke='%23a68a55'%20stroke-opacity='0.34'%20stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hero,
  .page-hero {
    background:
      linear-gradient(
        145deg,
        #ffffff 0%,
        #edf5f9 58%,
        #dceaf3 100%
      );
  }

  .hero::before,
  .page-hero::before {
    top: -55px;
    right: -170px;
    width: 340px;
    height: 340px;
  }


  .hero::after,
  .page-hero::after {
    left: -10%;
    bottom: 0;
    width: 120%;
    height: 90px;
  }
}

.hero::before,
.page-hero::before {
  top: -175px;
}

@media (max-width: 767px) {
  .hero::before,
  .page-hero::before {
    top: -115px;
  }
}