/* =====================================================
       RESET
       ===================================================== */

    .kd-blog-cta,
    .kd-blog-cta *,
    .kd-blog-cta *::before,
    .kd-blog-cta *::after {
      box-sizing: border-box;
    }


    /* =====================================================
       MAIN CTA
       ===================================================== */

    .kd-blog-cta {

      position: relative;

      width: 100%;

      max-width: 100%;

      margin: 0;

      padding: 82px 0;

      background: #159A9C;

      color: #FFFFFF;

      font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

      overflow-x: clip;
      overflow-y: hidden;

    }


    /* =====================================================
       FULL WIDTH BACKGROUND SUPPORT
       
       This allows the teal background to extend to
       the browser edges even when the page content
       sits inside a narrower theme container.
       ===================================================== */

    .kd-blog-cta::before {

      content: "";

      position: absolute;

      z-index: 0;

      top: 0;

      left: 50%;

      width: 100vw;

      height: 100%;

      background: #159A9C;

      transform: translateX(-50%);

      pointer-events: none;

    }


    /* =====================================================
       CONTAINER
       ===================================================== */

    .kd-blog-cta-container {

      position: relative;

      z-index: 1;

      width: min(
        1180px,
        calc(100% - 48px)
      );

      max-width: 100%;

      margin: 0 auto;

      padding: 0;

    }


    /* =====================================================
       MAIN LAYOUT
       
       FLEX IS USED INSTEAD OF COMPLEX GRID TO REDUCE
       MOBILE OVERFLOW RISK.
       ===================================================== */

    .kd-blog-cta-inner {

      display: flex;

      align-items: center;

      justify-content: space-between;

      width: 100%;

      max-width: 100%;

      gap: 64px;

    }


    /* =====================================================
       LEFT CONTENT
       ===================================================== */

    .kd-blog-cta-copy {

      flex: 1 1 auto;

      min-width: 0;

      max-width: 790px;

    }


    /* =====================================================
       LABEL
       ===================================================== */

    .kd-blog-cta-label {

      margin: 0 0 13px;

      font-size: 11px;

      line-height: 1.3;

      font-weight: 700;

      letter-spacing: 0.16em;

      text-transform: uppercase;

      color:
        rgba(255,255,255,0.70);

    }


    /* =====================================================
       TITLE
       ===================================================== */

    .kd-blog-cta-title {

      display: block;

      width: 100%;

      max-width: 780px;

      margin: 0;

      padding: 0;

      font-size:
        clamp(
          30px,
          3.2vw,
          44px
        );

      line-height: 1.18;

      font-weight: 700;

      letter-spacing: -0.035em;

      color: #FFFFFF;

      overflow-wrap: break-word;

      word-break: normal;

    }


    /* =====================================================
       DESCRIPTION
       ===================================================== */

    .kd-blog-cta-text {

      width: 100%;

      max-width: 700px;

      margin: 17px 0 0;

      padding: 0;

      font-size: 15px;

      line-height: 1.8;

      color:
        rgba(255,255,255,0.88);

      overflow-wrap: break-word;

      word-break: normal;

    }


    /* =====================================================
       SUPPORT NOTE
       ===================================================== */

    .kd-blog-cta-note {

      width: 100%;

      max-width: 680px;

      margin: 22px 0 0;

      padding: 0;

      font-size: 12px;

      line-height: 1.7;

      color:
        rgba(255,255,255,0.62);

      overflow-wrap: break-word;

      word-break: normal;

    }


    /* =====================================================
       RIGHT ACTION AREA
       ===================================================== */

    .kd-blog-cta-action {

      flex: 0 1 255px;

      min-width: 0;

      width: 255px;

      max-width: 255px;

      padding-left: 30px;

      border-left:
        1px solid
        rgba(255,255,255,0.22);

    }


    /* =====================================================
       ACTION TITLE
       ===================================================== */

    .kd-blog-cta-action-title {

      margin: 0 0 18px;

      padding: 0;

      font-size: 15px;

      line-height: 1.5;

      font-weight: 700;

      color: #FFFFFF;

      overflow-wrap: break-word;

    }


    /* =====================================================
       BUTTON CONTAINER
       ===================================================== */

    .kd-blog-cta-actions {

      display: flex;

      flex-direction: column;

      width: 100%;

      max-width: 100%;

      gap: 10px;

    }


    /* =====================================================
       BUTTON BASE
       ===================================================== */

    .kd-blog-cta-button {

      display: flex;

      align-items: center;

      justify-content: center;

      width: 100%;

      max-width: 100%;

      min-height: 51px;

      margin: 0;

      padding: 12px 20px;

      font-family: inherit;

      font-size: 13px;

      line-height: 1.3;

      font-weight: 700;

      letter-spacing: 0.01em;

      text-align: center;

      text-decoration: none;

      white-space: normal;

      overflow-wrap: break-word;

      word-break: normal;

      border: 1px solid transparent;

      border-radius: 0;

      cursor: pointer;

      transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;

    }


    /* =====================================================
       PRIMARY BUTTON
       ===================================================== */

    .kd-blog-cta-primary {

      background: #FFFFFF;

      border-color: #FFFFFF;

      color: #27323C;

    }


    .kd-blog-cta-primary:hover {

      background: #F4F7F7;

      border-color: #F4F7F7;

      color: #27323C;

      transform:
        translateY(-2px);

    }


    /* =====================================================
       SECONDARY BUTTON
       ===================================================== */

    .kd-blog-cta-secondary {

      background: transparent;

      border-color:
        rgba(255,255,255,0.68);

      color: #FFFFFF;

    }


    .kd-blog-cta-secondary:hover {

      background:
        rgba(255,255,255,0.12);

      border-color: #FFFFFF;

      color: #FFFFFF;

      transform:
        translateY(-2px);

    }


    /* =====================================================
       CONTACT
       ===================================================== */

    .kd-blog-cta-contact {

      width: 100%;

      max-width: 100%;

      margin: 19px 0 0;

      padding: 0;

      font-size: 11px;

      line-height: 1.7;

      text-align: center;

      color:
        rgba(255,255,255,0.60);

      overflow-wrap: break-word;

    }


    .kd-blog-cta-contact a {

      color: #FFFFFF;

      font-weight: 650;

      text-decoration: none;

    }


    .kd-blog-cta-contact a:hover {

      opacity: 0.75;

    }


    /* =====================================================
       TABLET
       
       768px - 980px
       ===================================================== */

    @media (max-width: 980px) {

      .kd-blog-cta {

        padding: 72px 0;

      }


      .kd-blog-cta-container {

        width:
          min(
            100%,
            calc(100% - 40px)
          );

        max-width: 100%;

      }


      .kd-blog-cta-inner {

        gap: 42px;

      }


      .kd-blog-cta-copy {

        max-width: 100%;

      }


      .kd-blog-cta-title {

        font-size:
          clamp(
            28px,
            4vw,
            38px
          );

      }


      .kd-blog-cta-text {

        font-size: 14px;

      }


      .kd-blog-cta-action {

        flex:
          0 1 220px;

        width: 220px;

        max-width: 220px;

        padding-left: 24px;

      }


      .kd-blog-cta-button {

        min-height: 49px;

        padding:
          11px 16px;

      }

    }


    /* =====================================================
       SMALL TABLET / LARGE MOBILE
       
       <= 767px
       ===================================================== */

    @media (max-width: 767px) {

      .kd-blog-cta {

        padding: 62px 0;

      }


      .kd-blog-cta-container {

        width:
          calc(100% - 32px);

        max-width:
          calc(100% - 32px);

      }


      .kd-blog-cta-inner {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: flex-start;

        gap: 32px;

      }


      .kd-blog-cta-copy {

        width: 100%;

        max-width: 100%;

        min-width: 0;

      }


      .kd-blog-cta-title {

        width: 100%;

        max-width: 100%;

        font-size: 30px;

        line-height: 1.2;

        letter-spacing: -0.025em;

      }


      .kd-blog-cta-text {

        width: 100%;

        max-width: 100%;

        margin-top: 15px;

        font-size: 14px;

        line-height: 1.75;

      }


      .kd-blog-cta-note {

        width: 100%;

        max-width: 100%;

        margin-top: 18px;

        font-size: 11px;

      }


      .kd-blog-cta-action {

        width: 100%;

        max-width: 100%;

        min-width: 0;

        padding: 28px 0 0;

        border-left: 0;

        border-top:
          1px solid
          rgba(255,255,255,0.22);

      }


      .kd-blog-cta-action-title {

        margin-bottom: 15px;

        font-size: 14px;

      }


      .kd-blog-cta-actions {

        width: 100%;

        max-width: 100%;

      }


      .kd-blog-cta-button {

        width: 100%;

        max-width: 100%;

        min-height: 49px;

        padding:
          12px 18px;

        font-size: 13px;

      }


      .kd-blog-cta-contact {

        font-size: 10px;

      }

    }


    /* =====================================================
       MOBILE
       
       <= 480px
       ===================================================== */

    @media (max-width: 480px) {

      .kd-blog-cta {

        padding: 54px 0;

      }


      .kd-blog-cta-container {

        width:
          calc(100% - 28px);

        max-width:
          calc(100% - 28px);

      }


      .kd-blog-cta-label {

        margin-bottom: 11px;

        font-size: 9px;

        letter-spacing: 0.13em;

      }


      .kd-blog-cta-title {

        font-size: 27px;

        line-height: 1.2;

        letter-spacing: -0.02em;

      }


      .kd-blog-cta-text {

        font-size: 13px;

        line-height: 1.75;

      }


      .kd-blog-cta-note {

        font-size: 10px;

        line-height: 1.7;

      }


      .kd-blog-cta-inner {

        gap: 28px;

      }


      .kd-blog-cta-action {

        padding-top: 24px;

      }


      .kd-blog-cta-button {

        min-height: 48px;

        padding:
          11px 16px;

        font-size: 12px;

      }

    }


    /* =====================================================
       EXTRA MOBILE SAFETY
       
       Prevent any inherited theme CSS from causing
       horizontal overflow.
       ===================================================== */

    @media (max-width: 767px) {

      .kd-blog-cta img,
      .kd-blog-cta iframe,
      .kd-blog-cta video,
      .kd-blog-cta table {

        max-width: 100%;

        height: auto;

      }


      .kd-blog-cta h1,
      .kd-blog-cta h2,
      .kd-blog-cta h3,
      .kd-blog-cta p,
      .kd-blog-cta div,
      .kd-blog-cta a {

        max-width: 100%;

      }

    }