eggMeatFish.css

#headerAndFilter{
    display: flex;
    width:80%;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    align-items: center;
    
}
/* #headerAndFilter>div{
  
} */
#headerAndFilter>h2{
    font-size: 30px;
    font-weight: 600;
    background-image: linear-gradient(to left, #553c9a, #b393d3);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

#staticHeader{
    position: sticky;
    top:0;
    background: white;
    z-index: 100;
}


#filterByPrice{
    
       
        position: relative;
        display: block;
        width: 15em;
        height: 30px;
        line-height: 3;
        overflow: hidden;
        border-radius: .25em;
        padding-bottom: 10px;
        text-align: center;
        padding: 2px;
}
#homeButton{
  margin-left: 30px;
}
#homeButton img{
  width:35px;
  cursor: pointer;
  
}
#eggMeatFishLandingImage>img{
    width:100%;
    
    margin-left: auto;
    margin-right: auto;
}

/* <!-- start of homepage addresbar --> */
#homePageAddresBar{
  display:flex;
  justify-content: right;
  width:90%;
  margin-left: auto;
  margin-right: auto;
  align-items: first baseline;
  gap: 25px;
  margin-top: -15px;
  font-size: 13px;
  color: #666;
}
#homePageAddresBar img{
  height:17px;
}
#homePageAddresBar a{
  font-size: 13px;
  color: #666;
  text-decoration: none;
}
/* end of homepage addresbar */
/* start of bbLogoAndSearchbar */
#bbLogoAndSearchbar{
  display: flex;
  width:80%;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-between;
}
#bbLogoAndSearchbar >img{
  width: 200px;
  height: 75px;
  margin-top: -22px;
}

#bbLogoAndSearchbar>input[type=text]{
  width:50%;
  height:8px;
  padding: 10px;
  margin-top: 10px;
  border:1px solid #84c225
}
#cartBasket{
  display:flex

}
#cartBasket>img{
  width: 58px;
  height: 45px;
  margin-left:15px;
  margin-top:5px;
  cursor: pointer;
}
#basketItems{
  margin-left:15px;
  color: #4d4d4d;
  font:13px;
  cursor: pointer;
}
#basketItems>p{
  margin-top: 1px;
}
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

/* end of bbLogoAndSearchbar */

/* start of shop by category dropdown */
#homepageDropdown{
  display:flex;
  align-items: center;
  width:80%;
  margin-left: auto;
  margin-right: auto;
  gap:20px;
  margin-top:15px;
  border:1px solid whitesmoke;
}
.dropdown+div>a{
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
  color: #666;
}
.dropdown+div>a:hover{
  background-color: #84c225;
}
.dropbtn {
  background-color: #84c225;
  color: white;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
  text-align: left;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(230, 219, 219, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-size: 13px;
  color: #666;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #84c225;}

/* end of shop by category dropdown */
/* start of homepageimage */
#homepageImage{
  width:100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 35px;
}
#homepageImage>img{
  width:100%;
}
/* end homepageimage*/

/* start of homepagebuttons */
#homePageButtons{
  display:flex;
  gap: 10px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}
/* end of homepagebuttons */
/*  */
#mySmartBasket,#indexOffers,#homePageLastHeader{
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  color:rgb(68, 68, 68);
  font-size: 24px;
}
#mySmartBasket+div{
  width:80%;
  margin-left: auto;
  margin-right: auto;
}
#mySmartBasketMainDiv{
  display:grid;
  grid-template-columns: repeat(4,1fr)
  
}
#mySmartBasketMainDiv > div > button{
  border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
margin-top: 10px;
}
#headerAndFilter+div{
  width:80%;
  margin-left: auto;
  margin-right: auto;
}
#mySmartBasketMainDiv > div > button:hover {
  opacity: 0.7;
}
#mySmartBasketMainDiv > div{
  padding:20px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
  margin-bottom: 20px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  cursor: pointer;
}

