@media screen and (min-width: 600px) {
                 
    body {
        min-height: 100vh;
    }

    main {
        min-height: 100%;
        flex: 1 1 auto;
    }

}

@media screen and (max-width: 1200px) {

    main {
        width: 100%;
        padding: 0 15px;
    }

}

@media screen and (max-width: 980px) {

    .aboutBoxList {
        flex-direction: column;
    }

    .aboutBoxListOne, .aboutBoxListTwo {
        width: 100%;
    }

}

@media screen and (max-width: 650px) {
    
    .header-box, .footer-box {
        flex-direction: column;
        gap: 20px;
    }

    .aboutBoxListOneItems p, .aboutBoxListTwoItems p {
        height: auto;
    }

    .accountAddAuto {
        width: 100%;
    }

    .accountCar {
        width: 100%;
    }

    .qrCardBoxImg {
        flex-direction: column;
    }

    .qrCardBoxImgStr {
        rotate: 90deg;
    }

}

@media screen and (max-width: 480px) {

    h1, h2 {
        font-size: 1.2em;
    }

    .qrCardBoxButton {
        width: 100%;
    }

    .loginMethod, .loginForm {
        width: 100%;
    }

    .transportBoxForm {
        display: block;
        width: 100%;
    }

    .transportBoxForm > div {
        width: 100%;
        border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
    }

    .transportBoxForm > a {
        display: block;
        width: 100%;
        border-radius: 0 0 5px 5px;
        -webkit-border-radius: 0 0 5px 5px;
    }

    .transportBox h1 {
        font-size: 1.4rem;
    }

    .transportItem {
        flex-direction: column;
    }

    .transportItemPhoto {
        width: 100%;
    }

    .boxAccountSendAppeals {
        flex-direction: column;
    }
}