.dv-signup-form {
  padding-top: var(--padd-125);
  padding-bottom: var(--padd-125);
  background: #F6F7FA;
  
  .container {
    gap: 30px;
    justify-content: space-between;
    align-items: center;
    max-width: 992px;

    @media only screen and (max-width: 767px) {
      justify-content: center;
    }
    
    .column-box {
      max-width: 450px;
      width: calc(50% - 15px);

      @media only screen and (max-width: 767px) {
        width: 100%;
      }

      &.signup-form-box {
        max-width: 446px;
      } 
      
      h2 {
        font-family: var(--font-jost);
        font-size: 56px;
        font-weight: 500;
        line-height: 74px;
        text-align: left;
        margin: 0 0 15px;
        color: #050505;

        @media only screen and (max-width: 767px) {
          font-size: 40px;
          line-height: 59px;
          text-align: center;
        }
        
      }

      p {
        font-family: var(--font-body-family);
        font-size: 20px;
        font-weight: normal;
        line-height: 30px;
        text-align: left;
        color: #A3A3A3;

        @media only screen and (max-width: 767px) {
          font-size: 16px;
          line-height: 26px;
          text-align: center;
        }
        
      }

      form {
        max-width: 100%;
        width: 100%;

        @media only screen and (max-width: 767px) {
          align-items: center;
        }

        .newsletter-form__field-wrapper {
          max-width: 100%;
          width: 100%;
          
          .field {
            max-width: 100%;
            width: 100%;
            flex-wrap: wrap;
            gap: 20px;

            &:before,
            &:after {
              display: none;
            }

            .field_box {
              position: relative;
              width: 100%;
              
              input,
              textarea {
                border: 1px solid #00428D;
                font-family: var(--font-body-family);
                font-size: 14px;
                font-weight: 400;
                line-height: 16.41px;
                letter-spacing: 0.01em;
                text-align: left;
                color: #050505;
                padding: 21px 30px;
                height: initial;
                border-radius: 100px;
                box-shadow: none;
  
                &::placeholder {
                  color: #6A6A6A !important;
                  opaciy: 1;
                  visibility: visible;
                }

                &:not(:placeholder-shown) ~ .field__label {
                  display: none !important;
                }
                
              }

              textarea {
                border-radius: 30px;
              }

              .field__label {
                top: 19px;
                left: 30px;
                color: #6A6A6A !important;
                font-size: 1.6rem;
                letter-spacing: .1rem;
              }
            }

            button {
              position: relative;
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              font-family: var(--font-jost);
              font-size: 20px;
              font-weight: var(--font-weight-500);
              line-height: 28.09px;
              text-align: left;
              color: #fff;
              text-decoration: none;
              padding: 16px 20px;
              max-width: 100%;
              width: 100%;
              justify-content: center;
              gap: 8px;
              align-items: center;
              border-radius: 100px;
              height: initial;
              background: var(--gradient-one);

              &:after,
              &:before {
                display: none;
              }

              &:hover {
                background: var(--gradient-one-hover);
              }
              
            }
            
          }
        }
        
      }
    }

    .column-box {
    }
    
  }
}