body {
  position: relative;
  isolation: isolate;
  background-color: var(--jkptg-white, #fff);
}

body.page-node-2 {
  background-image:
    linear-gradient(rgb(255 255 255 / 42%), rgb(255 255 255 / 42%)),
    url("/themes/custom/jkptg/images/frontpage-bg.png");
  background-size: cover;
  background-position: top center;
  background-repeat: repeat-y;
}

body:not(.page-node-2):not(.page-node-type-welcome-page) {
  background-color: #f4f9f8;
  background-image:
    radial-gradient(
      ellipse 72% 64% at 50% 38%,
      rgb(255 255 255 / 96%) 0%,
      rgb(255 255 255 / 84%) 54%,
      rgb(247 251 250 / 52%) 100%
    ),
    linear-gradient(
      180deg,
      rgb(255 255 255 / 18%) 0%,
      rgb(255 255 255 / 38%) 100%
    ),
    url("/themes/custom/jkptg/images/frontpage-bg.png");
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

body.page-node-2::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 430px;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 240px 76px at 3% 68%,
      rgb(67 116 119 / 28%) 0%,
      rgb(67 116 119 / 10%) 58%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 190px 62px at 15% 76%,
      rgb(91 135 137 / 22%) 0%,
      rgb(91 135 137 / 8%) 60%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 190px 62px at 85% 76%,
      rgb(91 135 137 / 22%) 0%,
      rgb(91 135 137 / 8%) 60%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 240px 76px at 97% 68%,
      rgb(67 116 119 / 28%) 0%,
      rgb(67 116 119 / 10%) 58%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      rgb(252 252 252 / 0%) 0%,
      rgb(252 252 252 / 28%) 6%,
      rgb(252 252 252 / 72%) 15%,
      rgb(252 252 252 / 88%) 26%,
      rgb(252 252 252 / 92%) 50%,
      rgb(252 252 252 / 88%) 74%,
      rgb(252 252 252 / 72%) 85%,
      rgb(252 252 252 / 28%) 94%,
      rgb(252 252 252 / 0%) 100%
    ),
    linear-gradient(
      180deg,
      rgb(239 244 244 / 90%) 0%,
      rgb(239 244 244 / 70%) 100px,
      rgb(239 244 244 / 10%) 190px,
      rgb(239 244 244 / 0%) 206px
    );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 64%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, #000 0%, #000 64%, transparent 100%);
}

body.user-logged-in.page-node-2::before {
  top: 81px;
}

body.page-node-2 > .dialog-off-canvas-main-canvas {
  position: relative;
  z-index: 1;
}

body.page-node-2 .jkptg-top-header,
body.page-node-2 .jkptg-header {
  background-color: transparent;
  background-image: none;
}

body.page-node-2 .jkptg-announcement {
  background-color: transparent;
}

body.page-node-2 .jkptg-service-tab__button {
  background-color: rgb(252 252 252 / 43%);
}

body.page-node-2 .jkptg-updates {
  background-color: rgb(252 252 252 / 60%);
}

/* just for CSS specifity we include path-node */
.path-node .jkptg-agency {
  background-color: transparent;
}

body.page-node-2 .jkptg-agency {
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 63%) 0%,
    #fff 100%
  );
}

.jkptg-agency__inner {
  box-shadow: 0 -12px 28px -16px rgb(0 18 42 / 28%);
}
