.wp-site-blocks .demo-cta-block{
  background-color:transparent !important;
  position: relative;
    > div{
        margin-block-start: 0 !important;
    }
    &.no-top-margin{
      margin-top: -1px !important;
    }
    &.no-bottom-margin{
      margin-bottom: -1px !important;
    }
}
.wp-site-blocks .demo-cta-block.alignfull{
    .container-fluid{
      max-width: var(--wp--style--global--wide-size) !important;
    }
    &.type-simple{
        .container-fluid{
          max-width: var(--wp--style--global--content-size) !important;
        }
    }
}

.demo-cta-block-inner {
	display: flex;
	justify-content: center;
	align-items: center;
}


.demo-cta-block .cta-image-container {
  width: 50%;
  height:482px;
  position: relative;
  background: #e5e5e5;
  border-radius: 100px 0px 0px 0px;
  overflow: hidden;
}

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

.demo-cta-block .cta-text-container {
  box-sizing: border-box;
  width: 50%;
  height:482px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  border-radius: 0px 0px 0px 100px;
  transform: translateY(95px);
  overflow: hidden;
  padding: 50px 115px 119px 123px;
}

.type-simple.demo-cta-block {
    .container-fluid{
      max-width: var(--wp--style--global--content-size) !important;
      margin-left:auto !important;
      margin-right:auto !important;
    }
    .cta-text-container {
      margin-left:0;
      transform: translateY(0);
      height:auto;
      padding: 54px 41px 45px 94px;
        *{
            color:var(--wp--preset--color--tertiary);
        }
    }
    .cta-image-container {
      min-height:532px;
      height:auto;
      display: flex;
      flex-direction: column;
    }
    .demo-cta-block-inner {
        align-items: stretch;
    }
}

.demo-cta-block h2 {
  margin-top: 0;
  margin-bottom:0;
}

.demo-cta-block .wp-element-button {
  display: inline-block;
}

.demo-cta-block .wp-block-buttons{
  margin-top: 55px;
      .wp-block-button .wp-block-button__link {
          height: 52px;
      }
}

.demo-cta-form{
  margin-top: 30px; 
    .gform_wrapper{
        .gfield [type="email"]{
            height:52px;
            border:none;
            padding: 0 18px;
            font-size: 16px;
            outline: none;
            background-color: #fff;
        }
        .gform_validation_errors{
            display: none !important;
        }
        .validation_message{
          color:var(--wp--preset--color--beige) !important;
        }
        .gform-loader{
            right:-50px !important;
            position: absolute !important;
        }
        .gform_footer [type="submit"] {
            padding: 0 84px 0 22px !important;
            height:42px !important;
            font-size: 16px !important;
            font-weight: 500 !important;
            line-height: 1 !important;
            font-family: var(--wp--preset--font-family--outfit) !important;
            background-color: var(--wp--preset--color--white) !important;
            color: var(--wp--preset--color--tertiary) !important;
            border: none !important;
            outline: none !important;
            border-radius: 100px !important;
        }
        .gform_submit_button_wrapper{
            position: relative !important;
            display: inline-block !important;
                &:before{
                    content: "";
                    position: absolute;
                    width: 28px;
                    height: 22px;
                    transform: skew(-30.727deg) translateY(-50%);
                    background: var(--wp--preset--color--orange);
                    top: 50%;
                    right:25px;
                    transition: all 0.3s ease-in-out;
                }
                &:after{
                    content: "";
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    transform: translateY(-50%);
                    top: 50%;
                    right:25px;
                    transition: all 0.3s ease-in-out;
                    background-repeat: no-repeat;;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z' fill='%23FFFFFF'/%3E%3C/svg%3E");
                }
                &:hover:after{
                    transform: translateY(-50%) translateX(4px);
                    transition: all 0.3s ease-in-out;
                }
                &:hover:before{
                    transform: skew(-30.727deg) translateY(-50%) translateX(4px);
                    transition: all 0.3s ease-in-out;
                }
        }
    } 
}


@media (max-width: 1240px){
    .demo-cta-block{
        &:not(.type-simple) > div {
            padding: 0 !important;
        }
        &.type-simple{
            .container-fluid{
              max-width: var(--wp--style--global--content-size) !important;
              margin-left:auto !important;
              margin-right:auto !important;
            }
        }
    }
}

@media (max-width: 991px){
    .demo-cta-block {
        .cta-text-container {
            padding: 50px 50px 119px 50px;
        }
    }
}

@media (max-width: 850px){
  .wp-site-blocks .demo-cta-block.type-simple{
      .demo-cta-block-inner {
          flex-direction: column;
          margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
          margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
      }
      .cta-image-container {
        width: 100%;
        height:414px;
      }
      .cta-text-container {
          width: 100%;
          padding: 47px var(--wp--style--root--padding-right) 44px;
      }
  }
}

@media (max-width: 750px){
    .demo-cta-block-inner {
        flex-direction: column;
    }
    .demo-cta-block{
      position: relative;
      &:after{
        content: "";
        position: absolute;
        width: 100%;
        height: 150px;
        bottom: 0;
        left: 0;
        background: var(--wp--preset--color--tertiary);
      }
      &.no-bottom-margin{
        &:after{
          bottom: -1px;
        }
      }
      &.type-simple{
        &:after{
          display: none !important;
        }
      }
      .cta-image-container {
          width: 100%;
          height:auto;
          aspect-ratio: 1/0.66;
      }
      .cta-text-container {
          width: 100%;
          transform: translateY(0);
          padding: 34px 30px 102px 30px;
          height:auto
      }
    } 
}