#mySmartBasketMainDiv > div:hover{
  outline: .2rem solid rgb(235, 224, 224);;
  outline-offset: 0;
}
#mySmartBasketMainDiv > div:hover img{
  transform:scale(.9)
}
#mySmartBasketMainDiv > div > div{
  display:flex;
  margin-top:-20px;
  flex-wrap: wrap;
  justify-content: center;
}
#mySmartBasketMainDiv > div > div+div{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-top:-4px;
}

#mySmartBasketMainDiv>img{
  width: 70%;
  height:200px;
}
#mySmartBasketMainDiv>div>img+p{
  /* text-align: center;
  color: #4d4d4d;
  font:13px;
  margin-bottom: 25px; */
  text-align: center;
  padding:1rem 0;
  font-size:13px;
  color:#444;
}
#mySmartBasketMainDiv>div>img+p:hover{
  color:#27ae60
}
#mySmartBasketMainDiv>div>img+p+div{
 display:flex;
 justify-content: space-around;
 font-size:15px;
  color:#444;
}
#mySmartBasketMainDiv>div>img+p+div>p+p{
  text-decoration: line-through;
}
.quantity {
  display: inline-block; }
 
 .quantity .input-text.qty {
  width: 35px;
  height: 39px;
  padding: 0 5px;
  text-align: center;
  background-color: transparent;
  border: 1px solid #efefef;
 }
 
 .quantity.buttons_added {
  text-align: left;
  position: relative;
  white-space: nowrap;
  vertical-align: top; }
 
 .quantity.buttons_added input {
  display: inline-block;
  margin: 0;
  vertical-align: top;
  box-shadow: none;
 }
 
 .quantity.buttons_added .minus,
 .quantity.buttons_added .plus {
  padding: 7px 10px 8px;
  height: 41px;
  background-color: #ffffff;
  border: 1px solid #efefef;
  cursor:pointer;}
 
 .quantity.buttons_added .minus {
  border-right: 0; }
 
 .quantity.buttons_added .plus {
  border-left: 0; }
 
 .quantity.buttons_added .minus:hover,
 .quantity.buttons_added .plus:hover {
  background: #eeeeee; }
 
 .quantity input::-webkit-outer-spin-button,
 .quantity input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  
  margin: 0; }
  
  .quantity.buttons_added .minus:focus,
 .quantity.buttons_added .plus:focus {
  outline: none; }


/*  */

#bankOffers{
  display:flex;
  width:80%;
  margin-left: auto;
  margin-right: auto;
}
#bankOffers>img{
  width:24%;
  margin-right:17px;
  cursor: pointer;
}
#homePageLastImage>img{
  width:100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 35px;
}

@media all and (min-width: 768px) and (max-width:1023px){
  #homePageAddresBar,#cartBasket,#bbLogoAndSearchbar>img{
    display: none;
  }
  #bbLogoAndSearchbar>input[type=text]{
    width: 100%;
    height:15px;
  }
  #homePageButtons,#mySmartBasketMainDiv{
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }
  #bankOffers,#mostPopularImg,#topoffersImg,#brandStoreImg{
        display: 100%;
  }
  #brandStoreImg{
    display:flex;
  width:80%;
  margin-left: auto;
  margin-right: auto;
  
  }
  #brandStoreImg>img{
    width:12%;
    margin-right:22px;
    cursor: pointer;
    border: 1px solid rgb(235, 224, 224);
    
  }
 
}

/* for mobile */
@media all and (min-width: 340px) and (max-width:767px){
  #homePageAddresBar,#cartBasket,#bbLogoAndSearchbar>img{
    display: none;
  }
  #bbLogoAndSearchbar>input[type=text]{
    width: 100%;
    height:15px;
  }
  #homePageButtons,#mySmartBasketMainDiv{
    display: grid;
    grid-template-columns: repeat(2,1fr);
  }
  #bankOffers,#mostPopularImg,#topoffersImg{
    display: 100%;
}
#brandStoreImg{
  display:flex;
  width:80%;
  margin-left: auto;
  margin-right: auto;
  
}
#brandStoreImg>img{
  width:12%;
  margin-right:28px;
  cursor: pointer;
  border: 1px solid rgb(235, 224, 224);;
}

}