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

    .offcanvas-header {
        background: #ececec;
    }

    .offcanvas-body {
        flex-grow: 1;
        padding: 1rem 1rem;
        overflow-y: auto;
    }

    .navbar-nav {
        width: 100%
    }

        .navbar-nav .nav-item a, .navbar-nav .nav-item .btn, .navbar-nav .nav-item button {
            display: block;
            text-align: center;
            width: 100%
        }

        .navbar-nav .nav-item {
            padding: var(--size-16px) 0 !important;
            border-top: 1px solid #e4e4e4;
        }

            .navbar-nav .nav-item:first-child {
                border-top: 0;
                padding-top: 0 !important
            }

    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
    }
}

@media only screen and (max-width: 1800px) {
    html {
        font-size: 90%
    }

    .offcanvas-header {
        background: #ececec;
    }

    .offcanvas-body {
        flex-grow: 1;
        padding: 1rem 1rem;
        overflow-y: auto;
    }

    .navbar-nav {
        width: 100%
    }

        .navbar-nav .nav-item a, .navbar-nav .nav-item .btn, .navbar-nav .nav-item button {
            display: block;
            text-align: center;
            width: 100%
        }

        .navbar-nav .nav-item {
            padding: var(--size-16px) 0 !important;
            border-top: 1px solid #e4e4e4;
        }

            .navbar-nav .nav-item:first-child {
                border-top: 0;
                padding-top: 0 !important
            }

    .navbar-expand-lg .navbar-nav {
        flex-direction: column;
    }
}

@media only screen and (max-width: 1680px) {
    html {
        font-size: 85%
    }
}

@media only screen and (max-width: 1480px) {
    html {
        font-size: 80%
    }

    .steplist li {
        font-size: var(--size-14px)
    }
}

