@media screen and (max-width:1025px){
    .open-list-active {
        width: 40% !important;
    }

    .open-list-active ~ .product-layout {
        width: 60% !important;
    }

    .product-card.active-card {
        width: calc(33.33%);
    }
}


@media screen and (max-width:992px){
    .home-banner-wrapper .home-banner-wrap .banner-overlay .banner-title {
        font-size: 20px;
    }
    
    .home-banner-wrapper .home-banner-wrap .banner-overlay .banner-desc {
        font-size: 12px;
    }
    
    .home-banner-wrapper .home-banner-wrap .banner-overlay > button {
        font-size: 11px;
    }

    .header-container .header-left-container{
        flex-direction: row-reverse;
    }

    .header-container .header-left-container .header-menu {
        width: 57%;
        margin-left: 1rem;
    }

    .header-container .header-left-container .header-logo {
        width: 35%;
    }

    .header-container .header-right-container {
        padding-right: 20px;
    }

    .open-list-container {
        width: 15%;
    }
}
@media screen and (max-width:768px){
    .home-banner-wrapper {
        display: none;
    }
    
    .home-banner-wrapper-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home-banner-wrapper-mobile .home-banner-wrap .home-banner-wrap-image > img {
        width: 100%;
    }
    
    .home-banner-wrapper-mobile .home-banner-wrap .banner-overlay {
        padding: 5%;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    .home-banner-wrapper-mobile .home-banner-wrap .banner-overlay .banner-title {
        font-size: 20px;
    }
    
    .home-banner-wrapper-mobile .home-banner-wrap .banner-overlay .banner-desc {
        font-size: 15px;
        margin: 15px 0;
    }
    
    .home-banner-wrapper-mobile .home-banner-wrap .banner-overlay > button {
        background: none;
        padding: 5px;
    }

    .product-layout .product-card {
        width: calc(33%);
    }
    
}

@media screen and (max-width:767px){
    .product__carousel{
        display: none;
    }

    .product-left {
        width: 100% !important;
    }

    .product-right {
        width: 100% !important;
    }

    .product-layout .product-card {
        box-shadow: none;
    }

    .category-list-container.open-list-active {
        position: fixed;
        inset: 0;
        width: 100% !important;
        z-index: 99;
        height: 100%;
    }

    .category-content-wrapper .category-list-container .bf-panel-wrapper .bf-attr-block .bf-attr-header {
        color: #666;
    }

    .bf-cell label {
        color: #666;
    }

    .filter-close-wrapper #close-filter {
        z-index: 999999 !important;
    }

    .filter-close-wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 0.5rem;
        max-width: 100%;
    }
    
    button#close-filter {
        position: unset !important;
    }

    .open-list-container {
        width: 18%;
    }
}

@media screen and (max-width:553px){
    .prod-colors .colors-img {
    width: 22%;
    }

    .similar-card::before,
    .similar-card::after{
        opacity: 1;
        visibility: visible;
    }

    .product-layout .product-card {
        width: calc(50%);
    }

    .header-container .header-left-container .header-menu {
        width: 2%;
    }

    .header-container .header-left-container .header-logo {
        width: 50%;
    }

    .open-list-container{
        width: 30%;
    }

    .open-list-container > button > span {
        font-size: 16px;
        margin-left: 0.5rem;
    }

    .footerwebsite .footer-bottom {
        justify-content: center;
    }

    .footer-list > ul > li > a {
        text-align: center;
        display: flex;
    }
}

@media screen and (max-width:426px){
    .prod-colors .colors-img {
        width: 22%;
    }

    .header-container .header-left-container .header-logo {
        width: 60%;
    }

    .header-container .header-left-container .header-menu {
        margin-left: 0rem;
    }

    .header-container .header-right-container {
        padding-right: 5px;
    }
}