.contact_section {
    width: 100%;
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.contact_section .centered_contact{
    max-width: 800px;
    margin: auto;
}
.contact_section h2{
    margin: auto;
    font-size: 25px;
    font-weight: 800;
    text-align: center;
    padding-bottom: 10px;
}
.contact_section p{
    font-weight: 700;
    color: rgba(0, 0, 0, 0.587);
}

  input{
    margin-bottom: 10px;
  }
  label{
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.496);
    text-transform: uppercase;
  }


  input,
  textarea {
      display: block;
      width: 100%;
      padding: 0.3em;
      font-size: 14px;
      background-color: #fbfbfb;
      border: none;
      border-bottom: 1px solid rgba(0, 0, 0, 0.393);
      resize: vertical;
    }

  .full_msg{
      padding-left: 15px;
      padding-right: 15px;
    }

  textarea {
    min-height: 100px;
  }
  

  
  input:focus,
  input:hover,
  select:focus,
  select:hover,
  textarea:focus,
  textarea:hover {
    background: rgb(205, 209, 218);
  }
  

  .form_btn {
      display: flex;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 20px;
      gap: 1rem;
    }
    .form_btn input{
        width: 50%;
        border: none;
        background-color: var(--skin-color-1);
        color: var(--white-color);
        font-weight: 600;
    }
    .form_btn input:hover{
        background-color: crimson;
    }

    @media screen and (min-width: 600px) {
      /*  make the form 2 columns */
      form:after {
        content: "";
        display: block;
        clear: both;
      }
      .column {
        width: 50%;
        padding: 1em;
        float: left;
      }
    }

  @media screen and (max-width: 600px) {
    .centered_contact .column {
      width: 100%;
      padding-left: 10px;
      padding-right: 10px;
      float: left;
    }
    .form_btn input{
      width: 100%;
}
.contact_section .centered_contact{
  padding-left: 20px;
  padding-right: 20px;
}
}