Why is my margin css not working in my media query?

I'm trying to create an email signature that when on mobile, the text top aligns with the photo. On the desktop version i have a top margin of 32px, and 0px with the media query. Any clue why my media query isn't working?

@media only screen and (max-width: 500px) {
  .mobile {
    visibility: hidden;
    display: none;
  }

  .mtext {
    margin-top:0px; !important
    padding:0px; !important
  }
}

<table width="100%" border="0" style="font-family:Arial, Helvetica,sans-serif;font-size:12px; margin-left:10px; margin-right:10px;">
   <tr>
      <td width="100" valign="top" align="left">
         <img width="100px" src="https://www.pkallsc.org/wp-content/uploads/2018/04/Headshot-Jeffrey-Ashley-square-e1522622432938.jpg"  style="float:left;" alt="John Smith" />
      </td>
      <td width="1249" valign="top" style="text-align:left; margin-left:5px; font-family:Arial, Helvetica, sans-serif; font-size:16px;" align="left">
         <p class="mtext" style="margin-left:10px; margin-top:32px; font-family:Arial, Helvetica, sans-serif; font-size:14px; text-align:left;"> <strong>John&nbsp;Smith</strong>
            <br />Chief Executive Officer<br /> 123 Central Suite, Suite 510 |&nbsp;Alpharetta, Georgia 30022<br /> T 800.800.8808 | D 800.800.0236&nbsp;|&nbsp;F 800.800.2704
         </p>
      </td>
   </tr>
   <tr>
      <td colspan="3">
         <div class="mobile">
         <hr style="border: 1.5px solid #49DBC3; max-width: 550px; margin-left:0;" width="80%" align="left">
         <div>
   <tr> <td colspan="9" align="left"><div class="mobile"> 
   </div></td></tr><div> </div></div>
</table>

Solution

@media only screen and (max-width: 500px) {
  .mobile {
    visibility: hidden;
    display: none;
  }

  .mtext {
     margin-top:0px !important;
     padding:0px !important;
  }
}

If you need to use !important it's should be before ;