@media screen and (max-width: 1300px) {
    .header {
        width: 100%;
    }
    .logo {
        margin-left: 14px;
    }
    .phone {
        margin-right: 14px;
    }
    #servise {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }
    .frame {
        width: 100%;
    } 
    .rent-container {
        width: 100%;
    }
    #connection {
        width: 100%;
    }
    #about-us {
        width: 100%;
    }
    .footer-container {
        width: 100%;
    }
}
@media screen and (max-width: 1100px) {
    ul {
       display: none;
    }
}
@media screen and (max-width: 900px) {
    #servise {
        display: flex;
        flex-wrap: wrap;
    }
    .item-card {
        width: 560px;
        height: 530px;
    }
    .item-card1 {
        width: 560px;
        height: 530px;
    }
    .item-card h2 {
        margin-left: 0px;
        margin-top: 17px;
        text-align: center;
    }
    .item-card h3 {
        margin-left: 0px;
        margin-top: 33px;
        text-align: center;
    }
    .item-card1 h2 {
        margin-left: 0px;
        margin-top: 17px;
        text-align: center;
    }
    .item-card1 h3 {
        margin-left: 0px;
        margin-top: 33px;
        text-align: center;
    }
    .motivation {
        position: static;
        text-align: center;
    }
    .fon {
        margin-top: -240px;
        height: 2035px;
    }
    #internet {
        height: 510px;
    }
}
@media screen and (max-width: 800px) {
    .connection-img {
        height: 140px;
        background: url(../img/connect_tablet.jpg) no-repeat center top;
    }
    .connection-text p {
        width: 600px;
    }
    #about-us p {
        width: 600px;
    }
}
@media screen and (max-width: 600px) {
    .header {
        flex-direction: column;
    }
    .logo {
        margin-top: 15px;
        margin-left: 0px;
    }
    .header-phone {
        margin-top: 15px;
        padding-bottom: 15px;
    }
    .phone {
        margin: 0;
        margin-right: 0px;
    }
    .main-text h1 {
        padding-top: 220px;
    }
    .fon {
        margin-top: -312px;
        height: 2600px;
    }
    .item-card {
        width: 320px;
        height: 655px;
    }
    .item-card1 {
        width: 320px;
        height: 588px;
    }
    #internet {
        width: 320px;
        height: 635px;
    }
    .item-card h3 {
        margin-left: 15px;
        margin-right: 15px;
    }
    .item-card1 h3 {
        margin-left: 15px;
        margin-right: 15px;
    }
    .black {
        white-space: pre;
        line-height: 130%;
    }
    #rent {
        height: 315px;
    }
    .use {
        width: 100%;
        margin-left: 0px;
    }
    .rent-container h2 {
        font-size: 20px;
    }
    #rent-tariff {
        font-size: 13px;
    }
    .rent-tariff {
        width: 320px;
    }
    .rent-tariff__rights {
        float: none;
    }
    .rent-container p {
        width: 320px;
        text-align: center;
        font-size: 18px;
    }
    .frame {
        height: 154px;
    }
    #connection h2 {
        font-size: 20px;
    }
    .connection-text p {
        width: 230px;
    }
    .connection-img {
        height: 75px;
        background: url(../img/connect_mob.jpg) no-repeat center top;
    }
    .connection-text p {
        width: 230px;
    }
    #call {
        height: 360px;
    }
    #about-us h2 {
        font-size: 20px;
    }
    #about-us p {
        width: 320px;
        font-size: 15px;
    }
    h4 {
        width: 285px;
        height: 50px;
    }
    #modal {
        width: 340px;
    }
    #modal-2 {
        width: 340px;
    }
    #modal-3 {
        width: 340px;
    }
    #modal-4 {
        width: 340px;
    }
    .involucre {
        text-align: left;
    }
    .close-popap {
        top: 15px;
        right: 15px;
    }
}
@media screen and (max-width: 500px) {
/* insert-maintenance */
    .maintenance-modal {
      width: 95%;
    }
    .maintenance-modal h2 span {
        line-height: 1em;
    }
/* insert-maintenance end */
}