.acf-layout-cta-section {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  background-color: var(--color-dark, #000000);
  z-index: 1;
}

.acf-layout-cta-section .container {
  position: relative;
  z-index: 2;
}

/* Background glows positioned absolute relative to the section wrapper */
.cta-bg-glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: blur(150px);
  border-radius: 50%;
}

.cta-bg-glow-tr {
  background: linear-gradient(
    180deg,
    rgba(240, 167, 70, 0.9) 0%,
    rgba(146, 142, 73, 0.9) 100%
  );
  width: 711.26px;
  height: 386.66px;
  transform: rotate(-172.38deg);
  opacity: 0.5;
  top: 93.93px;
  left: 784.6px;
}

.cta-bg-glow-tl {
  background: linear-gradient(180deg, #f0a746 0%, #928e49 100%);
  width: 432.68px;
  height: 235.21px;
  transform: rotate(55.35deg);
  opacity: 0.5;
  top: -106.53px;
  left: -169.49px;
}

.cta-container {
  position: relative;
  overflow: visible;
  text-align: center;
  padding: 90px 10px; /* Mobile base: 165px left padding to offset the 150px columns */
  background-color: var(--color-white);
  color: var(--color-dark);
  height: 300px;
}

.cta-black-box-2 {
  left: 37%;
}

/* Three animated bars on the left side (mobile base: width 50px/51px) */
.cta-left-bar {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: var(--color-white, #ffffff);
  width: 50px;
  z-index: 2;
  transform: translateY(0);
  transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1);
}

.cta-left-bar-1 {
  left: 0;
}

.cta-left-bar-2 {
  left: 50px;
}

.cta-left-bar-3 {
  left: 100px;
}

/* Three absolute positioned black boxes (mobile base: size 10px, z-index: 1) */
.cta-black-box {
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--color-dark, #000000);
  z-index: 1;
}

/* Default mobile coordinate locations */
.cta-black-box-1 {
  top: 48%;
  left: 89%;
}

.cta-black-box-2 {
  bottom: 12%;
  left: 43%;
}

.cta-black-box-3 {
  top: 12%;
  left: 50%;
}

/* Raise text elements z-index so they sit above bars and black boxes */
.cta-heading,
.cta-email-link,
.pt-md-5,
.primary-btn {
  position: relative;
  z-index: 5;
}

.cta-corner-square {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-dark, #000000);
  z-index: 10;
}

.cta-heading span {
  display: inline-block;
}

.cta-email-link {
  word-break: break-all;
}

.cta-email-link:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  .cta-black-box-1 {
    top: 54%;
    left: 92%;
  }
}

/* Hide image by default on mobile and tablet viewports */
.cta-image {
  display: none;
}

/* Display absolute positioned elements and animations only on desktop viewports >992px */
@media (min-width: 992px) {
  .cta-image {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 370px;
    width: auto;
    pointer-events: none;
    z-index: 2;
  }

  /* Desktop overrides for white bars (100px/101px width) */
  .cta-left-bar {
    width: 101px;
  }

  .cta-left-bar-2 {
    left: 100px;
  }

  .cta-left-bar-3 {
    left: 200px;
  }

  /* Desktop overrides for black boxes (30px size) */
  .cta-black-box {
    width: 30px;
    height: 30px;
  }

  .cta-black-box-1 {
    top: 5%;
    left: 20%;
  }

  .cta-black-box-2 {
    bottom: 10%;
    left: 26%;
  }

  .cta-black-box-3 {
    top: 23%;
    right: 26%;
left: auto;
  }
}

@media (max-width: 992px) {
  .cta-container {
    padding: 60px 15 !important;
    height: auto;
  }
}