/**
* start min to max devices
*/

@media (max-width: 575.98px) {
    .grid-col {
        grid-template-columns: repeat(1, 1fr);
    }
    .pre-login,
    .cart-slide-box,
    .sidebar-navigation,
    .input-md {
        width: 100% !important;
        max-width: 100%;
    }
    .container {
        max-width: 100%;
    }
    /**5-11*/
    .sub_panel_fixed {
        left: 30%;
    }

    #product_lists.cards-grid {
        grid-gap: var(--s2);
        grid-template-columns: repeat(auto-fit, minmax(46.33%, 45%));
    }

    .options .quick-add {
        padding: var(--s1);
    }

    .item figure img {
        min-height: auto;
    }

    .testimonial-grid,
    .grid-col-3,
    .grid-col-2,
    .group {
        grid-template-columns: auto !important;
    }

    .features,
    .product-box,
    .easy-zoom-box {
        flex-direction: column;
    }

    .categories > ul {
        flex-direction: column;
        align-items: center;
    }

    .categories > ul > li {
        flex: 1;
        max-width: 100%;
        margin-bottom: var(--margin-lg);
    }

    .categories figure img {
        width: 235px;
    }

    .testimonial {
        padding: var(--s2) !important;
        margin-bottom: var(--margin-lg);
    }

    .testimonial:last-child {
        margin-bottom: 0;
    }

    .size-70 {
        width: 100%;
    }

    figure.brand,
    .hidden__space {
        display: none;
    }

    /* Slider and margin*/

    .gutter {
        margin-bottom: var(--s20) !important;
    }

    .owl-carousel .owl-slide {
        height: 360px;
    }

    .signup__dialog button,
    .show_now_dialog button {
        margin: auto;
    }

    .show_now_dialog h2 {
        font-size: var(--s28);
    }

    .testimonial-carousel .owl-item.center {
        margin: auto;
        transform: none;
        max-width: 325px;
    }
    .testimonial-carousel .owl-dots .owl-dot span,
    .testimonial-carousel .owl-dots .owl-dot.active span {
        width: 15px;
        height: 15px;
    }

    .testimonial-grid {
        padding: 0;
    }

    .content-wrap h3 {
        max-width: 200px;
    }
}

@media (min-width: 768px) {
    .container,
    .item-wrapper {
        max-width: 100%;
    }
    .sub_panel_fixed {
        left: 30%;
    }

    .sub_panel_fixed .sub-menu.three-col {
        width: 550px;
    }

    .sub_panel_fixed .sub-menu.auto-fit-col {
        width: 560px;
    }

    .sub_panel_fixed .sub-menu {
        overflow-x: auto;
    }
}

@media (max-width: 768px) {
    .pre-login {
        width: 75%;
    }
    .container {
        max-width: 100%;
    }

    .categories > ul {
        flex-direction: column;
        align-items: center;
    }

    .categories > ul > li {
        flex: 1;
        max-width: 100%;
    }

    .main-product > ul > li .options {
        display: none;
    }

    .main-product > ul > li {
        margin-bottom: var(--s4);
    }

    figure.brand,
    .hidden__space {
        display: none;
    }
}

@media (min-width: 991.98px) {
    .container,
    .item-wrapper {
        max-width: 960px;
        margin: 0 auto;
    }
    #product_lists.cards-grid {
        grid-gap: var(--s2);
        grid-template-columns: repeat(auto-fit, minmax(23.33%, 0%));
    }

    .options .quick-add {
        padding: var(--s1);
    }
    .sub_panel_fixed {
        left: 31%;
    }

    .sub_panel_fixed .sub-menu.three-col {
        width: 550px;
    }

    .testimonial-carousel .owl-item.center {
        margin: auto;
        transform: none;
        max-width: 325px;
    }
    .testimonial-carousel .owl-dots .owl-dot span,
    .testimonial-carousel .owl-dots .owl-dot.active span {
        width: 15px;
        height: 15px;
    }
}

@media (min-width: 1180px) {
    .sub_panel_fixed {
        left: 36%;
    }
    .sub_panel_fixed .sub-menu.two-col {
        width: 360px;
    }

    .sub_panel_fixed .sub-menu.three-col {
        width: 750px;
    }
    .container,
    .item-wrapper {
        max-width: 1140px;
    }

    .modal-lg {
        max-width: 1024px;
    }

    #product_lists.cards-grid,
    .features-grid {
        grid-gap: var(--s4);
        grid-template-columns: repeat(auto-fit, minmax(247px, 20%));
    }

    .sub_panel_fixed .sub-menu.auto-fit-col {
        width: 800px;
    }
}