Email template loading css in pc bowser but not loading css in mobile browser?

I am working on web app that send mails templates to clients work perfectly on pc browser but when try to see it on mobile it shows with no css what is the perfect way to show mails template and test it there is an sniping form the code i use :

code snippet http://www.w3.org/1999/xhtml' xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office'>

<style>

html,
body {
    margin: 0 auto !important;
    padding: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background: #f1f1f1;
        font-family: inherit !important;
}

html, body {
    height: 100%;
    font-family: 'Josefin Sans', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
      font-family: 'Josefin Sans', sans-serif !important;
    color: #000000;
    margin-top: 0;
}

* {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

div[style*='margin: 16px 0'] {
    margin: 0 !important;
}


table,
td {
    mso-table-lspace: 0pt !important;
    mso-table-rspace: 0pt !important;
}

table {
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
    margin: 0 auto !important;
}

img {
    -ms-interpolation-mode:bicubic;
}


a {
    text-decoration: none;
}

*[x-apple-data-detectors], 
.unstyle-auto-detected-links *,
.aBn {
    border-bottom: 0 !important;
    cursor: default !important;
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

.a6S {
    display: none !important;
    opacity: 0.01 !important;
}

.im {
    color: inherit !important;
}

img.g-img + div {
    display: none !important;
}


@media only screen and (min-device-width: 320px) and (max-device-width: 374px) {
    u ~ div .email-container {
        min-width: 320px !important;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
    u ~ div .email-container {
        min-width: 375px !important;
    }
}

@media only screen and (min-device-width: 414px) {
    u ~ div .email-container {
        min-width: 414px !important;
    }
}

</style>

<style>

.primary{
    background: #f3a333;
}

.bg_white{
    background: #ffffff;
}
.bg_light{
    background: #fafafa;
}
.bg_black{
    background: #000000;
}
.bg_dark{
    background: rgba(0,0,0,.8);
}
.email-section{
    padding:2.5em;
}


.btn{
    padding: 10px 15px;
}
.btn.btn-primary{
    border-radius: 30px;
    background: #ED1C24;
    color: #ffffff;
}



h1,h2,h3,h4,h5,h6{
    font-family: 'Playfair Display', serif;
    color: #000000;
    margin-top: 0;
}

body{
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(0,0,0,.4);
}
.footer{
  font-size: 12px;
}
a{
    color: #f3a333;
}

table{
}


.logo h1{
    margin: 0;
}
.logo h1 a{
    color: #000;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}

.hero{
    position: relative;
}
.hero img{

}
.hero .text{
    color: rgba(255,255,255,.8);
}
.hero .text h2{
    color: #ffffff;
    font-size: 30px;
    margin-bottom: 0;
}


.heading-section{
}
.heading-section h2{
    color: #000000;
    font-size: 28px;
    margin-top: 0;
    line-height: 1.4;
}
.heading-section .subheading{
    margin-bottom: 20px !important;
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(0,0,0,.4);
    position: relative;
}
.heading-section .subheading::after{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    content: '';
    width: 100%;
    height: 2px;
    background: #f3a333;
    margin: 0 auto;
}

.heading-section-white{
    color: rgba(255,255,255,.8);
}
.heading-section-white h2{
    font-size: 28px;

    line-height: 1;
    padding-bottom: 0;
}
.heading-section-white h2{
    color: #ffffff;
}
.heading-section-white .subheading{
    margin-bottom: 0;
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,.4);
}


.icon{
    text-align: center;
}
.icon img{
}


.text-services{
    padding: 10px 10px 0; 
    text-align: center;
}
.text-services h3{
    font-size: 20px;
}

.text-services .meta{
    text-transform: uppercase;
    font-size: 14px;
}

.text-testimony .name{
    margin: 0;
}
.text-testimony .position{
    color: rgba(0,0,0,.3);

}


/*VIDEO*/
.img{
    width: 100%;
    height: auto;
    position: relative;
}
.img .icon{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: -25px;
}
.img .icon a{
    display: block;
    width: 60px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -25px;
}



.counter-text{
    text-align: center;
}
.counter-text .num{
    display: block;
    color: #ffffff;
    font-size: 34px;
    font-weight: 700;
}
.counter-text .name{
    display: block;
    color: rgba(255,255,255,.9);
    font-size: 13px;
}



.footer{
    color: rgba(255,255,255,.5);

}
.footer .heading{
    color: #ffffff;
    font-size: 20px;
}
.footer ul{
    margin: 0;
    padding: 0;
}
.footer ul li{
    list-style: none;
    margin-bottom: 10px;
}
.footer ul li a{
    color: rgba(255,255,255,1);
}


@media screen and (max-width: 500px) {

    .icon{
        text-align: left;
    }

    .text-services{
        padding-left: 0;
        padding-right: 20px;
        text-align: left;
    }

}
.text-center{
  text-align: center;
}
.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
@media (min-width: 576px){


.col-sm-12 {

    flex: 0 0 100%;
    max-width: 100%;
}
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px){
.col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}}
@media (min-width: 576px){
.col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}}
@media (min-width: 576px){
.col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}}
@media (min-width: 576px){
.col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}}
</style>


