/*****************************
RESPONSIVE
******************************/

   @media(max-width:1100px) {

       .search {

           margin: 0 20px;

       }

       #input {
           display: none;
       }

       #space {
           margin-left: 20px;
       }

       .left h1 {

           font-size: 45px;
           line-height: 55px;

       }


       .features {

           grid-template-columns: repeat(2, 1fr);

       }

       .category-grid {

           grid-template-columns: repeat(3, 1fr);

       }

       .product-grid {

           grid-template-columns: repeat(2, 1fr);

       }

       .promo-grid {

           grid-template-columns: 1fr;

       }

       .stats {

           grid-template-columns: repeat(2, 1fr);

           gap: 40px;

       }

       .why {

           grid-template-columns: 1fr;

       }



       .footer-container {

           grid-template-columns: repeat(2, 1fr);

       }

       .brand-grid {

           grid-template-columns: repeat(3, 1fr);

       }

       .flash-sale {

           flex-direction: column;

           text-align: center;

           padding: 40px;

       }

       .countdown {

           justify-content: center;

       }

       .flash-left h2 {

           font-size: 40px;

       }


   }

   @media(max-width:900px) {

       .top-bar {

           display: none;

       }

       header {

           flex-wrap: wrap;

       }

       .search {

           order: 3;
           width: 100%;
           margin-top: 20px;

       }

       #input {
           display: none;
       }

       #space {
           margin-left: 20px;
       }

       nav {

           flex-wrap: wrap;

       }

       .menu {

           display: none;
           width: 100%;
           margin-top: 20px;
           flex-direction: column;

       }

       .menu.show {

           display: flex;

       }

       .mobile-btn {

           display: block;

       }

       .slide {

           flex-direction: column;
           text-align: center;

       }

       .left,
       .right {

           width: 100%;

       }

       .left {

           margin-bottom: 40px;

       }

       .left h1 {

           font-size: 40px;
           line-height: 50px;

       }

       .features {

           grid-template-columns: 1fr;

       }

       .category-grid {

           grid-template-columns: repeat(2, 1fr);

       }

       .product-grid {

           grid-template-columns: 1fr;

       }

       .section-title {

           font-size: 28px;

       }

       .large {

           padding: 40px;

           min-height: 320px;

       }

       .promo-content h2 {

           font-size: 30px;

           line-height: 40px;

       }

       .stats {

           grid-template-columns: 1fr;

       }

       .why-content h2 {

           font-size: 32px;

           line-height: 42px;

       }

       .why-list {

           grid-template-columns: 1fr;

       }

       .footer-container {

           grid-template-columns: 1fr;

           text-align: center;

       }

       .socials {

           justify-content: center;

       }

       .brand-grid {

           grid-template-columns: repeat(2, 1fr);

       }

       .newsletter h2 {

           font-size: 32px;

       }

       .flash-sale {

           flex-direction: column;

           text-align: center;

           padding: 40px;

       }

       .countdown {

           justify-content: center;

       }

       .flash-left h2 {

           font-size: 40px;

       }

       .review-header {

           flex-direction: column;

           gap: 20px;

       }

       .review-top {

           flex-direction: column;

           text-align: center;

       }

       .review-actions {

           flex-wrap: wrap;

       }

       .review-image {

           width: 100%;

       }


   }

   @media(max-width:600px) {

       header {

           padding: 20px;

       }

       #input {
           display: none;
       }

       #space {
           margin-left: 20px;
       }

       nav {

           padding: 20px;

       }

       .hero {

           padding: 20px;

       }

       .slide {

           padding: 30px;

       }

       .left h1 {

           font-size: 32px;
           line-height: 40px;

       }

       .left p {

           font-size: 15px;

       }

       .features {

           grid-template-columns: 1fr;

       }

       .category-grid {

           grid-template-columns: repeat(2, 1fr);

       }

       .product-grid {

           grid-template-columns: 1fr;

       }

       .section-title {

           font-size: 28px;

       }

       .large {

           padding: 40px;

           min-height: 320px;

       }

       .promo-content h2 {

           font-size: 30px;

           line-height: 40px;

       }

       .stats {

           grid-template-columns: 1fr;

       }

       .why-content h2 {

           font-size: 32px;

           line-height: 42px;

       }

       .why-list {

           grid-template-columns: 1fr;

       }


       .footer-container {

           grid-template-columns: 1fr;

           text-align: center;

       }

       .socials {

           justify-content: center;

       }

       .brand-grid {

           grid-template-columns: repeat(2, 1fr);

       }

       .newsletter h2 {

           font-size: 32px;

       }

       .time-box {

           width: 75px;

           height: 75px;

       }

       .time-box h1 {

           font-size: 24px;

       }

       .flash-left h2 {

           font-size: 32px;

       }

       .flash-sale {

           padding: 30px 20px;

       }

       .review-header {

           flex-direction: column;

           gap: 20px;

       }

       .review-top {

           flex-direction: column;

           text-align: center;

       }

       .review-actions {

           flex-wrap: wrap;

       }

       .review-image {

           width: 100%;

       }


   }