.hp-bg-gradient-layout {
  position: relative;
  background: #061E53;
  z-index: 1;
}

.hp-temp-wave {
   margin-top: -8px !important;
}


.hp-blur-circle {
position: absolute;
  width: 1675px;  
  height: 1675px;
  border-radius: 50%;
  background: inherit;
  filter: blur(400px);
  pointer-events: none;
  will-change: filter, transform;
  -webkit-transform: translateZ(0);
}

@supports (-webkit-touch-callout: none) {
  /* Safari-specific */
  .hp-blur-circle {
    -webkit-filter: blur(100px);
  }
}

@supports (-webkit-hyphens: none) and (not (-ms-ime-align: auto)) {
  .hp-blur-circle {
    filter: blur(200px); /* Safari override */
  }
}

/* Blue blur */
.hp-blur-green {
 background: var(--Sustainable, #04FFA8);
  top: -600px;
  left: -400px;
  z-index: 0;
}

/* Blue blur */
.hp-blur-blue {
background: var(--Collaborative, #286CFC);
  top: -55px;
    left: 100px;
    z-index: -1;
}

.hp-sec-1 {
    z-index: 2;
    margin-left: -16px !important;
    margin-right: -16px !important;
}

.hp-sec-2 {
    z-index: 2;
    margin-left: -16px !important;
    margin-right: -16px !important;
}

.hp-sec-3 {
    z-index: 2;
    margin-left: -16px !important;
    margin-right: -16px !important;
}

.hp-sec-4 {
    z-index: 2;
    margin-left: -16px !important;
    margin-right: -16px !important;
}


@media (min-width: 1024px) {

.hp-sec-1 {
    z-index: 2;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hp-sec-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 99 !important;
    padding-right: 0 !important;
}

.hp-sec-3 {
    z-index: 2;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.hp-sec-4 {
    z-index: 2;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

}