.contact {
  & footer {
    height: fit-content;
  
    .contact-round-logo {
      width: 120px;
    }
  
    .contact-main-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 200px 0;
  
      .contact-form-image {
        display: flex;
        justify-content: center;
        width: 50%;

        & img {
          width: 430px;
          border-radius: var(--border-radius);
        }
      }
  
      .contact-form {
        width: 50%;
        display: flex;
        flex-direction: column;
        gap: 20px;
  
        .form-group {
          display: flex;
          gap: 10px;
          justify-content: flex-end;
  
          & label {
            font-family: var(--title-font-family);
            font-size: var(--step-1);
          }
  
          & input,
          textarea {
            width: 80%;
            text-align: center;
            color: var(--light-color);
            font-family: Nunito-Bold;
            background-color: transparent;
            border: solid;
            border-width: 0 0 1px;
            border-radius: 0;
            height: 3rem;
          }
  
          & textarea {
            padding: 0.8rem;
            min-height: 3rem;
            resize: vertical;
          }
  
          & ::placeholder {
            color: var(--light-color);
          }
  
          & :focus {
            outline: none;
          }
        }
  
        & button {
          align-self: flex-end;
          width: 50%;
          font-family: Nunito-Bold;
          padding: 10px 25px;
          margin-top: 30px;
        }
      }
    }
  }
}

@media screen and (width < 1000px) {
  .contact {
    & footer {

      .contact-main-content {
        flex-direction: column;
        gap: 100px;

        .contact-form-image {
          width: 100%;
        }

        .contact-form {
          width: 100%;

          .form-group {
            justify-content: unset;

            & input, textarea {
              width: 100%;
            }
          }

          & button {
            width: 50%;
          }
        }
      }
    }
  }
}

@media screen and (width <= 750px) {
  .contact {
    & footer {

      .footer-headline {

        .contact-round-logo {
          width: 80px;
        }
      }

      .contact-main-content {

        .contact-form {

          & button {
            width: 100%;
          }
        }
      }
    }
  }
}