/* this is media query for width of browser from 1200px ie: 1200 is the breakpoint 
   1200px is generally breakpoint for laptop or computer screens*/
   @media only screen and (max-width: 1200px) {
      .hero-text-box
      {
        
        width :100%;
        padding:0 2%;
      }
      .row{padding: 0 2%;}
     }
  
  /* this is media query for width of browser from 768px to 1023px ie: 1023px is the breakpoint 
     1023px is generally breakpoint for small tablets- big tablets*/
     @media only screen and (max-width: 1023px) {
        .long-copy{
            width: 80%;
            margin-left: 10%;
        }
        body{ font-size: 18px;}
        section{ padding: 60px 0;}
  
        .steps-box{margin-top: 10px;}
        .steps-box:last-child {margin-top: 10px;}
        .works-step{ margin-bottom: 40px; }
        .works-step:last-of-type{margin-bottom: 60px;  }
        .app-screen{width:50%;}
        .iocn-small{
           width: 17px;
           margin-right: 5px;
        }
        .city-feature{font-size: 90%;}
        .plan-box{
         width:  100%;
         margin-left: 0;
      }
      .plan-price{font-size: 250%;}
      .contact-form{width : 80%;}
   }
  
  
  
  /* this is media query for width of browser from 481px to 767px ie: 767 is the breakpoint 
     767px is generally breakpoint for tablets*/
     @media only screen and (max-width: 767px) {
      body{font-size: 16px;}
      section{padding: 30px 0px;}
      .row,
      .hero-text-box{padding: 0 4%;}
      .col{
      width: 100%;
      margin: 0 0 4% 0;
      }
      .main-nav{display: none;}
      .app-screen{width: 40;}
      .steps-box:first-child{text-align: center;}
      .works-step div{ 
         height: 40px;
         width: 40px;
         margin-right: 15px;
         padding: 4px;
         font-size: 120%;
      }
      .works-step{margin-bottom: 20px;}
      .works-step:last-of-type{margin-bottom: 20px;}
   }
  
  
  /* this is media query for width of browser from 0 to 480px ie: 480 is the breakpoint 
     480px is generally breakpoint for smart-phones*/
  @media only screen and (max-width: 480px) {
   section{padding: 25px 0; }
   .contact-form{width:100px ;}
}