.hero-calculator-block{
  background-color:transparent !important;
  position: relative;
}

.hero-calculator-block{
    .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;
    }
    .hero-calculator-block-inner, .hero-calculator-container{
      max-width: var(--wp--style--global--content-size);
      margin-left: auto;
      margin-right: auto;
    }
}

.hero-calculator-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;
  }
}


.hero-calculator-block .cta-image-container {
  width: calc((100vw * 0.45) - 100px);
  height:100%;
  position: absolute;
  left:55%;
  top:0;
  margin-left:100px;
  overflow: hidden;
}

.hero-calculator-block img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  top: 0;
  left: 0;
}

.hero-calculator-block .cta-text-container {
  box-sizing: border-box;
  width: 55%;
  height:auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  overflow: hidden;
  padding: 117px 80px 85px 0;
    *{
      color:var(--wp--preset--color--tertiary);
    }
  
}

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

.hero-calculator-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;
}

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

.hero-calculator-block .wp-block-buttons{
  margin-top: 43px;
}

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

.hero-calculator-inner{
  box-sizing: border-box;
  width: 55%;
  height:auto;
}

.hero-calculator-container{
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
  display: flex ;
  min-height: 262px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.addon-content-block{
    padding-bottom: 45px;
    .addon-title{
        margin-bottom: 25px;
        margin-top: 25px;
    }
    ul{
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 15px 30px;
        li{
            font-size: 20px;
            font-weight: 300;
            line-height: 1.1;
            font-family: var(--wp--preset--font-family--outfit);
            list-style: none;
            position: relative;
            padding-left: 25px;
            margin-left:0;
            &:before{
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 16px;
                height: 16px;
                background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 16C3.5625 16 0 12.4375 0 8C0 3.59375 3.5625 0 8 0C12.4062 0 16 3.59375 16 8C16 12.4375 12.4062 16 8 16ZM11.5312 6.53125H11.5C11.8125 6.25 11.8125 5.78125 11.5 5.46875C11.2188 5.1875 10.75 5.1875 10.4688 5.46875L7 8.96875L5.53125 7.5C5.21875 7.1875 4.75 7.1875 4.46875 7.5C4.15625 7.78125 4.15625 8.25 4.46875 8.53125L6.46875 10.5312C6.75 10.8438 7.21875 10.8438 7.53125 10.5312L11.5312 6.53125Z' fill='%2395BFDE'/%3E%3C/svg%3E");
            }
        } 
    }
}

@media (min-width: 1060px){
  .hero-calculator-block.extended-calc-use{
      .hero-calculator-inner {
          width: 65%;
            .hero-calculator-ext-module {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              width: 100%;
              gap:0;
                .input-cell-ext {
                    max-width: 55%;
                    flex-shrink: 1;
                    padding-left: 0;
                    padding-right:2%;
                    padding-top:30px;
                    border-bottom: none;
                        .hero-calculator-row {
                            padding: 0 0 20px;
                        }
                }
                .result-cell-ext {
                    padding: 20px 0;
                    width: 43%;
                    min-width:327px;
                    flex-shrink: 0;
                        .hero-calculator-ext--result {
                              padding: 0;
                        }
                }
                .res-wrapper {
                  grid-template-columns: repeat(5, auto);
                    .box:nth-child(6) {
                        display: none;
                    }
                }
            }
      }
  }
}


@media (max-width: 991px){
    .hero-calculator-block{
        .cta-text-container{
            padding-right:0;
        }
        .cta-image-container{
            margin-left:30px;
            width: calc((100vw * 0.45) - 30px);
        }
    }
}

@media (max-width: 767px){
    .hero-calculator-block{
        .cta-text-container{
            width:100%;
            padding: 40px 0 27px 0;
              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;
        }
        .wp-block-button{
            display: inline-block;
        }
    }
    .hero-calculator-block-inner {
        margin-bottom: -160px;
        .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;
        }
    }
    .hero-calculator-block-bottom{
        padding-top:140px;
    }
    .hero-calculator-inner {
        width: 100%;
    }
    
}

@media (max-width: 440px){
  .hero-calculator-block.extended-calc-use{
    .hero-calculator-block-bottom{
        padding-left:0 !important;
        padding-right:0 !important;
    }
  }
}