@media screen and (max-width:991px) {
    main {
        margin-top: 100px;
    }

    body {
        line-height: normal !important;
    }

    body:before {
        content: "";
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        background: url(../images/home-page/main/bg-home.jpg) no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    header {
        height: 55px;
    }

    header .container .logo img {
        width: 170px;
        top: 4px;
        left: 10px;
    }

    header .container .login {
        margin-top: 5px;
        right: 0;
    }

    header .container .artical {
        position: relative;
        float: right;
        right: 0px;
        line-height: 80px;
        top: -5px;
    }

    .fa-home-alt {
        display: none;
    }

    .menu-bar {
        font-size: 22px;
        font-weight: 600;
        font-family: DB-Heavent-Cond;
    }

    .icon-nav {
        position: relative;
        top: 10px;
        left: -10px;
        display: inline;
        height: 30px;
    }

    header .container .km {
        width: 20px;
        height: 20px;
        float: left;
        position: relative;
        top: 6px;
    }

    .login-btn .container .row button {
        width: 95%;
    }

    .register-btn .container .row button {
        width: 95%;
    }

    ul#move li img {
        width: 100%;
        margin-top: 0px;
    }

    .login .container {
        padding: 10px;
    }

    .phone-login .wrap {
        grid-template-columns: 28% 72%;
    }

    .modal-content-signup {
        margin: 15% auto 15% auto;
        width: 90%;
        border-radius: 10px;
        position: absolute;
        z-index: 3;
        max-width: none;
    }

    .row-popup {
        display: initial;
    }

    .column-signup {
        max-width: 92%;
        width: 92%;
    }

    .column-signup {
        padding: 0px;
        padding-left: 15px;
    }

    .form-select {
        width: 100%;
    }

    .register-input {
        display: block;
        width: -webkit-fill-available !important;
        padding: 10px;
        outline: none;
        border-radius: 0.25rem;
    }

    .form-element-signup {
        color: #fff;
        margin-top: 10px
    }

    .form-element-signup label {
        color: #fff;
        font-size: 18px;
        font-family: DB-Heavent-Cond;
    }

    .form-element-signup option {
        color: #000;
        font-size: 18px;
        font-family: DB-Heavent-Cond;
    }

    span.psw {
        display: block;
        float: none;
    }

    .cancelbtn {
        width: 100%;
    }

    .modal-login-content {
        margin: 15% auto 15% auto;
        width: 90%;
        border-radius: 10px;
        position: absolute;
        z-index: 3;
        max-width: none;
    }

    .section2 {
        width: 100%;
        height: auto;
        padding: 0;
        margin-top: -80px;
        z-index: 1;
    }

    .section2 .container {
        max-width: 1100px;
        height: auto;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        background-color: #F2F2F2;
        border-radius: 0px;
        box-shadow: none;
    }

    .section2 .container .row {
        padding: 10px;
    }

    .section2 .container .row h1 {
        font-size: 12px;
        top: 10px;
        font-weight: 500;
    }

    .section2 .container .row p {
        width: 70px;
        font-size: 10px;
        top: 0px;
    }

    .section2 .container .row img {
        width: 40%;
    }

    .section1 .container img {
        display: none;
    }

    footer {
        display: block;
        position: fixed;
        bottom: 0;
    }

    footer .footer3 {
        display: none;
    }

    footer .footer1 .container .row {
        padding: 10px;
    }

    footer .footer1 .container .row p {
        font-size: 14px;
    }

    footer .footer4 .container {
        max-width: 1280px;
        height: auto;
        margin: 0 auto;
        padding-top: 0px;
    }

    footer .footer4 .container p {
        font-size: 12px;
    }

    footer .footer4 {
        display: none;
    }

    footer .footer2 {
        width: 100%;
        height: auto;
        padding-bottom: 5px;
        padding-top: 5px;
    }
}

@media screen and (max-width:600px) {
    .phone-login .wrap {
        grid-template-columns: 35% 65%;
    }
}

@media screen and (max-width:400px) {
    .phone-login .wrap {
        grid-template-columns: 42% 58%;
    }
}