.CTA-section {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding: 50px 40px;
  position: relative;
  background-color: var(--backgroundbackground-4);
}

.CTA-section .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 800px;
  padding: 50px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--backgroundbackground-1);
  border-radius: 20px 0px 0px 20px;
}



.CTA-section .content {
  display: flex;
  flex-direction: column;
  height: fit-content;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.CTA-section .title {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.CTA-section .text {
  display: flex;
  flex-direction: column;
  height: 66px;
  align-items: flex-start;
  gap: 9px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.CTA-section .founder-principal {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--heading-6-font-family);
  font-weight: var(--heading-6-font-weight);
  color: var(--dividertexton-accent-1);
  font-size: var(--heading-6-font-size);
  letter-spacing: var(--heading-6-letter-spacing);
  line-height: var(--heading-6-line-height);
  font-style: var(--heading-6-font-style);
}

.CTA-section .text-wrapper {
  position: relative;
  align-self: stretch;
  font-family: var(--heading-3-font-family);
  font-weight: var(--heading-3-font-weight);
  color: var(--dividertexton-accent-1);
  font-size: var(--heading-3-font-size);
  letter-spacing: var(--heading-3-letter-spacing);
  line-height: var(--heading-3-line-height);
  font-style: var(--heading-3-font-style);
}

.CTA-section .linkedin {
  position: relative;
  align-self: stretch;
  width: 66px;
  background-image: url(../assets/LinkIn.svg);
  background-size: 100% 100%;
}

.CTA-section .div-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.CTA-section .bachelor-of-science {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--label-1-font-family);
  font-weight: var(--label-1-font-weight);
  color: transparent;
  font-size: var(--label-1-font-size);
  letter-spacing: var(--label-1-letter-spacing);
  line-height: var(--label-1-line-height);
  font-style: var(--label-1-font-style);
}

.CTA-section .span {
  color: #ffffff;
  font-family: var(--label-1-font-family);
  font-style: var(--label-1-font-style);
  font-weight: var(--label-1-font-weight);
  letter-spacing: var(--label-1-letter-spacing);
  line-height: var(--label-1-line-height);
  font-size: var(--label-1-font-size);
}

.CTA-section .text-wrapper-2 {
  color: #8390fa;
  font-family: var(--label-1-font-family);
  font-style: var(--label-1-font-style);
  font-weight: var(--label-1-font-weight);
  letter-spacing: var(--label-1-letter-spacing);
  line-height: var(--label-1-line-height);
  font-size: var(--label-1-font-size);
}

.CTA-section .ryan-is-a-licensed {
  position: relative;
  align-self: stretch;
  margin-top: -1.00px;
  font-family: var(--paragraph-font-family);
  font-weight: var(--paragraph-font-weight);
  color: var(--dividertexton-accent-1);
  font-size: var(--paragraph-font-size);
  letter-spacing: var(--paragraph-letter-spacing);
  line-height: var(--paragraph-line-height);
  font-style: var(--paragraph-font-style);
}

.CTA-section .image {
  flex: 1 0 0;
  align-self: stretch;
  max-width: 800px;
  height: auto;
  border-radius: 0px 20px 20px 0px;
  background-image: url(../assets/Profile.png);
  background-size: cover no-repeat;
  background-position: 50% 50%;
  mix-blend-mode: darken;
}

/* ==========  Mobile Styling  ========== */

/* ───────────── ABOUT – mobile stacking (≤ 768 px) ───────────── */
@media (max-width: 950px) {

  /* stack vertically – image first, card second */
  .CTA-section {
    flex-direction: column-reverse;   /* image appears on top */
    padding: 40px 16px;               /* thinner side padding */
  }

  /*  BLUE CARD  */
  .CTA-section .card {
    max-width: 100%;
    width: 100%;
    border-radius: 0 0 20px 20px;     /* only bottom corners rounded */
    padding: 32px 24px;
  }

  /*  IMAGE  */
  .CTA-section .image {
    flex: auto;
    max-width: unset;
    max-height: 60vh;
    width: 100%;                     /* keeps source height if <img>, OR */
    aspect-ratio: 3/4;                /* keeps bg‑image tall if you use div */
    border-radius: 20px 20px 0 0;     /* only top corners rounded */
    background-image: url(../assets/Profile.png);
    background-size: cover;
    background-position: 50% 50%;
    mix-blend-mode: darken;
  }
}