@media (min-width:320px) and (max-width:800px) {
    .like-info .star {
            width: 20px;
    }
    .like-info {
        font-size: 16px;
    }
}

@media (min-width: 768px) {

    /* start platform section */
    .platform .scooter .scooter-man {
        width: 302px;
        height: 235px;
    }

    .platform .scooter .list li {
        width: 120px;
        animation: float 5s linear infinite;
    }

    .platform .scooter .list li:nth-child(2) {
        margin-top: -95px;
        animation: float1 4s linear infinite;
    }

    .platform .scooter .list li:last-child {
        animation: float2 6s linear infinite;
    }

    .platform .container {
        background: url('../img/platform-bg.png') no-repeat;
        background-size: 100% 100%;
    }

    /* end platform section */


    footer {
        background: url('../img/footer-bg.png');
        background-size: cover;
    }

    .table-grid {
        height: 220px;
        min-height: 220px;
        max-height: 220px;
    }

}

@media (min-width: 1024px) {

    /* start header css */
    header .logo-container .container .menu-links {
        width: fit-content;
        position: relative;
        box-shadow: none;
        background-color: transparent;
    }

    header .logo-container .container .menu-links ul .links-li {
        border-bottom: none;
        margin-right: 20px;
        padding: 0;
        position: relative;
    }

    header .logo-container .container .menu-links ul .links-li .link {
        transition: none;
        padding: 3px;
        position: relative;
        z-index: 1;
    }

    header .login a {
        font-size: 15px;
    }

    header .logo-container .container .menu-links ul .links-li .link:hover {
        color: var(--primaryColor);
    }

    header .sticky {
        padding: 1rem 1.5rem;
    }

    header .sticky .container {
        position: relative;
        padding: 1rem 0;
    }

    /* end header css */

    /* start banner section */
    .banner::before,
    .banner::after {
        content: '';
        background: url('../img/half-circle.svg') no-repeat;
        background-size: 100%;
        position: absolute;
        width: 120px;
        height: 120px;
        animation: rotate 7s linear infinite;
    }

    .banner::before {
        left: -70px;
        bottom: 70px;
    }

    .banner::after {
        right: -70px;
        top: 130px;
    }

    .bannner .banner-container {
        height: 350px;
    }

    .banner .banner-img::before {
        content: '';
        background-image: url('../img/doted-circle.svg');
        background-repeat: no-repeat;
        background-size: 100%;
        width: 450px;
        height: 450px;
        position: absolute;
        inset: -80px 0 0 0;
        z-index: -1;
    }

    /* end banner section */


    .inner-banner {
        padding: 3rem 0;
    }

    /*  */

    .restaur-details .detail-img img,
    .restaur-details .restro-img {
        width: 100%;
        height: 450px;
        border-radius: 7px;
        object-fit: cover;
    }

}


@media (min-width: 1200px) {

    /* start common css */
    section {
        padding: var(--lgPadding);
    }

    /* end common css */

    /* header .logo-container .container .menu-links {
        width: 50%;
    } */

    /* start cities section */
    /* .cities {
        height: 400px;
    } */

    /* end cities section */

    /* start simple-process section */
    .simple-process .process-list .process .process-img::before {
        content: '';
        background: url('../img/arrow.gif') no-repeat;
        background-size: contain;
        position: absolute;
        right: -193px;
        top: -36px;
        width: 170px;
        height: 170px;

    }

    .simple-process .process-list .process .process-img.content-none:before {
        content: none;
    }

    /* end simple-process section */

}

@media (min-width: 1366px) {

    .bannner .banner-container {
        height: 450px;
    }
}

@media (min-width: 1600px) {

    /* header .logo-container .container .menu-links {
        width: 43%;
    } */
    .simple-process .process-list .process .process-img::before {
        right: -167px;
    }
}


@media (min-width: 1800px) {}


@media (min-width: 1367px) and (max-width: 1920px) {}

@media (min-width: 1920px) {}