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

    .petPortalContent {
        height: 30rem;
    }

    .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%
    }

    .petPortalContent {
        height: 34rem;
    }

    .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%
    }

    .petPortalContent {
        height: 36rem;
    }
}

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

@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%
    }

    .petPortalContent {
        height: unset;
    }

    .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 {
        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;
    }

    .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;
    }

    .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)
        }

   
    .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;
    }
}

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

    .minW-150 {
        min-width: 95px;
    }

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

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

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

    .dateCalendarAvailableSlots {
        font-size: var(--size-13px);
    }

    .dateCalendarBox tr td span {
        min-height: 3.5rem;
        padding-left: var(--size-4px);
        padding-right: var(--size-4px);
        margin-left: var(--size-4px);
        margin-right: var(--size-4px);
    }

    .dateCalendarBoxiFrame tr td span {
        min-height: 3.5rem;
        padding-left: var(--size-4px);
        padding-right: var(--size-4px);
        margin-left: var(--size-4px);
        margin-right: var(--size-4px);
    }

    .minW-150 {
        min-width: 80px;
    }

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

    h1 {
        font-size: 1.9rem;
    }

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

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

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

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

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

    .minW-150 {
        min-width: 60px;
    }
}