@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}

.footer-email-subscription {
  display: none;
}

.nerdy-lp-newsletter {
  background-color: var(--background);
  color: var(--color);
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);

  .nerdy-lp-newsletter-container {
    .heading-container {
      flex-basis: 371px;
      flex-shrink: 0;

      .heading-title {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 24px;
        text-align: left;
      }
    }

    .nerdy-lp-newsletter-form-container {
      width: 100%;
      position: relative;

      form {
        .input-state {
          width: 100%;
          position: relative;

          .email-input-field {
            background: #fff;
            margin-bottom: 24px;
            width: 100%;
            border-radius: 33px;
            padding-inline: 32px;
            padding-block: 18px;
            font-size: 24px;

            appearance: none;
            -webkit-appearance: none;
            border: none;
            box-shadow: none;
            outline: none;

            &::placeholder {
              opacity: .7;
            }
          }

          .form-submit-button {
            appearance: none;
            -webkit-appearance: none;
            border: none;
            background: transparent;
            outline: none;
            background: #141B4D;
            color: #fff;
            text-align: center;
            height: 63px;
            padding: 0 32px;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 130%;
            border-radius: 40px;
            transition: .3s all;
            min-width: 162px;
            width: 100%;
            top: 0;
            right: 0;
            letter-spacing: normal;

            &:hover {
              background: #434971;
            }
          }

        }
      }

      .loading-state {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 24px;
        margin-top: 10px;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }

      .success-state {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 24px;
        margin-top: 10px;

        span {
          --tw-text-opacity: 1;
          color: rgb(34 197 94 / var(--tw-text-opacity, 1));
          font-size: 18px;
        }
      }

      .error-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 10px;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;

          span {
            color: #FF0000;
            font-size: 18px;
          }
        }

        .error-message {
          color: #FF0000;
          font-size: 18px;
          margin-top: 10px;
        }
      }
    }

  }
}

@media (min-width: 767px) {
  .nerdy-lp-newsletter {
    .nerdy-lp-newsletter-container {
      display: flex;
      gap: 60px;
      justify-content: space-between;

      .heading-container {
        .heading-title {
          font-size: 48px;
        }
      }
    }
  }
}

@media (min-width: 1200px) {
  .nerdy-lp-newsletter .nerdy-lp-newsletter-container {
    .heading-container {
      flex-basis: 618px;

      .heading-title {
        margin-bottom: 0px;
      }
    }

    .nerdy-lp-newsletter-form-container {
      form {
        .input-state {
          .email-input-field {
            padding-right: 132px;
            margin-bottom: 0px;
          }

          .form-submit-button {
            width: auto;
            position: absolute;
          }
        }
      }
    }
  }
}