/*Extra small devices (portrait phones, less than 576px)*/

@media (max-width: 575.98px) {
    .navbar-mobile .upper-nav {
        height: 60px;
    }

    .navbar-mobile .nav-item .nav-link,
    .navbar-mobile .sideNavPages .nav-item .nav-link {
        line-height: 10px;
        font-family: "Roboto", sans-serif;
        color: #1b3e7d !important;
    }

    .navbar-mobile .side-nav .navbar-nav .nav-item ul li.nav-item .nav-link {
        background-color: #1b3e7d;
        font-family: "Roboto", sans-serif;
        line-height: 10px;
    }

    .navbar-mobile .side-nav .navbar-nav .nav-item {
        margin: 4px;
    }

    .site-logo img {
        display: flex;
    }

    .header-area .header-content {
        background: #1b3e7d !important;
    }

    .header-area.header-style-three .header-content,
    .header-area.header-style-two .header-content {
        background: #fff !important;
    }

    .header-area.header-style-three .sidemenu_btn,
    .header-area.header-style-two .sidemenu_btn,
    .header-area.header-style-three .sidemenu_btn .navbar-nav .nav-link:hover,
    .header-area.header-style-two .sidemenu_btn .navbar-nav .nav-link:hover,
    .header-style-three .side-nav .navbar-nav .nav-link:hover {
        color: #3894f9 !important;
    }

    .mobile-order-1 {
        order: 1;
    }

    .mobile-order-2 {
        order: 2;
    }

    .mobile-font-2rem {
        font-size: 2rem !important;
    }

    .overflow-hidden {
        height: 100%;
    }

    .mobile-pb-100 {
        padding-bottom: 100%;
    }

    .banner-content h1 {
        line-height: 35px;
        font-size: 2rem;
    }

    .btn.btn-blue {
        padding: 12px 20px;
    }

    .header-title,
    .recipes-breadcrumb-title h4,
    .recipes-detail-info h4,
    .articles-info h1,
    .articles-info h2,
    .articles-info h3,
    .articles-info h4,
    .articles-info h5,
    .articles-info h6 {
        line-height: 32px;
    }

    .text-quote {
        line-height: 25px;
    }

    .about-content p,
    .title-content p,
    .product-detail-desc p,
    .product-detail-title p,
    .recipes-share h6,
    .recipes-detail-info p,
    .recipes-detail-info ul li,
    .recipes-detail-info ol li {
        line-height: 20px;
    }

    .header-title,
    .product-detail-title h1,
    .product-detail-title h2,
    .product-detail-title h3,
    .product-detail-title h4,
    .product-detail-title h5,
    .product-detail-title h6,
    .articles-info h1,
    .articles-info h2,
    .articles-info h3,
    .articles-info h4,
    .articles-info h5,
    .articles-info h6 {
        font-size: 24px;
    }

    .product-detail-desc h1,
    .product-detail-desc h2,
    .product-detail-desc h3,
    .product-detail-desc h4,
    .product-detail-desc h5,
    .product-detail-desc h6 {
        font-size: 18px !important;
    }

    .value-list h6,
    .brand-info-detail h6,
    .category-info-detail h6,
    .recipes-breadcrumb-title h4,
    .recipes-detail-info h4 {
        font-size: 20px;
    }

    .text-quote,
    .recipes-share h6,
    .card-contact h6,
    .contact-form label {
        font-size: 16px;
    }

    .banner-content p,
    .title-content p,
    .about-content p,
    .brand-info-detail p,
    .category-info-detail p,
    .btn,
    .product-detail-desc p,
    .product-detail-title p,
    .product-detail-desc ul li,
    .recipes-detail-info p,
    .recipes-detail-info ul li,
    .recipes-detail-info ol li,
    .card-contact p,
    .contact-form input,
    .contact-form textarea {
        font-size: 14px;
    }

    .small-header-title,
    .btn-share {
        font-size: 12px;
    }

    .value-list h6 {
        margin-bottom: 5px;
    }

    .category-img,
    .brand-img {
        text-align: center;
    }

    .category-img img,
    .brand-img img {
        width: 80%;
    }

    .contact-form-img img {
        height: 350px;
    }

    .contact-form input {
        height: calc(1.5em + 0.75rem + 8px);
    }

    .banner-img img {
        height: 200px;
        border-radius: 8px;
    }
}

/*Small devices (landscape phones, 576px and up)*/

@media (max-width: 767px) {
    .overflow-hidden {
        height: 100%;
    }

    .mobile-pb-100 {
        padding-bottom: 100%;
    }

    .nav-icon {
        display: none;
    }

    .navbar-mobile .upper-nav {
        height: 60px;
    }

    .point-img {
        position: relative;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

    .point-img-info {
        padding: 25px;
    }

    .product-content,
    .brand-product-list,
    .category-product-list {
        flex-direction: column;
    }

    .product-desc {
        width: auto;
        height: 100%;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }

    .product-img {
        border-bottom-left-radius: 0px;
        border-top-right-radius: 8px;
    }

    .testi-content {
        flex-direction: column;
    }

    .testi-img,
    .testi-desc {
        width: 100%;
    }

    .social__icons {
        justify-content: center;
        align-items: center;
    }

    .w-m-100-d-50,
    .w-m-100-d-80 {
        width: 100%;
    }

    .recipes-detail-img img {
        height: 250px;
    }

    .card-contact {
        padding: 1rem;
    }
}

/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) {

    /*register account margin left*/
    .about_content .register-account {
        margin-left: 50px;
    }

    .search-listing .listing-search-scroll {
        height: 38vh;
    }
}

@media (min-width: 1367px) {
    .product-listing-products .product-list .product-item .p-item-img .listing-cart-icon {
        top: 50%;
        width: 40px;
        height: 40px;
    }

    .search-listing .listing-search-scroll {
        height: 47vh;
    }
}

@media (min-width: 1600px) {
    .grid-wrapper {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-auto-rows: 200px;
        grid-gap: 20px;
    }
}