/* 
      Full-width section, 
      “bleeds” across the entire window if needed 
    */
    .cta-section {
        position: relative;
        left: 50%;
        margin-left: -50vw;
        width: 100vw;
        /* The navy behind the card is just the body color. */
        background-color: #050038;
        text-align: center;
        height: 416px;
      }
  
      /* Centered container for the CTA card */
      .cta-container {
        max-width: 1200px;
        margin: 0 auto;
      }
  
      /*
        The CTA “card” with a subtle purple gradient, 
        rounded corners, and padding.
      */
      .cta-card {
       /* background: linear-gradient(118.33deg, #4B128B -13.09%, #050038 93.56%); */
       background: linear-gradient(208.33deg, #4B128B -13.09%, #050038 93.56%);
        border-radius: 1rem;
        padding: 3rem 2rem;
        max-width: 1060px;
        margin: 0 auto; /* center the card */
      }
  
      /* Headline text */
      .cta-card h2 {
        font-size: 44px;
        margin-bottom: 1rem;
        font-weight: 800;
        line-height: 53.25px;
        color: #ffffff;
      }
  
      /* Sub-heading text */
      .cta-card p {
        font-size: 21px;
        margin-bottom: 2rem;
        color: #ddd;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
        line-height: 32px;
        font-weight: 600;
      }
  
      /* Pink “Schedule Demo” Button */
      .cta-button {
        display: inline-block;
        background-color: #ff6fbc;
        color: #fff;
        font-weight: 800;
        border-radius: 32px;
        text-decoration: none;
        transition: background-color 0.2s ease;
        font-size: 21px;
      }
      .cta-button:hover {
        background-color: #ff5daa;
      }
  
      @media (max-width: 600px) {
        .cta-card h2 {
          font-size: 1.5rem;
        }
        .cta-card p {
          font-size: 1rem;
        }
      }

/* 📱 Mobile Optimizations */
@media (max-width: 768px) {
  .cta-section {
      height: auto; /* Let content dictate height */
  }

  .cta-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
  }

  .cta-card {
      padding: 2rem;
      max-width: 90%;
      margin: 0 auto;
  }

  .cta-card h2 {
      font-size: 28px;
      line-height: 1.3;
      margin-bottom: 1rem;
  }

  .cta-card p {
      font-size: 16px;
      line-height: 1.5;
      max-width: 90%;
      margin: 0 auto 1.5rem;
  }

  .cta-button {
      font-size: 18px;
      padding: 0.8rem 2rem;
      border-radius: 28px;
  }
}

/* 📱📲 Mobile Horizontal & iPad-Friendly Layout */
@media (max-width: 1024px) {
  .cta-section {
      height: auto;
      padding-top: 0 !important;
      padding: 2rem 0;
  }

  .cta-container {
      max-width: 95%;
  }

  .cta-card {
      padding: 2rem;
      max-width: 85%;
  }

  .cta-card h2 {
      font-size: 32px;
      line-height: 1.4;
  }

  .cta-card p {
      font-size: 18px;
      line-height: 1.6;
  }

  .cta-button {
      font-size: 20px;
      padding: 1rem 2.5rem;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .cta-section {
      height: auto;
      padding: 1.5rem 0;
  }

  .cta-container {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      text-align: center;
  }

  .cta-card {
      padding: 1.5rem;
      max-width: 80%;
  }

  .cta-card h2 {
      font-size: 26px;
      line-height: 1.3;
  }

  .cta-card p {
      font-size: 14px;
      line-height: 1.5;
  }

  .cta-button {
      font-size: 16px;
      padding: 0.6rem 1.5rem;
  }
}