.page-hero-block{
  background-color:rgba(241, 246, 250, 1) !important;
  position: relative;
    &:not(.no-blue-bg):before{
      content: '';
      position: absolute;
      top:0;
      left:58.5%;
      margin-left:228px;
      width:calc(41.5vw - 228px);
      height:100%;
      background-color:var(--wp--preset--color--tertiary);
      z-index:0;
    }
    .container-fluid{
      max-width: var(--wp--style--global--wide-size) !important;
      background-image:url(../../assets/images/hero_pattern.svg);
      background-repeat:no-repeat;
      background-size:contain;
    }
    .page-hero-block-inner, .page-hero-container{
      max-width: var(--wp--style--global--content-size);
      margin-left: auto;
      margin-right: auto;
    }
    &.extended-type{
      .cta-text-container {
          width: 47%;
            .acf-innerblocks-container{
              padding-right:60px;
            }
      }
      .cta-image-container {
          width: 52vw;
          left:48%;
          margin-left:0;
              .shape-image, .shape-1, .shape-2
               {
                  margin-left:193px;
              }
      }
      .shape-4{
        width:138px;
        height:255px;
        position: absolute;
        z-index: 1;
        left:0;
        bottom:116px;
        clip-path: url(#page-hero-shape-4);
      }
      .shape-5{
        width:178px;
        height:329px;
        position: absolute;
        z-index: 1;
        top:0;
        left:46px;
        clip-path: url(#page-hero-shape-5);
      }
    }
}

.page-hero-block.extended-type ~ .numbers-block{
      margin-top:-263px !important;
      position: relative;
}

.mobile-only {
  display: none;
}

.page-hero-block-inner {
	.shape-image{
    clip-path: polygon(0 40%, 100% 0, 100% 60%, 0 100%);
    aspect-ratio: 1 / 1.86;
    background-color: #fff;
    position: absolute;
    top:32px;
    bottom:25px;
    left:40px;
    z-index: 1;
  }
  .shape-1{
    position: absolute;
    top:5px;
    left:0;
    z-index: 1;
  }
  .shape-2{
    position: absolute;
    bottom:67px;
    left:436px;
    z-index: 1;
  }
  .shape-3{
    display: none;
  }
}


.page-hero-block .cta-image-container {
  width: calc(41.5vw - 59px);
  height:100%;
  position: absolute;
  left:58.5%;
  margin-left:59px;
  top:0;
  overflow: hidden;
}

.page-hero-block img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.page-hero-spacer-bottom {
    min-height: 262px;
    width: 100%;
    max-width: 100vw !important;
    background: #fff;
    margin-block-start: 0 !important;
}

.page-hero-block{ 
    .cta-text-container {
        box-sizing: border-box;
        width: 58.5%;
        height:auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 2;
        overflow: hidden;
        padding: 61px 0 106px 0;
          *{
            color:var(--wp--preset--color--tertiary);
          }
          & > *:not(.page-hero-calculator){
            padding-right:110px;
          }
    }
    &.extended-padding{
        .cta-text-container {
            padding: 105px 0 175px 0;
        }
        .shape-4 {
            bottom: 166px !important;
        }
        .shape-image {
          bottom: 65px;
        }
        .cta-image-container {
            top:-30px;
        }
    }
}

.added-calculator.page-hero-block .cta-text-container {
  padding-bottom: 58px;
}

.page-hero-block h1 {
  margin-top: 0;
  margin-bottom:0;
}

.page-hero-block p {
  font-family: var(--wp--preset--font-family--outfit);
  font-size: 18px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-top:24px;
  margin-bottom: 0;
}

.page-hero-block .wp-element-button {
  display: inline-block;
}

.page-hero-block .wp-block-buttons{
  margin-top: 43px;
  gap:24px;
}

.page-hero-block-bottom{
  min-height:262px;
  background-color: var(--wp--preset--color--tertiary);
  max-width: 100% !important;
  margin:0;
  margin-block-start: 0 !important;
}

.page-hero-calculator{
  background:var(--wp--preset--color--tertiary);
  color: #fff;
  border-radius: 8px;
  padding: 49px 26px 38px 42px;
  margin: 74px 0 0;
}

.page-hero-inner{
  box-sizing: border-box;
  width: 55%;
  height:auto;
    p{
      margin:0;
      &.page-hero--label{
        font-family: var(--vp--preset--font-family--lato);
        font-size: 14px;
        font-weight: 400;
        color:var(--wp--preset--color--light-blue);
      }
      &.page-hero--value{
        color: #FFF;
        font-family: var(--vp--preset--font-family--outfit);
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.48px;
        margin-bottom:13px;
      }
    }
    h3{
      color: #FFF;
      font-size: 24px;
      letter-spacing: 0.48px;
      margin:0;
      flex-basis: 100%;
      flex-shrink: 0;
      margin-bottom: 20px;
    }
}

.page-hero-block{
  &.type-simple{
    &:before{
      display: none;
    }
    .page-hero-spacer-bottom{
      display: none;
    }
    .page-hero-block-inner {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      justify-content: stretch;
      .shape-1, .shape-2, .shape-3 {
        display: none;
      }
      .cta-text-container {
        width:44%;
        padding: 61px 0 40px 0;
          & > *:not(.page-hero-calculator) {
              padding-right: 30px;
          }
          .top-label{
            margin-top:0;
          }
      }
      .cta-image-container {
        width:55%;
        position: static;
        margin-left: 0;
        height: auto;
        flex: 1;
        align-self: stretch;
        overflow: visible;
              .shape-image {
                clip-path: none;
                aspect-ratio: 1/0.86;
                background-color: transparent;
                position: relative;
                top: 30px;
                left: 0;
                width: 100%;
                z-index: 1;
                border-radius: 0 0 0 100px;
                overflow: hidden;
            }
      }
    }
  }
}

@media (max-width: 1140px){
  .page-hero-block {
      &.type-simple {
          & .page-hero-block-inner {
              & .cta-image-container {
                  .shape-image {
                      aspect-ratio: initial;
                      height:400px;
                      margin-bottom:-40px;
                  }
              }
          }
      }
  }
}


@media (max-width: 991px){
    .page-hero-block{
        .cta-text-container{
             & > *:not(.page-hero-calculator){
                padding-right:30px;
              }
        }
        .cta-image-container{
            margin-left:30px;
            width: calc(41.5vw - 30px);
        }
    }
}

@media (max-width: 767px){
  .mobile-only{
    display: block;
  }
  .desktop-only, .page-hero-spacer-bottom{
    display: none;
  }
  .page-hero-block.extended-type ~ .numbers-block{
      padding-top:120px !important;
  }
    .page-hero-block{
        &:before{
          display: none;
        }
         &.extended-padding{
          .cta-image-container {
              top:-10px;
          }
      }
        &.image-first{
          &:before{
            content: '';
            position: absolute;
            display: block;
            top:0;
            left:0;
            width:100%;
            height:273px;
            margin-left:0;
            background-color:var(--wp--preset--color--tertiary);
          }
          .page-hero-block-inner{
             display: flex;
             flex-direction: column-reverse;
          }
        }
        &.type-simple {
          &:before{
            display: block;
            bottom: 0;
            top: initial;
            margin: 0;
            left: 0;
            width:100%;
            height: 150px;
            background: var(--wp--preset--color--tertiary);
          }
          .page-hero-block-inner {
            display: block;
              .cta-text-container{
                width:100%;
                padding: 30px 0 27px 0;
              }
              .cta-image-container {
                width:100%;
                position: relative;
                  .shape-image {
                      aspect-ratio: 1/0.96;
                      height:auto;
                      transform: none;
                      position: relative;
                      margin: 0;
                      left:calc(var(--wp--style--root--padding-left) * -1);
                      right:calc(var(--wp--style--root--padding-right) * -1);
                      width: 100vw;
                      top: 0;
                  }
              }
          }
        }
        &.extended-type{
          .cta-text-container {
              width: 100%;
                .acf-innerblocks-container{
                  padding-right:0;
                }
          }
          .cta-image-container {
              width: 100vw;
              margin-left: calc(var(--wp--style--root--padding-left) * -1);
              left:0;
                  .shape-image, .shape-1, .shape-3 {
                      margin-left:100px;
                  }
          }
          .shape-4{
            width:92px;
            height:170px;
            left:50%;
            bottom:75px;
            transform: translateX(-250px);
            clip-path: url(#page-hero-shape-4-mob);
              img{
                object-position: center;
              }
          }
          .shape-5{
            width:119px;
            height:220px;
            top:0;
            left:50%;
            transform: translateX(-200px);
            clip-path: url(#page-hero-shape-5-mob);
          }
        }
        .cta-text-container{
            width:100%;
            padding: 40px 0 27px 0 !important;
              h1{
                font-size: 32px;
                line-height: 40px;
              }
        }
        .cta-image-container{
            margin:0 auto;
            width: 100vw;
            height: 480px;
            position:relative;
            left:0;
            margin-left: calc(var(--wp--style--root--padding-left) * -1);
        }
        .container-fluid {
            background-size: cover;
            background-position: center;
        }
        .page-hero-calculator{
            margin: -140px calc(var(--wp--style--root--padding-right) * -1) 0 calc(var(--wp--style--root--padding-left) * -1) ;
            width: 100vw;
            padding: 140px var(--wp--style--root--padding-right) 39px var(--wp--style--root--padding-left);
            position: static;
            border-radius: 0;
        }
    }
    .page-hero-block-inner {
        .shape-1 {
            top: 0;
            left: 50%;
            transform: translateX(-120%);
            width:167px;
            height: 308px;
        }
        .shape-image {
            top: 12px;
            bottom: 25px;
            left: 50%;
            transform: translateX(-70%);
        }
        .shape-2 {
            display: none;
        }
        .shape-3 {
            position: absolute;
            display: block;
            bottom:67px;
            left: 50%;
            transform: translateX(40%);
            z-index: 1;
        }
    }
    .page-hero-block-bottom{
        padding-top:140px;
    }
    .page-hero-inner, .page-hero--result, .input-cell {
        width: 100%;
    }
    .result-cell {
        width:100%
    }
    .page-hero--result-label br {
        display: none;
    }
    .wp-block-button{
        display: inline-block;
    }
}

@media (max-width: 480px){
    .page-hero {
        flex-basis: 100%;
          &:not(:last-child) {
            margin-bottom: 17px;
          }
    }

    .docs-wrap {
      display: block;
        .docs-cell {
            max-width: 100%;
            .docs-cell-inner {
                padding: 20px !important;
            }
        }
    }
    .page-hero-block {
        & .cta-text-container {
            & > *:not(.page-hero-calculator) {
                padding-right: 0;
            }
        }
    }
}

@media (max-width: 360px){
  .page-hero-block {
      & .cta-text-container {
          & > .acf-innerblocks-container {
              .wp-block-button .wp-element-button, .wp-block-button .wp-block-button__link {
                padding: 0 55px 0 10px;
                font-size: 15px;
              }
          }
      }
  }
}