/* Bif tablets 1200px*/
@media only screen and (max-width:1200px){
    .hero-text-box{
        width: 100%;
        padding: 0 2%;
    }
    .row{
        padding: 0 2%;
    }
    .main-nav a {display: none;}
    .main-nav a.icon {
        float: right;
        display: block;
    }
    .main-nav.responsive {position: relative;}
    .main-nav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .main-nav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .main-nav li{
    display: flex;
    margin-right: 500px;
    }
    .main-nav li a {
        text-align: center;
    }
}

/* small tablets to big tablets from 768 to 1023px*/
@media only screen and (max-width:1023px){
    .long-copy{
        width: 80%;
        margin-left: 10%;
    }
    body{
        font-size: 18px;
    }
    section{
        padding: 60px 0;
    }
    .main-nav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
        padding-top: 40px;
    }
    .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%;border-radius: 35px;}
    .icon-small{width:17px; margin-right: 5px;}
    .city-feature{font-size:90%;}
    .plan-box{
        width: 100%;
        margin-left: 0%;
    }

}

/* small phones from 481 to 767px*/
@media only screen and (max-width:767px){
    .app-screen{width: 40%;border-radius: 45px;}
}

/* small phones from 0 to 480px*/
@media only screen and (max-width:480px){
    .app-screen{width: 30%;border-radius: 20px;box-shadow: 6px 6px 5px #aaaaaa  ;}
}