</head>

<body width='100%' style='margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f1f1f1;'>

    <div style='display: none; font-size: 1px;max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: sans-serif;'>
      &zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;
    </div>
    <div style='max-width: 600px; margin: 0 auto;' class='email-container'>


      <div class='row bg_dark email-section '>
        <div class='col-sm-12 text-center'>
          <img class='text-center pb-2' src='https://brainpowerweb.azurewebsites.net/assets/EmailTemplateImages/logo-w.png'>

          <div class='heading-section text-center heading-section-white'>
            <h2>Welcome To Brain power</h2>
          </div>
        </div>

      </div>
      <div class='row bg_white email-section'>
        <div class='col-sm-12'>

          <h5 class=''>Dear : {NAME} ,  </h5>

          <p  class=''>
             Thank you for using Brain power services .
          </p>




          <h2 class='text-center'>Your Order With Number {OrderNumber}   InShipping</h2>
          <p  class=''>
            You are receiving this email because We are  recently InShipping your order . If you did not do this, please contact us.
           </p>
          <table>
            <tr>
              <td>
                <a href='http://brainpower-eg.com/#/Track/{OrderID}'  target="_blank">
                  <img src='https://brainpowerweb.azurewebsites.net/assets/EmailTemplateImages/InShipping.png' height='auto' width='100%'
                     alt="" style="padding-bottom:'15px' ;" />
                </a>
              </td>
            </tr>
            <tr>

              <td>
                <a class='btn btn-primary' style='float:right;' target="_blank" href='http://brainpower-eg.com/#/Track/{OrderID}'> Track Your Order</a>
              </td>

            </tr>
          </table>

          <p>
            Regards
           </p>
 </div>


</div>
<div class='row bg_black  email-section footer '  style=' border-top: #ed3439 solid; '>
  <div class='col-sm-3  '>
    <img class='text-center pb-2' src='https://brainpowerweb.azurewebsites.net/assets/EmailTemplateImages/logo-w.png' style='width: 100px;'>
<p class='text-white'>

  BrainPower was founded by Ramez Henry in 2009.The company deals mainly with the distribution for major accounts, 
  where we supply businesses with our industrial construction, and garage equipment and tools.
</p>

  </div>
  <div class='col-sm-3 '>
 <p class='text-white'> 
  Get access to exclusive offers!
 </p>
 <div class='text-center'>
  <img class='text-center pb-2' src='https://brainpowerweb.azurewebsites.net/assets/EmailTemplateImages/app2.png' style='width: 100px;'>
  <img class='text-center pb-2' src='https://brainpowerweb.azurewebsites.net/assets/EmailTemplateImages/play1.png' style='width: 100px;'>
 </div>

  </div>
  <div class='col-sm-4 '>
    <p class='text-white'> 
   Contact us
    </p>
    <p class='text-white'>

 99 El Gamhouria St , Cairo
    </p>
    <p class='text-white'>

      +20225888227
    </p>
    <p class='text-white'>

      +201228202000    </p>
      <p class='text-white'>

       info@brainpower-eg.com   </p>

     </div>

<div class='col-sm-12 text-center'>
      <p class='text-secondary text-center mt-2'>Copyright © 2020  All rights reserved to <a  href='#' style='color: #ed3439;'> Brainpower</a></p>
</div>



</div>

</body>
</html>