@media  screen and (min-width:1351px){
    .best-shoes,.top-games {
        background-image: none;
    }
}
@media  screen  and (max-width:1350px) and (min-width:1250px){
        .best-shoes {
        background-size: 280px 300px;
    }
    .top-games {
        background-size: 256px 300px;
    }
}

@media  screen  and (max-width:1200px) and (min-width:1180px){
    .best-shoes {
        background-size: 310px 300px;
    }
    .top-games {
        background-size: 256px 300px;
    }
}


@media  screen  and (max-width:1180px) and (min-width:1120px){
    .best-shoes {
        background-size: 295px 300px;
    }
    .top-games {
        background-size: 245px 300px;
    }
}

@media  screen  and (max-width:1120px) and (min-width:1085px){
    .best-shoes {
        background-size: 247px 300px;
    }
}

@media screen and (max-width:1200px){
    /****************************** 
        End. Home css | 1200    
     ******************************/
     .banner-text {
        width: 60%;
        padding: 2rem;
    }
}
@media screen and (max-width: 991px) {
    .top-menu:not(.top-link-menu)>li>a {
        display: block;
        padding-left: 0;
        padding-right: 0;
    }
    .top-menu ul>li {
        margin-left: 1.5rem;
        padding: .2rem .1rem;
    }
    .top-menu:not(.top-link-menu)>li {
        display: flex;
        align-items: center;
        align-self: stretch;
        padding-right: 2.2rem;
    }
    .top-menu:not(.top-link-menu) ul {
        display: block;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 20;
        padding-top: .6rem;
        padding-bottom: .6rem;
        min-width: 180px;
        visibility: hidden;
        opacity: 0;
        margin-top: 1px;
        background-color: #fff;
        box-shadow: 2px 5px 8px rgb(51 51 51 / 5%), -2px 5px 8px rgb(51 51 51 / 5%);
        text-transform: capitalize;
    }
    .top-menu:not(.top-link-menu)>li::after {
        font-family: "Font Awesome 5 Pro";
        content: '\f078';
        position: absolute;
        right: 0;
        top: 50%;
        display: inline-block;
        font-size: 1.2rem;
        line-height: 1;
        margin-top: -.7rem;
    }
    .top-menu>li:hover ul,
    .top-menu>li:focus ul {
        visibility: visible;
        opacity: 1;
    }
    .top-menu:not(.top-link-menu):hover ul,
    .top-menu:not(.top-link-menu):focus ul {
        display: block;
    }
    .middle_part {
        justify-content: center;
        grid-template-rows: 95px;
        grid-template-columns: 50px 150px 1fr;
    }
    /* End. header */

    .categrize-controle a {
        text-align: center;
        padding: .75rem 1rem;
        margin: 0 .4rem;
    }
    .brand-img {
        height: 102px;
    }
    #popular-brand-cat .popular-brand-list {
        margin-bottom: 0;
    }
    #mobile-app .mobile-container {
        width: 100%;
        padding: 0;
    }
    .app-store-img {
        width: 100%;
    }
    .app-store-img img {
        width: 45%;
    }
    /*End. most-popular */

    /****************************** 
        End. Home css | 991    
     ******************************/
     .banner-text {
        width: 70%;
        padding: 1.45rem;
    }
     .widget-sizes .nav-category ul li a {
        min-width: 30px;
        min-height: 30px;
        line-height: 30px;
        margin: 2px 2px 0px 0px;
    }
    .widget-title h2{
        font-size: 1.8rem;
    }
    /*End. browse css | 991 */
    /****************************** 
        End. browse css | 991    
     ******************************/


    #latest-news-banner {
        height: 75vh;
    }
    /*End. latest news css | 991 */
    /****************************** 
        End. latest news css | 991    
     ******************************/
     .mega-menu {
        width: 720px;
     }
    .best-shoes {
        background-size: 278px 271px;
    }
    .shoes-img-container {
        background-position: -13px center;
    }
    .shoes-img-container {
        background-position: 4px center;
    }
    .top-games {
        background-size: 241px 245px;
    }

    .social-btns a{
        display: block;
        margin: .2rem;
        width: 10rem;
    }
}


/* Media 768px */

@media screen and (max-width:768px) {
    .header-search {
        width: 280px;
    }
    .brand-img img {
        width: 55%;
    }
    .brand-img {
        height: 70px;
    }
    /* End. popular-brand */

    /****************************** 
        End. Home css | 768   
     ******************************/
    .banner-text {
        width: 80%;
        padding: 1rem 0rem 2rem 2rem;
    }
    .filter-products-container {
        flex-direction: column;
    }
    .filter-products {
        width: 100%;
    }
    #sidebar {
        width: 100%;
        order: 2;
        margin-top: 3rem;
    }
    .widget-area {
        margin-bottom: 1rem;
        border: solid 1px #d0d0d0;
        padding: 1.5rem;
    }
    /*End. browse css | 991 */
    /****************************** 
        End. browse css | 991    
     ******************************/

    .latest-news-slider {
        width: 70%;
    }
    /*End. latest new | 991 */
    /****************************** 
        End. latest new | 991    
     ******************************/
     .mega-menu {
        width: 535px;
    }
    .shoes-img-container {
        background-position: -4px center;
    }
    .best-shoes {
        background-size: 197px 212px;
    }
    .top-games-container .shoes-img-container {
        background-position: 5px center;
    }
    .mega-menu-slider-list {
        height: 245px;
    }
}

