:root {
  --corner-radius: 4rem;
  --corner-radius-sm: 2rem;
}

@media (min-width: 782px) {
  :root {
    --corner-radius: 5rem;
    --corner-radius-sm: 2.4rem;
  }
}
.circle-cta {
  background: #0E0E26;
  border-radius: 0 0 var(--corner-radius-sm) var(--corner-radius-sm);
  overflow: hidden;
}
.circle-cta.purple {
  background: #212137;
}
.circle-cta.pink {
  background: #FCF1F4;
}
.circle-cta.pink h2, .circle-cta.pink h3, .circle-cta.pink h4, .circle-cta.pink h5, .circle-cta.pink h6, .circle-cta.pink p, .circle-cta.pink li {
  color: #0E0E26;
}
.circle-cta.is-style-fullwidth {
  border-radius: var(--corner-radius) 0 0 0;
}
.circle-cta h2, .circle-cta h3, .circle-cta h4, .circle-cta h5, .circle-cta h6, .circle-cta p, .circle-cta li {
  color: #fff;
}
.circle-cta h3 {
  line-height: 1.1;
}
.circle-cta .cta-content h4 {
  font-size: var(--wp--preset--font-size--font-36);
}
.circle-cta .cta-image {
  line-height: 0;
  opacity: 0;
  overflow: hidden;
}
.circle-cta .cta-image img {
  width: 100%;
  height: auto;
}
.circle-cta .cta-image .cta-image-mask {
  display: block;
  background-size: cover;
}
.circle-cta.is-style-fullwidth .cta-content {
  padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--contentgap);
}
.circle-cta.in-view .cta-image {
  animation: zoomOutSm 1s forwards 0.25s;
}
@media (max-width: 781px) {
  .circle-cta .cta-image .cta-image-mask {
    aspect-ratio: 1/0.9;
    -webkit-clip-path: circle(100% at 50% -6%);
            clip-path: circle(100% at 50% -6%);
    background-position: center bottom;
  }
  .circle-cta .cta-content {
    padding: var(--wp--preset--spacing--xl) var(--wp--preset--spacing--normal);
  }
}
@media (min-width: 782px) {
  .circle-cta {
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--corner-radius-sm);
  }
  .circle-cta .cta-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--wp--preset--spacing--l);
    width: 50%;
    order: -1;
    padding-right: var(--wp--preset--spacing--normal);
  }
  .circle-cta .cta-content > * {
    width: 100%;
  }
  .circle-cta .cta-content h4 {
    font-size: var(--wp--preset--font-size--font-42);
  }
  .circle-cta .cta-image {
    width: 50%;
    margin: -10px 0;
    position: relative;
  }
  .circle-cta .cta-image .cta-image-mask {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .circle-cta .cta-image .cta-image-mask:after {
    content: "";
    display: block;
    width: 100%;
    background: url(../../../assets/images/theme/cta-bg.svg) center left no-repeat;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -10px;
  }
  .circle-cta.purple {
    background: #212137;
  }
  .circle-cta.purple .cta-image .cta-image-mask {
    background-position: center left;
  }
  .circle-cta.purple .cta-image .cta-image-mask:after {
    background: url(../../../assets/images/theme/cta-bg-purple.svg) center left no-repeat;
  }
  .circle-cta.pink .cta-image .cta-image-mask {
    background-position: center left;
  }
  .circle-cta.pink .cta-image .cta-image-mask:after {
    background: url(../../../assets/images/theme/cta-bg-pink.svg) center left no-repeat;
  }
  .circle-cta.in-view .cta-image {
    animation: zoomOut 2s forwards 0.75s;
  }
  .circle-cta.is-style-fullwidth .cta-content {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-end;
    padding: var(--wp--preset--spacing--xl-2) var(--wp--preset--spacing--normal) var(--wp--preset--spacing--xl-2) var(--wp--preset--spacing--contentgap);
  }
  .circle-cta.is-style-fullwidth .cta-content > div {
    max-width: 665px;
  }
}
@media (min-width: 1024px) {
  .circle-cta .cta-content h4 {
    font-size: var(--wp--preset--font-size--font-64);
  }
}
@media (min-width: 1200px) {
  .circle-cta .cta-content {
    padding: var(--wp--preset--spacing--xl);
  }
  .circle-cta.is-style-fullwidth .cta-image {
    width: 60%;
  }
  .circle-cta.is-style-fullwidth .cta-image .cta-image-mask:after {
    top: -50px;
  }
  .circle-cta.is-style-fullwidth .cta-content {
    width: 40%;
    padding-top: var(--wp--preset--spacing--xxxxl);
    padding-bottom: var(--wp--preset--spacing--xxxxl);
  }
  .circle-cta.is-style-fullwidth .cta-content > div {
    max-width: 500px;
  }
}