@use '../utils' as *;

/*----------------------------------------*/
/* newsletter style
/*----------------------------------------*/
.newsletter-main {
  padding: 40px 35px 45px 85px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid rgba($white, $alpha: 0.2);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  @media #{$xs} {
    padding: 30px 25px 30px 25px
  }
  .clients-coin-wrapper {
    width: 374px;
    height: 283px;
    position: relative;
    margin-inline-start: auto !important;
    margin: 0;
    @media #{$xs,$sm,$md} {
      margin: 0 auto;
    }
    @media #{$xxs} {
      width: 100%;
    }
  }
}
.input-field-inner {
  display: flex;
  align-content: center;
  gap: 15px 20px;
  position: relative;
  @media #{$xs} {
    flex-direction: column;
  }
  .input-field {
    width: 100%;
    position: relative;
    &:before {
      position: absolute;
      content: "";
      inset: 0;
      @include border-radius(100px);
    padding: 2px;
      background: linear-gradient(139.9deg,rgba(255, 255, 255, 0) 0%, rgba($white, $alpha: 0.4) 100%);
      -webkit-mask: linear-gradient(var(--td-white) 0 0) content-box, linear-gradient(var(--td-white) 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      z-index: -1;
    }
    input {
      height: 50px;
      width: 100%;
      padding: 0px 20px;
      background: #36373F;
      backdrop-filter: blur(4px);
      border-radius: 100px;
      font-size: 14px;
      font-weight: 500;
      outline: none;
      color: rgba($white, $alpha: 0.3);
      border: 0;
      @include td-placeholder {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}
.shape-shifter-btn {
  flex: 0 0 auto;
}