/* Media 600 */
@media screen and (max-width:600px){
    .slick-prev{
        display:none !important;
    }
    .slick-next{
        display:none !important;
    }
}

/* Media 580 */
@media screen and (max-width:580px){
    .categrize-controle {
        flex-direction: column;
    }
    .categrize-controle a {
        text-align: center;
        padding: 1rem 1rem;
        margin: 0.3rem;
    }
    #mobile-app .mobile-container {
        width: 85%;
        margin: 0 auto;
        padding: 0 1.8rem;
        flex-direction: column;
    }
    .text-container{
        order: 2;
    }
    /*End. Home | 991 */
    /****************************** 
        End. Home | 991    
     ******************************/

    .best-shoes-container {
        flex-direction: column;
    }
    .shoes-text-container {
        width: 100%;
    }
    .shoes-text-container {
        text-align: left;
        order:2;
        margin-bottom: 2rem;
    }
     .best-shoes-bg {
        background-image: none;
    }
    .shoes-cont {
        width: 100%;
    }
    .shoes-img-container {
        background-position: center 28px;
    }
    .best-game-bg {
        background-image: none;
    }
    .top-games {
        background-image: url(../img/components/shape-2.png);
        background-position: top right;
    }
    .top-games {
        background-size: 158px 245px;
    }
    .best-shoes {
        background-size: 158px 245px;
    }
    /*End. Latest New | 991 */
    /****************************** 
        End. Latest New | 991    
     ******************************/
          .mega-menu{
         width: 500px;
         flex-direction: column;
     }
     .mega-menu-list {
        width: 100%;
     }
     .mega-menu-slider {
        width: 100%;
     }
     #news-nav ul li a{
        display: inline;
    }
    #news-nav ul {
        height: 155px;
        overflow: auto;
        margin-bottom: 0;
    }
    #news-nav ul li{
         display: inline-block;
         width: 48%;
     }
     .news-mega-menu-slider {
         margin-top: 0;
     }
     .mega-menu-slider-list {
        height: 258px;
    }
}

/* Media 500 */
@media screen and (max-width:500px){
    .header-search {
        width: 173px;
    }
    .popular-brand-item{
        flex-wrap: wrap;
        justify-content: left;
    }
    .brand-item {
        width: 33.33%;
    }

    /****************************** 
        End. Home css | 500   
     ******************************/
     .banner-heading {
        padding-top: 0rem;
    }
     .banner-text {
        width: 100%;
        padding: 2rem;
    }
    /*End. browse css | 991 */
    /****************************** 
        End. browse css | 991    
     ******************************/

     .latest-news-slider {
        width: 75%;
    }
    /*End. Latest New | 991 */
    /****************************** 
        End. Latest New | 991    
     ******************************/
     .mega-menu{
        width: 400px;
        flex-direction: column;
    }

}


/* Media 400 */
@media screen and (max-width:400px){
    .banner-search-engine {
        width: 80%;
    }
    .middle_part {
        grid-template-rows: 60px;
        margin-bottom: 1rem;
    }
    .middle_part .brand {
        grid-column: 2/-1;
    }
    .middle_part .search-engine {
        grid-row: 2/-1;
        grid-column: 1/-1;
        width: 100%;
    }
    .header-search {
        width: 100%;
    }

    /* footer */
    .footer-site,
    .footer-navigation{
        margin-bottom: 3.5rem;
    }
    .footer-copyright{
        flex-direction: column;
    }
    .ft-socials ul li {
        padding: 0 1rem;
    }
    .ft-copyright{
        order: 2;
    }


    /*End. home page css */
    /****************************** 
        End. home page css    
     ******************************/

     .latest-news-slider {
        width: 100%;
    }
    .latest-news-slider .latest-news-title, .latest-news-slider .latest-news-subtitle {
        font-size: 7rem;
        line-height: 5rem;
    }
    .latest-news-slider .latest-news-subtitle {
        font-size: 6rem;
    }

    /*End. latest news page css */
    /****************************** 
        End. latest news page css    
     ******************************/
     .mega-menu {
        width: 350px;
     }
     .mega-menu-slider-list {
        height: 215px;
    }

}


/* Media 350 */
@media screen and (max-width:350px){
    .mega-menu {
        width: 300px;
     }
     .mega-menu-slider-list {
        height: 200px;
    }
}


/* Media 300 */
@media screen and (max-width:300px){
    .brand-item {
        width: 50%;
    }
    /* End. Home css */

    .latest-news-slider .latest-news-title, .latest-news-slider .latest-news-subtitle {
        font-size: 6rem;
        line-height: 4rem;
    }
    .latest-news-slider .latest-news-subtitle {
        font-size: 4.5rem;
    }
    /*End. latest news page css */
    /****************************** 
        End. latest news page css    
     ******************************/


    .mega-menu {
        width: 250px;
     }
     .mega-menu-slider-list {
        height: 150px;
    }
}



/* Media 250 */
@media screen and (max-width:250px){
    .mega-menu {
        width: 225px;
     }
     .mega-menu-slider-list {
        height: 140px;
    }
}