.image-left-cta {
  display: flex;
  flex-wrap: wrap;
  background-color: #0b3835;
  color: white;
  overflow: hidden;
  min-height: 320px;
  margin-top: 100px;
  margin-bottom: 120px;
}

.image-left-cta.full-width {
  width: 100vw;
  margin-left: -205px;
  padding: 0px 0;
  min-height: 620px;
}

.cta-image-wrapper {
  position: absolute;
  width: 46%;
  min-width: 280px;
  height: 100%;
  clip-path: polygon(0 0, 352px 0, -36% 100%, 0% 100%);
  z-index: 2;
  margin-top: -20px;
}

.full-width .cta-image-wrapper {
  position: absolute;
  min-width: 50vw;
  height: 100%;
  clip-path: polygon(0 0, 68vw 0, 60% 100%, 0% 100%);
  z-index: 2;
  margin-top: 0px;
}

.cta-image-wrapper img {
  width: auto;
  height: 360px;
  object-fit: cover;
  display: block;
}

.full-width .cta-image-wrapper img {
  width: 75vw;
  height: 620px;
  object-fit: cover;
  display: block;
}

.cta-content {
  flex: 1;
  padding: 0 0 0 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #0b3835;
  z-index: 1;
}

.full-width .cta-content {
  flex: 1;
  padding: 0 83px 0 70vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #f7f9f2;
  z-index: 1;
}

.cta-content h2 {
  text-align: left !important;
  font: normal normal bold 55px/55px Conduit ITC Pro !important;
  letter-spacing: -1.1px !important;
  color: #ccdae0 !important;
  margin: 0 0 20px !important;
  text-transform: none !important;
}

.full-width .cta-content h2 {
  text-align: left !important;
  font: normal normal bold 32px/40px Barlow !important;
  letter-spacing: -0.64px !important;
  color: #577483 !important;
  margin: 0 0 20px !important;
  text-transform: none !important;
}

.cta-content p {
  font: normal normal normal 23px/32px Barlow;
  letter-spacing: 2.3px;
  color: #f7f9f2;
  text-transform: uppercase;
}

.full-width .cta-content p {
  font: normal normal normal 22px/30px Conduit ITC Pro;
  letter-spacing: 0px;
  color: #2f2f2f;
  text-transform: none;
}

a.cta-button {
  text-align: center;
  font: 500 23px Barlow;
  letter-spacing: 3.45px;
  color: #f7f9f2 !important;
  text-transform: uppercase;
  padding: 12px 20px 12px;
  border: 2px solid #f2eedc;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  cursor: pointer;
  margin-left: -10px;
  cursor: pointer;
}

a.cta-button:hover {
  background: #82a53d 0% 0% no-repeat padding-box;
  border: 2px solid #82a53d;
}

.full-width a.cta-button {
  text-align: center;
  font: 500 21px Barlow;
  letter-spacing: 3.45px;
  color: #003333 !important;
  text-transform: uppercase;
  padding: 18px 60px 18px;
  border: 2px solid #003333;
  text-decoration: none;
  display: inline-block;
  width: fit-content;
  cursor: pointer;
  margin-left: 0px;
  margin-top: 60px;
}

.full-width a.cta-button:hover {
  background: #003333 0% 0% no-repeat padding-box;
  border: 2px solid #003333;
  color: #f8f6ed !important;
}

.cta-border-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 340px;
  height: 320px;
  border: 3px solid #0b3835;
  pointer-events: none;
  z-index: 3;
}

.full-width .cta-border-overlay {
  display: none;
}

.cta-form-group button {
  display: block; /* Ensure the button is displayed as block for proper alignment */
  height: auto;
}
.cta-form-group button img {
  max-width: 300px;
}
/* Responsive for mobile */
@media screen and (max-width: 768px) {
  .image-left-cta {
    flex-direction: column;
    background-color: transparent;
    margin: 70px -30px;
  }

  .image-left-cta.full-width {
    margin-left: -30px;
  }

  .cta-image-wrapper {
    position: relative;
    width: 100%;
    clip-path: none;
  }

  .full-width .cta-image-wrapper {
    position: relative; /* Change to relative for mobile */
    width: 100%;
    min-width: 100%; /* Ensure it takes full width on mobile */
    clip-path: none; /* Remove clip-path for mobile */
    height: auto; /* Allow height to adjust based on image aspect ratio */
    padding: 0 30px;
    background: linear-gradient(
      to top,
      #f7f9f2 50%,
      transparent 50%
    ); /* Add background color to fill the bottom half */
  }
  .cta-image-wrapper img {
    width: 100%;
    height: auto;
  }
  .full-width .cta-image-wrapper img {
    width: 100%; /* Ensure the image takes full width on mobile */
    height: auto; /* Allow height to adjust based on image aspect ratio */
  }
  .cta-content {
    padding: 30px 25px;
    background-color: #0b3835;
    margin: 0 5%;
  }
  .full-width .cta-content {
    padding: 40px 30px 30px;
    background-color: #f7f9f2;
    margin: 0px auto 0;
  }

  .cta-border-overlay {
    position: absolute;
    top: 8%;
    left: 5%;
    width: 90%;
    height: 100%;
    border: 3px solid #0b3835;
    border-bottom: none !important;
    pointer-events: none;
    z-index: 3;
  }

  .cta-content h2 {
    font-size: 50px !important;
    margin-bottom: 50px !important;
  }

  .cta-content p {
    font-size: 20px !important;
  }

  a.cta-button {
    text-align: center;
    font: 500 20px Barlow;
    letter-spacing: 3.45px;
    color: #f7f9f2 !important;
    padding: 12px 9px 12px;
    display: inline-block;
    width: fit-content;
    margin: 0 auto !important;
  }
  .full-width a.cta-button {
    margin: 50px auto 0px !important;
    width: 100%;
  }
}