@media only screen and (max-width: 1140px) {
    .carousel-col-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media only screen and (min-width: 991px) {
    body {
        padding: 0 !important;
        overflow-y: auto !important;
    }
}

@media only screen and (max-width: 991px) {
    html {
        font-size: 80%
    }

    .container {
        max-width: 60rem;
    }

    .banner {
        padding: 8rem 0;
    }

    h1 {
        font-size: 2.6rem;
    }

    h2 {
        font-size: 2.2rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    .f-logo img {
        height: 6rem;
    }

    .offcanvas-end {
        width: 20rem;
        border: 0 !important;
    }

    .btn {
        font-size: var(--size-16px);
        padding: var(--size-16px) var(--size-30px);
    }

    .modal .modal-content {
        padding: 2rem 1.5rem;
    }

    .modal .logo {
        width: 15.438rem;
    }

    .list-1-box .info-box p {
        width: 100%;
        max-width: 100%
    }

    .s-box h2 {
        font-size: 1.7rem;
    }

        .s-box h2 br {
            display: none;
        }
}

@media only screen and (max-width: 767px) {
    html {
        font-size: 75%
    }

    .container {
        max-width: 100%;
        padding: 0 var(--size-30px)
    }

    .banner {
        padding: 4.063rem 0;
        background-position: bottom left 55%;
    }

    h1 {
        font-size: 2.25rem;
    }

    /*p br {
        display: none;
    }*/

    .filter-box {
        margin: 3rem auto 0;
        background: transparent;
        overflow: unset;
        box-shadow: none;
        padding: 0
    }

        .filter-box .input-group {
            display: block;
        }

        .filter-box .form-control {
            max-width: 100%;
            width: 100%;
            margin-bottom: var(--size-20px) !important;
            border-radius: var(--size-60px) !important;
            padding: var(--size-10px) var(--size-30px);
            box-shadow: 0 5px 10px rgba(0,0,0,.11);
        }

        .filter-box .btn {
            text-align: center;
            height: var(--size-80px);
            max-width: 100%;
            width: 100%;
            margin-bottom: var(--size-20px) !important;
            border-radius: var(--size-60px) !important;
            padding: var(--size-10px) var(--size-30px);
            box-shadow: 0 5px 10px rgba(0,0,0,.11);
        }

            .filter-box .btn img {
                display: none;
            }

            .filter-box .btn:after {
                content: 'Search';
                font-size: var(--size-20px);
                color: var(--white-color);
            }

    .mv-searchArrow {
        display: none !important;
    }

    .mobile-img img {
        margin-left: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 0;
        margin-top: 3.5rem;
        max-width: 60%
    }

    h3 {
        font-size: 1.5rem;
    }

    .shadow-box {
        padding: var(--size-30px)
    }

    .footer h5 {
        margin-top: var(--size-20px);
        margin-bottom: .6rem
    }

    .f-logo img {
        height: 6rem;
    }

    .filter-box .input-group .form-control + .form-control {
        border-left: 0;
    }

    h2 {
        font-size: 2rem;
    }

    .owl-dots {
        margin-top: var(--size-42px);
    }

    .sec-pd-90 {
        padding: var(--size-60px) 0;
    }

    .news-img-box {
        padding-right: var(--size-15px);
    }

        .news-img-box:before {
            width: calc(100% - 0.938rem)
        }

    .store-img {
        height: 3.5rem;
    }

    .list-1-box {
        display: block !important;
    }

        .list-1-box .info-box {
            padding: 1rem 0;
        }

    .banner.inner {
        height: auto;
        min-height: 17rem;
    }
    /*.steplist{flex-wrap: wrap}
	.steplist li:after{height: var(--size-42px);width: var(--size-42px);top: var(--size-8px)}
	.steplist li{flex: 0 0 50%;width: 50%;max-width: 50%;margin: 0;border-top: 1px solid var(--white-color);}*/
    .profile-pic {
        height: 3rem;
        width: 3rem;
    }

    .currentLocationBox {
        width: 100%;
        margin-right: 0rem;
    }

    @media only screen and (min-width: 576px) {
        .modal-dialog {
            max-width: 33.75rem;
        }

        .currentLocationBox {
            width: 100%;
            margin-right: 0rem;
        }

        @media only screen and (max-width: 576px) {
            html {
                font-size: 75%
            }

            .steplist li {
                height: var(--size-42px)
            }

                .steplist li:after {
                    content: '';
                    display: block;
                    position: absolute;
                    height: var(--size-42px);
                    width: var(--size-42px);
                    right: -1.4rem;
                    top: 0;
                    border: 1px solid var(--white-color);
                    background: var(--alternate-color);
                    border-left: 0;
                    border-bottom: 0;
                    transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                    -moz-transform: rotate(45deg);
                    -webkit-transform: rotate(45deg);
                    z-index: 1;
                }
            /*.steplist li {font-size: var(--size-16px)}*/
            /*.steplist li{flex: 0 0 100%;width: 100%;max-width: 100%;}*/
            /*.profile-text{display: none;}*/
            .s-box h2 {
                font-size: 1.4rem;
            }

            .currentLocationBox {
                width: 100%;
                margin-right: 0rem;
            }

            @media only screen and (max-width: 440px) {
                html {
                    font-size: 75%;
                }

                body {
                    font-size: var(--size-16px);
                }

                .container {
                    padding: 0 var(--size-20px);
                }

                h1 {
                    font-size: 1.9rem;
                }

                .filter-box .form-control, .filter-box .btn {
                    height: var(--size-60px);
                }

                .btn.btn-lg {
                    font-size: var(--size-16px);
                    padding: var(--size-16px) var(--size-42px);
                }

                .store-img {
                    height: 3rem;
                }

                .shadow-box {
                    padding: var(--size-20px);
                }

                .banner {
                    padding: 3.8rem 0;
                    background-position: bottom left 65%;
                }

                .filter-box .form-control, .filter-box .btn:after {
                    font-size: var(--size-16px);
                }

                .owl-dots {
                    margin-top: var(--size-30px);
                }

                .currentLocationBox {
                    width: 100%;
                    margin-right: 0rem;
                }
            }