*{
                    margin: 0px;
                    padding: 0px;
                    box-sizing: border-box;
                  }
                  #menu-btn,#close-btn{
                    display: none;
                  }
                  #showMega{
                    display: none;
                  }
                  nav{
                  position: fixed; 
                  z-index: 99;
                  width: 100%;
                  
                  background: #242526;
                  }
                  
                  
                  #bottom-nav{
                    padding-top: 30px;
                    /* border: 3px solid red; */
                    align-items: center;
                    width: 95%;
                    height: auto;
                    display: flex;
                    margin-inline: auto;
                    justify-content: space-evenly;
                  }
                  #bottom-nav>div:nth-child(2){
                    display: flex;
                    width: 55%;
                    /* border: 2px solid red; */
                    align-items: center;
                  }
                  #bottom-nav>div:nth-child(2),#bottom-nav>div:nth-child(3){
                    margin-top: 50px;
                  }
                  #bottom-nav >div{
                    /* border: 2px solid green; */
                    margin-right: 30px;
                  }
                  
                  #bottom-nav >div:nth-child(2) span{
                    padding: 12px 18px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                   
                  }
                  #bottom-nav >div:nth-child(2) form input{
                    padding: 12px 18px;
                    
                  }
                  #bottom-nav > div:nth-child(1){
                    margin-top: 50px;
                  }
                  #bottom-nav >div:nth-child(1){
                    padding: 12px 18px;
                    display: flex;
                    width: 25%;
                  
                    align-items: center;
                  
                  }
                  #bottom-nav >div:nth-child(3){
                    padding: 12px 18px;
                    display: flex;
                    width: 45%;
                   
                    align-items: center;
                  }
                  
                  #bottom-nav >div:nth-child(1) img{
                    width: 80px;
                    height: 80px;
                  
                  }
                  
                  
                  #bottom-nav >div:nth-child(1) span{
                    font-size: 32px;
                    color: gray;
                    font-weight: bold;
                  }
                  #bottom-nav>div:nth-child(2) #filterbtn{
                    background-color: #FFC107;
                    padding: 10px 18px;
                    font-size: 23px;
                    border: none;
                    color: white;
                    cursor: pointer;
                    font-family: 'Courier New', Courier, monospace;
                    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
                  }
                  #bottom-nav>div:nth-child(2) #productname{
                    background-color: #ECEFF1;
                    border: none;
                    outline: none;
                    font-size: 21px;
                    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
                  }
                  #bottom-nav>div:nth-child(3) a{
                    text-decoration: none;
                  } 
                  #bottom-nav>div:nth-child(3) a i{
                    font-size: 46px;
                    margin-right: 20px;
                    color: #4CAF50;
                  }
                  #bottom-nav>div:nth-child(3) a span{
                    color: gray;
                    font-size: 24px;
                    font-family: 'Rubik', sans-serif;
                  }
                  
                  #account-div > a{
                    color: white;
                    font-size: 18px;
                    font-weight: 600;
                    margin-right: 15px;
                    text-decoration: none;
                    }
                  nav .wrapper{
                  position: relative;
                  width: 100%;
                  padding: 0px 30px;
                  height: 70px;
                  line-height: 70px;
                  margin: auto;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  }
                  .wrapper .logo a{
                  color: #f2f2f2;
                  font-size: 30px;
                  font-weight: 600;
                  text-decoration: none;
                  }
                  .wrapper .nav-links{
                  display: inline-flex;
                  }
                  .nav-links li{
                  list-style: none;
                  }
                  .nav-links li a{
                  color: #f2f2f2;
                  text-decoration: none;
                  font-size: 18px;
                  font-weight: 500;
                  padding: 9px 15px;
                  border-radius: 5px;
                  transition: all 0.3s ease;
                  }
                  .nav-links li a:hover{
                  background: #3A3B3C;
                  }
                  .nav-links .mobile-item{
                  display: none;
                  }
                  .nav-links .drop-menu{
                  position: absolute;
                  background: #242526;
                  width: 180px;
                  line-height: 45px;
                  top: 85px;
                  opacity: 0;
                  visibility: hidden;
                  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
                  }
                  .nav-links li:hover .drop-menu,
                  .nav-links li:hover .mega-box{
                  transition: all 0.3s ease;
                  top: 70px;
                  opacity: 1;
                  visibility: visible;
                  }
                  .drop-menu li a{
                  width: 100%;
                  display: block;
                  padding: 0 0 0 15px;
                  font-weight: 400;
                  border-radius: 0px;
                  }
                  .mega-box{
                  position: absolute;
                  left: 0;
                  width: 100%;
                  padding: 0 30px;
                  top: 85px;
                  opacity: 0;
                  visibility: hidden;
                  }
                  .mega-box .content{
                  background: #242526;
                  padding: 25px 20px;
                  display: flex;
                  width: 100%;
                  justify-content: space-between;
                  box-shadow: 0 6px 10px rgba(0,0,0,0.15);
                  }
                  .mega-box .content .row{
                  width: calc(25% - 30px);
                  line-height: 45px;
                  margin: auto;
                  }
                  .content .row img{
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  }
                  .content .row header{
                  color: #f2f2f2;
                  font-size: 20px;
                  font-weight: 500;
                  }
                  .content .row .mega-links{
                  margin-left: -40px;
                  border-left: 1px solid rgba(255,255,255,0.09);
                  }
                  .row .mega-links li{
                  padding: 0 20px;
                  }
                  .row .mega-links li a{
                  padding: 0px;
                  padding: 0 20px;
                  color: #d9d9d9;
                  font-size: 17px;
                  display: block;
                  }
                  .row .mega-links li a:hover{
                  color: #f2f2f2;
                  }
                  .wrapper .btn{
                  color: #fff;
                  font-size: 20px;
                  cursor: pointer;
                  display: none;
                  }
                  .wrapper .btn.close-btn{
                  position: absolute;
                  right: 30px;
                  top: 10px;
                  }
                  /* ***************************** bottom nav bottom nav *********************** */
                  /* ***************************** bottom nav bottom nav *********************** */
                  /* ***************************** bottom nav bottom nav *********************** */
                  #bottom-nav{
                    padding-top: 30px;
                    /* border: 3px solid red; */
                    align-items: center;
                    width: 95%;
                    height: auto;
                    display: flex;
                    margin-inline: auto;
                    justify-content: space-evenly;
                  }
                  #bottom-nav>div:nth-child(2){
                    display: flex;
                    width: 55%;
                    /* border: 2px solid red; */
                    align-items: center;
                  }
                  #bottom-nav>div:nth-child(2),#bottom-nav>div:nth-child(3){
                    margin-top: 50px;
                  }
                  #bottom-nav >div{
                    /* border: 2px solid green; */
                    margin-right: 30px;
                  }
                  
                  #bottom-nav >div:nth-child(2) span{
                    padding: 12px 18px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  }
                  #bottom-nav >div:nth-child(2) form input{
                    padding: 12px 18px;
                    
                  }
                  #bottom-nav > div:nth-child(1){
                    margin-top: 50px;
                  }
                  #bottom-nav >div:nth-child(1){
                    padding: 12px 18px;
                    display: flex;
                    width: 25%;
                  
                    align-items: center;
                  
                  }
                  #bottom-nav >div:nth-child(3){
                    padding: 12px 18px;
                    display: flex;
                    width: 45%;
                   
                    align-items: center;
                  }
                  
                  #bottom-nav >div:nth-child(1) a img{
                    width: 80px;
                    height: 80px;
                  
                  }
                  
                  
                  #bottom-nav >div:nth-child(1) span{
                    font-size: 32px;
    color:rgb(255, 106, 106);
   font-family: Apple Chancery, cursive;
    font-weight: bold;


                  }
                  #bottom-nav>div:nth-child(2) #filterbtn{
                    background-color: #FFC107;
                    padding: 10px 18px;
                    font-size: 23px;
                    border: none;
                    color: white;
                    cursor: pointer;
                    font-family: 'Courier New', Courier, monospace;
                    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
                  }
                  #bottom-nav>div:nth-child(2) #productname{
                    background-color: #ECEFF1;
                    border: none;
                    outline: none;
                    font-size: 21px;
                    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
                  }
                  #bottom-nav>div:nth-child(3) a{
                    text-decoration: none;
                  } 
                  #bottom-nav>div:nth-child(3) a i{
                    font-size: 46px;
                    margin-right: 20px;
                    color: #4CAF50;
                  
                  }
                  #bottom-nav>div:nth-child(3) a span{
                    /* border: 2px solid red; */
                    color: gray;
                    font-size: 24px;
                    font-family: 'Rubik', sans-serif;
                  }
                  #bottom-nav>div:nth-child(3) #countspan{
                    background-color: black;
                    width: 30px;
                    padding: 5px;
                    margin-left: 30px;
                    z-index: 90;
                    position: absolute;
                    margin-top: -20px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    height: 30px;
                  }
                  /* ***************************** footer footer *********************** */
                  /* ***************************** footer footer *********************** */
                  footer{
                  margin-top: 50px;
                  padding: 30px 20px;
                  width: 100%;
                  background-color: #232F3E;
                  margin-inline: auto;
                  }
                  footer > #footer-child{
                  width: 95%;
                  gap: 20px 15px;
                  display: grid;
                  grid-template-columns: repeat(4,1fr);
                  margin-inline: auto;
                  }
                  footer > #footer-child >div:nth-child(1) img{
                  width: 151px;
                  height: 101px;
                  }
                  footer > #footer-child > div:nth-child(1) a{
                  color: white;
                  text-decoration: none;
                  color:rgb(255, 106, 106);
                  font-family: Apple Chancery, cursive;
                   font-weight: bold;
                  }
                  footer > #footer-child div ul li ,footer > #footer-child div ul li a{
                  color: white;
                  margin-top: 10px;
                  text-decoration: none;
                  }
                  
                  footer > #footer-child div h2{
                  color: white;
                  }
                  
                  #about-us p{
                  color: white;
                  margin-top: 10px;
                  }
                  
                  /************************************** cake grand div  ***********************************/
                  /************************************** media query media query ***********************************/
                  /************************************** media query media query ***********************************/
                  .last{
                    /* border: 2px solid red; */
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    color: whitesmoke;
                    /* position: relative; */
                    padding-top: 0px;
                  }
                  
                  #main_div{
                    /* border: 2px solid green; */
                    width: 280px;
                    height: 600px;
                    /* position: fixed; */
                    /* top: 70px;
                    left: 0px; */
                    text-align: center;
                    background-color: #242526;
                  }
                  
                  
                  main div{
                    background-color: transparent;
                  }
                  main div h1,h2, h3, form{
                    background-color: transparent;
                  }
                  
                  .datacontainer{
                    width: 75%;
                    /* border: 2px solid yellow; */
                    margin-right: 10px;
                    margin-top: 0px;
                  }
                  #product-container{
                    width: 100%;
                    display: grid;
                    grid-template-columns: repeat(4,1fr);
                    gap: 30px 15px;
                    
                  }
                  .cardcontainer{
                    width: 100%;
                    height: 450px;
                  }
                  .cardcontainer picture{
                    width: 100%;
                  }
                  .cardcontainer picture img{
                    width: 100%;
                    height: 350px;
                    object-fit: contain;
                  }
                  .inputcontainer{
                  margin: 15px 10px;
                  width: 90%;
                  }
                  .search-box{
                  border-radius: 50px;
                  background-color: white;
                  border: 2px solid #76b39d;
                  }
                  .search-box form{
                  margin: 0;
                  }
                  .search-box form input{
                  border: none;
                  margin: 3px 1px 3px 15px;
                  font-size: 17px;
                  outline: none;
                  width: 83%;
                  }
                  .search-box form i{
                  font-size: 17px;
                  }
                  .search-box form i:hover{
                  color: rgb(107, 107, 107);
                  }
                  .search-box form button{
                  background-color: transparent;
                  border: none;
                  margin: 0 10px 0 10px;
                  }
                  
                  
                  .categoryfilter div:nth-child(1).active{
                  background-color: rgb(17, 17, 153);
                  }
                  
                  
                  
                  
                  
                  
                  
                  .categoryfilter div{
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 70%;
                  height: 50px;
                  margin: 5px auto;
                  cursor: pointer;
                  border-radius: 15px;
                  border: 1px solid transparent;
                  }
                  .categoryfilter div:hover{
                    background-color: #424242;
                  }
                  .categoryfilter div div{
                    background-color: transparent;
                    border: none;
                    width: 48%;
                    display: flex;
                    justify-content: space-between;
                  }
                  .categoryfilter div:hover span{
                    background-color: #424242;
                  }
                  
                  .Brandfilter div{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  width: 70%;
                  height: 50px;
                  margin: 5px auto;
                  cursor: pointer;
                  border-radius: 15px;
                  border: 1px solid transparent;
                    }
                    .Brandfilter div:hover{
                      background-color: #424242;
                    }
                    .Brandfilter div div{
                      background-color: transparent;
                      border: none;
                      width: 48%;
                      display: flex;
                      justify-content: space-between;
                    }
                    .Brandfilter div:hover span{
                      background-color: rgb(17, 17, 153);
                    }
                  
                  
                    
                  
                    .Clothingfilter div{
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    width: 70%;
                    height: 50px;
                    margin: 5px auto;
                    cursor: pointer;
                    border-radius: 15px;
                    border: 1px solid transparent;
                      }
                      .Clothingfilter div:hover{
                        background-color: rgb(17, 17, 153);
                      }
                      .Clothingfilter div div{
                        background-color: transparent;
                        border: none;
                        width: 48%;
                        display: flex;
                        justify-content: space-between;
                      }
                      .Clothingfilter div:hover span{
                        background-color: rgb(17, 17, 153);
                      }
                  
                      .active{
                        background-color: rgb(17, 17, 153);
                      }
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  
                  #filter{
                    width: 100%;
                    background-color: white;
                  }
                  .main{
                    width: 90%;
                    text-align: center;
                  }
                  #priceslider{
                    /* -webkit-appearance: none; */
                    width: 90%;
                    height: 7px;
                    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
                    border-radius: 3px;
                  }
                  #priceslider::-webkit-slider-thumb{
                    width: 30px;
                    height: 45px;
                    cursor: pointer;
                    z-index: 3;
                    position: relative;
                  }
                  #selector{
                    width: 90%;
                    margin-top: 10px;
                  }
                  #selector input{
                    width: 40%;
                    height: 25px;
                    margin-top: 10px;
                  }
                  #category-filter .pricetag{
                    display: flex;
                    justify-content: space-between;
                    width: 90%;
                    margin: 5px 0;
                  }
                  #category-filter .pricetag h3:nth-child(2){
                    color: red;
                    cursor: pointer;
                    text-decoration: underline;
                  }
                  #brand-filter div{
                  cursor: pointer;
                  border-bottom: 1px solid black;
                  text-align: center;
                  margin-bottom: 5px;
                  }
                  #b-filter div{
                  cursor: pointer;
                  border-bottom: 1px solid black;
                  text-align: center;
                  margin-bottom: 5px;
                  }
                  #a-filter div{
                  cursor: pointer;
                  border-bottom: 1px solid black;
                  text-align: center;
                  margin-bottom: 5px;
                  }
                  .cardcontainer{
                  color: black;
                  }
                  
                  
                  .material-symbols-outlined {
                  font-variation-settings:
                  'FILL' 0,
                  'wght' 400,
                  'GRAD' 0,
                  'opsz' 48
                  }

                  #cartimg{
                    width: 50px;
                    height: 50px;
                }
                .logoimg{
                    border-radius: 50%;
                }


                  
                  /* **************************************** container container *************************** */
                  /* **************************************** container container *************************** */
                  .datacontainer{
                      width: 75%;
                      margin-right: 10px;
                      margin-top: 70px;
                    }
                    #product-container{
                      width: 100%;
                      display: grid;
                      grid-template-columns: repeat(4,1fr);
                      gap: 20 15px;
                      
                    }
                    
                    .grand-div-child > .card{
                      color: #242526;
                      box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
                      border-radius: 5px;
                    }
                    .card .img_div {
                      width: 100%;
                      height: auto;
                  }
                  .card .img_div > img{
                      width: 100%;
                      height: 350px;
                  }
                  .card .img_div > img:hover{
                      cursor: pointer;
                  }
                  .card > .desc{
                      padding: 20px;
                      /* border: 2px solid red; */
                  }
                  .card > .desc > h2,.card > .desc > .star-div{
                      margin: 5px 0px;
                  }
                  .card > .desc > h2{
                      font-size: 18px;
                  }
                  .desc > .star-div i{
                      color: #F57C00;
                  }
                  .desc .button-div{
                      width: 100%;
                      display: flex;
                      margin-top: 20px;
                      justify-content: space-between;
                  }
                  .card .button-div {
                      display: flex;
                      justify-content: space-between;
                      padding: 20px;
                      /* border: 2px solid green; */
                  }
                  .card .button-div button{
                      background-color: #232F3E;
                      color: white;
                      border: none;
                      padding: 8px 12px;
                      border-radius: 5px;
                  
                  }
                  
                    #copyright{
                      width: 100%;
                      height: auto;
                      background-color: #242526;
                      text-align: center;
                      padding: 20px 20px;
                  }
                  #copyright > a{
                      text-decoration: none;
                      color: white;
                  }
                  .brandlogo{
                  
                    display: none;
                  }
                  .bname{
                    color:rgb(255, 106, 106);
                    font-family: Apple Chancery, cursive;
                     font-weight: bold;
                  }



                  /* **************************************** media query start *************************** */
                    @media only screen and (max-width: 1201px)  {
                      #bottom-nav {
                        display: block;
                        width: 100%;
                    }
                  
                    #bottom-nav >div{
                        width: 90%;
                        margin-inline: auto;
                        display: flex;
                        justify-content: center;
                        width: 100%;
                    } 
                  
                      #bottom-nav>div:nth-child(2),#bottom-nav>div:nth-child(3){
                          margin-top: 0px;
                      }
                  
                      #product-container{
                        width: 100%;
                        display: grid;
                        grid-template-columns: repeat(3,1fr);
                        gap: 20 15px;
                        
                      }
                  
                      #bottom-nav>div:nth-child(2),#bottom-nav>div:nth-child(3){
                        margin-top: 0px;
                    }
                  
                    #bottom-nav>div:nth-child(3){
                        margin-top: 20px;
                    }
                    }
                    
                    @media screen and (max-width: 970px) {
                    .wrapper .btn{
                    display: block;
                    }
                    .wrapper .nav-links{
                    position: fixed;
                    height: 100vh;
                    width: 100%;
                    max-width: 350px;
                    top: 0;
                    left: -100%;
                    background: #242526;
                    display: block;
                    padding: 50px 10px;
                    line-height: 50px;
                    overflow-y: auto;
                    box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
                    transition: all 0.3s ease;
                    }
                    /* custom scroll bar */
                    ::-webkit-scrollbar {
                    width: 10px;
                    }
                    ::-webkit-scrollbar-track {
                    background: #242526;
                    }
                    ::-webkit-scrollbar-thumb {
                    background: #3A3B3C;
                    }
                    #menu-btn:checked ~ .nav-links{
                    left: 0%;
                    }
                    #menu-btn:checked ~ .btn.menu-btn{
                    display: none;
                    }
                    #close-btn:checked ~ .btn.menu-btn{
                    display: block;
                    }
                    .nav-links li{
                    margin: 15px 10px;
                    }
                    .nav-links li a{
                    padding: 0 20px;
                    display: block;
                    font-size: 20px;
                    }
                    .nav-links .drop-menu{
                    position: static;
                    opacity: 1;
                    top: 65px;
                    visibility: visible;
                    padding-left: 20px;
                    width: 100%;
                    max-height: 0px;
                    overflow: hidden;
                    box-shadow: none;
                    transition: all 0.3s ease;
                    }
                    #showDrop:checked ~ .drop-menu,
                    #showMega:checked ~ .mega-box{
                    max-height: 100%;
                    }
                    .nav-links .desktop-item{
                    display: none;
                    }
                    .nav-links .mobile-item{
                    display: block;
                    color: #f2f2f2;
                    font-size: 20px;
                    font-weight: 500;
                    padding-left: 20px;
                    cursor: pointer;
                    border-radius: 5px;
                    transition: all 0.3s ease;
                    }
                    .nav-links .mobile-item:hover{
                    background: #3A3B3C;
                    }
                    .drop-menu li{
                    margin: 0;
                    }
                    .drop-menu li a{
                    border-radius: 5px;
                    font-size: 18px;
                    }
                    .mega-box{
                    position: static;
                    top: 65px;
                    opacity: 1;
                    visibility: visible;
                    padding: 0 20px;
                    max-height: 0px;
                    overflow: hidden;
                    transition: all 0.3s ease;
                    }
                    .mega-box .content{
                    box-shadow: none;
                    flex-direction: column;
                    padding: 20px 20px 0 20px;
                    }
                    .mega-box .content .row{
                    width: 100%;
                    margin-bottom: 15px;
                    border-top: 1px solid rgba(255,255,255,0.08);
                    }
                    .mega-box .content .row:nth-child(1),
                    .mega-box .content .row:nth-child(2){
                    border-top: 0px;
                    }
                    .content .row .mega-links{
                    border-left: 0px;
                    padding-left: 15px;
                    }
                    .row .mega-links li{
                    margin: 0;
                    }
                    .content .row header{
                    font-size: 19px;
                    }
                    
                    nav input{
                    display: none;
                    }
                    
                    #mega-menu{
                      background-color: green;
                      display: none;
                    }
                    #top-div div:nth-child(2) >a:hover #mega-menu{
                      display: block;
                      width: 100%;
                      height: 400px;
                      background-color: teal;
                    } 
                    
                      /* **************************** bottom bottom ************ */
                      #bottom-nav {
                        display: block;
                        width: 100%;
                    }
                    #bottom-nav >div{
                        width: 90%;
                         margin-inline: auto;
                        display: flex;
                        justify-content: center;
                         /* display: block;
                         width: 100%; */
                    }
                  
                    #bottom-nav >div{
                        width: 90%;
                        margin-inline: auto;
                        display: flex;
                        justify-content: center;
                        width: 100%;
                    } 
                  
                    
                      footer #footer-child{
                          gap: 20px 0px;
                          grid-template-columns: repeat(2,1fr);
                      }
                      .grand-div > .grand-div-child{
                          width: 95%;
                          height: auto;
                          margin-inline: auto;
                          gap: 15px 10px;
                          display: flex;
                          flex-wrap: wrap;
                      }
                      /* .grand-div{
                    
                      } */
                    
                      #bottom-nav>div:nth-child(2),#bottom-nav>div:nth-child(3){
                          margin-top: 0px;
                      }
                      #bottom-nav>div:nth-child(2){
                          width: 80%;
                      }
                      #bottom-nav>div:nth-child(3){
                          width: 80%;
                      }
                  
                      #product-container{
                        width: 100%;
                        display: grid;
                        grid-template-columns: repeat(2,1fr);
                        gap: 20 15px;
                        
                      }
                  
                      #bottom-nav>div:nth-child(2),#bottom-nav>div:nth-child(3){
                        margin-top: 0px;
                    }
                  
                    #bottom-nav>div:nth-child(3){
                        margin-top: 20px;
                    }
                    }
                  
                    @media only screen and (max-width: 600px)  {
                      #bottom-nav >div:nth-child(2) > form {
                        display: flex;
                        justify-content: center;
                         /* border: 4px solid green; */
                      } 
                      main{
                        /* border: 2px solid green; */
                        width: 200px;
                        max-height: 600px;
                        text-align: center;
                        background-color: #242526;
                      }
                      .Brandfilter img{
                        display: none;
                      }
                      .nav h1{
                        font-size: 25px;
                        color: green;
                      }
                      main h2{
                        font-size: 20px;
                      }
                      main p{
                        font-size: 15px;
                      }
                  
                      #form input{
                        width: 80%;
                        margin-left: 10px;
                        border-radius: 10px;
                      }
                  
                      
                      
                      #bottom-nav >div:nth-child(2) > form {
                        width: 100%;
                      }
                      
                      footer #footer-child{
                            gap: 20px 0px;
                            grid-template-columns: repeat(1,1fr);
                        }
                  
                        #product-container{
                          width: 100%;
                          display: grid;
                          grid-template-columns: repeat(1,1fr);
                          gap: 20 15px;
                          
                        }
                  
                      }