/* Computer form 1023px to 1200px*/
@media only screen and (max-width: 1210px) {
  .hero-text-box{
    width: 100%;
    padding: 0 2%;
  }

    .row{padding: 0 2%; }

    .city-card-list{
      flex-direction: column;
      align-items: center;
    }

    .cities-card{
      margin-bottom: 50px;
      font-size: 150%;
    }

    .city-card-img img{
      display: block;
      max-width:500px;
      max-height: 500px;
      margin-right: 40px;
    }

}

/* Ipad,portrait mode form 767px to 1023px*/
@media only screen and (max-width: 1023px) {
  body{font-size: 18px;}
  section{padding: 60px;}
  .long-copy{
    width: 80%;
    margin-left: 10%;
  }
  .steps-box{margin-top: 10px;}
  .steps-box:last-child{margin-top: 10px;}
  .works-steps{ margin-bottom: 40px; }
  .works-steps:last-of-type{ margin-bottom: 60px; }

  .app-screen{width: 50%;}

}
/*-----------------------------------------------------------*/
/* Sign up button fix*/
@media only screen and (max-width: 1100px) {

  .position-parent{
    position: relative;
  }

  .position{
    position: absolute;
  }

}

/*-----------------------------------------------------------*/

/* Ipad, form 480px to 767px*/
@media only screen and (max-width: 767px) {
  body{font-size: 16px;}
  section{padding:30px 0; }
  .row,
  .hero-text-box{padding: 0 4%;}
  .col{width: 100%;}
  .plans-templete,
  .testimonial-templete{
    flex-direction: column;
    gap: 10px;
  }

  .main-nav{
    display: none;
  }

  .main-nav{
    float: left;
    margin-top: 35px;
    margin-left: 25px;
  }

  .main-nav li{
    display: block;
  }

  .main-nav li a:link,
  .main-nav li a:visited{
    display: block;
    border: 0;
    padding: 10px 0;
    font-size: 100%;
  }

  .sticky .main-nav{margin-top: 10px;}

  .sticky .main-nav li a:link,
  .sticky .main-nav li a:visited{padding: 10px 0;}
  .sticky .mobile-nav-icon ion-icon{color: #555;}
  .sticky .mobile-nav-icon {margin-top: 10px;}


  .mobile-nav-icon{display: inline-block;}

  h1{font-size: 180%;}
  h2{font-size: 150%;}

  .long-copy{
    width: 100%;
    margin-left:0;
  }


  .works-steps{ margin-bottom: 20px; }
  .works-steps:last-of-type{ margin-bottom: 20px; }
  .works-step div{
    height: 40px;
    width: 40px;
    padding: 4px;
    margin-right: 15px;
    font-size: 120%;
  }

  .steps-box:first-child{text-align: center;}
  .app-screen{width: 40%;}
  .city-card-img img{
    max-width:200px;
    max-height: 200px;
  }

}


/* small phones form 0 to 480px*/
@media only screen and (max-width: 480px) {
section{padding: 25px 0;}
.contact-form{width: 100%;}

}