@media (min-width: 0px) and (max-width: 411px) {

   
.menu-toogle input[type="checkbox"] {
    width: 2.0em;
    height: 2.0em;
    margin-left: 1.1em;
    margin-top: -01em;
     top: 0%;
    z-index: 2;
}


.menu-toogle span {
    bottom: 0.7em;
    width: 1.7em;
    height: 0.15em;
    background-color: whitesmoke;
    margin-left: 1em;
    margin-bottom: 0.32em;
    position: relative;
   z-index: 1;
}


.menu-link {
    position: absolute;
    width:  16em;
    height: 75vh;
    margin: 1.9em -2em;
    padding: 1em  0;
} 



.dropdown-toggle1 {
  display: block;
}



.logo {
  font-size: 20px;
 
  margin-top: -2em;
}

.account-pics {
  display: flex;
  margin-top: -2.5em;
  margin-left: 3.0em;
  gap: 1.5em;
}

.cart-count {
  margin-top: 2em;
  margin-right: 2.5em;
}




  .search-section {
    width: 100%;
    margin-top: 2.8em;
    margin-left: -18em;
  }

  .search-wrapper {
    position: relative;
    width: 100%;
  }

  /* Place icon inside input */
  .search-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    padding: 5px;
    transform: translateY(-50%);
    display: block;
    z-index: 2;
  }

  .search-icon {
    width: 28px;
    height: auto;
    
  }

  .search-wrapper input {
    padding-left: 40px; /* space for icon */
    border-radius: 4px;
    padding-left: 40px;
  }

  /* Remove right-side button styling */
  .search-wrapper button {
    background: none;
    border-radius: 0;
  }


#searchBox::placeholder {
  color: transparent;
}


.nav-actions {
  display: none;
}





.product-card {
    padding: 5px;
    width: 155px;
  
}

.container {
  margin-left: -0.1em;
}


.product-card-related {
    padding: 5px;
    width: 133px;
  
}


.container-related {
  margin-left: -0.1em;
}


.footer {
  display: none;
}


.footer-links {
   background: black;
}

}














@media (min-width: 412px) and (max-width: 767px) {
 
.menu-toogle input[type="checkbox"] {
    width: 2.0em;
    height: 2.0em;
    margin-left: 1.1em;
    margin-top: -01em;
     top: 0%;
    z-index: 2;
}


.menu-toogle span {
    bottom: 0.7em;
    width: 1.7em;
    height: 0.15em;
    background-color: whitesmoke;
    margin-left: 1em;
    margin-bottom: 0.32em;
    position: relative;
   z-index: 1;
}


.menu-link {
    position: absolute;
    width:  16em;
    height: 75vh;
    margin: 1.9em -2em;
    padding: 1em  0;
} 



.dropdown-toggle1 {
  display: block;
}



.logo {
  font-size: 20px;
 
  margin-top: -2em;
}

.account-pics {
  display: flex;
  margin-top: -2.5em;
  margin-left: 3.0em;
  gap: 1.5em;
}


.cart-count {
  margin-top: 2em;
  margin-right: 9em;
}


  .search-section {
    width: 100%;
    margin-top: 2.8em;
  margin-left: -16.5em;
  }

  .search-wrapper {
    position: relative;
    width: 100%;
  }

  /* Place icon inside input */
  .search-btn {
    position: absolute;
    left: 12px;
    top: 50%;
    padding: 5px;
    transform: translateY(-50%);
    display: block;
    z-index: 2;
  }

  .search-icon {
    width: 28px;
    height: auto;
    
  }

  .search-wrapper input {
    padding-left: 40px; /* space for icon */
    border-radius: 4px;
    padding-left: 40px;
  }

  /* Remove right-side button styling */
  .search-wrapper button {
    background: none;
    border-radius: 0;
  }

#searchBox::placeholder {
  color: transparent;
}


.nav-actions {
  display: none;
} 



.product-card {
    padding: 5px;
    width: 175px;
  
}

.container {
  margin-left: -0.1em;
}


.product-card-related {
    padding: 5px;
    width: 158px;
  
}


.container-related {
  margin-left: -0.1em;
}


.footer {
  display: none;
}

.footer-links {
   background: black;
}



}










@media (min-width: 768px) and (max-width: 1024px) {

.site-header {
  white-space: wrap;
}


.menu-link {
    position: absolute;
    width:  16em;
    height: 48vh;
    margin: 1.9em -2em;
    padding: 1em  0;
} 



.dropdown-toggle1 {
  display: block;
}

.dropdown {
  margin-left:  -2em;
}



.logo {
  margin-left: 0.5em;
}

   
.search-section {
  margin-left: 0.5em;
}


.container {
  margin-left: -0.1em;
}



.product-card {
    padding: 5px;
    width: 240px;
}


.product-card-related {
    padding: 5px;
    width: 220px;
  
}


.container-related {
  margin-left: -0.1em;
}

.div-all {
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   margin-left: 5em;
}

.footer-links {
  display: none;
}


} 



@media (min-width: 768px) {
  .footer-links {
    display: none;;
  } 
}