#container{
        width:80%;
        margin: auto;
        text-align: center;
        font-family:sans-serif;
}
body{
        margin: 0;
        position: relative;
}
a{
        text-decoration: none;
        color: #000;
}
#signin{
        cursor: pointer;
}

        /* navbar css */

#navbar  {
        width: 100%;
        margin: auto;
        position: fixed;
        background-color: white;
}  

#top_nav_bar {
        display: flex;
        justify-content: end;
        gap: 3%;
        font-weight: 400;
        font-size: 14px;
        margin-right: 10%;
        margin-top: -10px;
        color: rgb(94, 92, 92);
}
#navbar_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 89%;
        margin:-8px 9% auto 2%; 
}

#top_nav_bar div {
        margin-bottom: 1%;
        font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
#cart {
        display: flex;
        width: 9em;
        background-color: #f2f2f2;
        padding: 0.2%;
}
#cart div {
        text-align: right;
}
#cart_img {
        width: 40%;
        display: flex;
}
#cart_img img {
        width: 100%;
        justify-content: center;
        align-items: center;
        margin: auto;
        margin-right: 10%;
}
#cart_qunt {
        line-height: 10px;
        text-align: center;
}
#search_item {
        width: 43%;
        display: flex;
        align-items: center;
        margin-left: -15%;
        margin-top: 5px;
}
#search_item>img {
        padding: -10px 0px 10px 10px;
        height: 30px;
}
#search_item input {
        width: 100%;
        height: 2em;
        margin-top: -2%;
}
#mfglass{
        height: 2em;
        width: 40px;
        display: inline-block;
        vertical-align: center;
        vertical-align: -webkit-baseline-middle;
        background: #97d33c;
        line-height:15px;
        margin-top: -11px; 
}
#mfglass>i{
        display: inline-block;
        vertical-align: center;
        vertical-align: -webkit-baseline-middle;
        padding:13px 10px;
        color: white;
        margin-top: -7px; 
}
#logo {
        margin-top: -3%;
        margin-left: 8%;
}
#category_part {
        display: flex;
        border: 0.2px solid rgb(231, 228, 228);
        margin-left: 8%;
        width: 83%;
        height: 30px;
}
.category_part1 {
        display: flex;
        margin-right: 1%;
}
#category_part > div p {
        margin-bottom: 0%;
        margin-top: 0%;
        padding: 0.5em;
}
#off{
        display: flex;
        font-size: 15px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

  /* //////////////////start dropDown/////////////////// */

.category-hover-div {
        display: flex;
        width: 70%;
        position: absolute;
        height: 420px;
        background: #fff;
        border-radius: 0px 0px 4px 4px;
        visibility: hidden;
} 
.category  {
        display: flex;
        background-color: #97d33c;
        color: white;
}  
#a>p{
        padding-left: 5px;
}
#a{
        display: flex;
        margin-right: 20px;
}
#a>p{
        margin-right: 50px;
}
.fa-chevron-down{
        margin-top: 6px;
}
.fa-tag{
        color: red;
}


.category:hover .category-hover-div {
        margin-top: 2.6%;
        visibility: visible;
        opacity: 1;
        box-shadow: 3px 2px 2px 2px black;
}
.category-hover-div {
        margin-top: 2.6%;
        visibility:hidden ;
        opacity: 1;
        box-shadow: 3px 2px 2px 2px black;
}
.category:hover .category-hover-div-btw {
        margin-top: 2.6%;
        visibility: visible;
        opacity: 1;
        box-shadow: 3px 2px 2px 2px black;
}
.category-hover-div-left {
        width: 26%;
        height: auto;
        display: flex;
        flex-direction: column;
        position: relative;
        border: rgb(204, 202, 202);
}
.category-hover-div-left-options {
        width: 100%;
        height: auto;
        padding: 5%;
        border-bottom: 1px solid #e4e4e4;
        font-size: 14px;
        display: flex;
        color: #555;
        cursor: pointer;
        position: relative;
}
.category-hover-div-right {
        width: 70%;
        height: auto;
        display: flex;
        padding-left: 45px;
        overflow: hidden;
        flex-direction: column;
        flex-wrap: wrap;
        background-color: #eaeaea;
        z-index: 1;
}
.category-hover-div-right a {
        width: 25%;
        font-size: 14px;
        line-height: 30px;
        color: black;
        cursor: pointer;
        text-decoration: none;
        font-weight: normal;
}
.category-hover-div-right a:hover {
        background-color: rgb(255, 255, 255);
}
.category-hover-div-left-options:hover {
        background-color: rgb(179, 179, 179);
} 

    /* ////////////navbar done//////// */  
    /* image sliding  start */
#show1 img {
        width: 100%;
        margin-top: 10%;
} 
#show2  {
        width: 80%;
        margin: auto;
        margin-top: 3%;
        /* margin-left: 10%; */

} 


#slider_under_image {
        width: 90%;
        display: flex;
        margin: auto;
        justify-content: space-around;
} 
#slider_under_image div {
        width: 20%;
        margin-top: 2%;
        margin-right: 2%;
        display: flex;
} 

#slider_under_image image {
        width: 100%;
}

/* ////////////////////////login signup////////////// */

.open :hover {
        color: #84c225;
        background-color: aqua;
} 
#top_nav_bar_hidden .navbar_signin:hover {
        color: #84c225;
        cursor: pointer;
}
#sign-in > div:nth-of-type(2) {
        background-color: white;
        width: 100%;
}

.sign-close {
        position: absolute;
        right: 15px;
        top: 10px;
        text-decoration: none;
        cursor: pointer;
}


.bank{
        margin-top:6%;
        margin-left: 9%;
        margin-right: 9%;
}
.bank > .title{
        font-size:25px;
        text-align: center;
        padding-bottom: 5px;
        border-bottom: 1px solid rgb(223, 215, 215);
        margin-bottom: 1%;
}
.sub > img{
        width:24%;
        margin-left: 4px;
        margin-right: 4px
}
.sub > img:nth-child(1){
        width:24%;
        margin-right: 4px;
 }
.sub> img:hover{
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }
 .best{
     text-align: center;
     margin-top:2%;
     margin-left: 9%;
     margin-right: 9%;
     font-size:25px;
     text-align: center;
 }
 .bone{
     padding-bottom: 1%;
     border-bottom: 1px solid rgb(223, 215, 215);
 }
 .items{
    margin-top:1%;
    margin-right: 9%;
    width:100%;
    display: flex;
}
.items > div{
        border: 1px solid rgb(223, 215, 215);
        width: 20%;
        height:100%;
}
.items > div:hover{
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.itemOne{
    margin-right:20px
}
.gap{
    margin-left:0px;
}
.itemOne > a img{
    width: 80%;
}

.divshadow:hover{
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.itemOne > p:nth-child(1){
        font-size: 10px;
        padding: 3px;
        text-align: right;
        color: rgb(225,86,90);
        font-weight: bold;
        margin-left:10px;
        margin-right:10px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.itemOne > p:nth-child(3){
        font-size: 10px;
        text-align: left;
        padding-left:10px;
        margin-bottom: 0px;
        color: rgb(223, 215, 215);
}
.itemOne > p:nth-child(4){
        font-size: 15px;
        text-align: left;
        padding-left:9px;
}
.itemOne > p:nth-child(5){
        font-size:13px;
        border: 1px solid rgb(223, 215, 215);
        text-align: left;
        margin-left:10px;
        margin-right:10px;
        padding: 3px;
        color:rgb(223, 215, 215);
}
.itemOne > p:nth-child(6){
        text-align: left;
        margin-top:0px;
        margin-bottom:0px;
        margin-left:10px;
        margin-right:10px;
        padding: 3px;
        color:rgb(223, 215, 215);
}
.spanOne{
    text-decoration: line-through;
    font-size:9px;
    text-align: left;
}
.spanTwo{
    font-size:13px;
    color:black;
}
.itemOne > p:nth-child(7){
    text-align: left;
    font-size:11px;
    margin-top:0px;
    margin-bottom:0px;
    margin-left:10px;
    margin-right:10px;
    padding: 3px;
}
.itemOne > p:nth-child(8){
    text-align: left;
    font-size:11px;
    margin-top:0px;
    margin-left:10px;
    margin-right:10px;
    padding: 3px;
}
.itemOne > p:nth-child(9){
    text-align: left;
    font-size:13px;
    margin-top:0px;
    margin-left:10px;
    margin-right:10px;
    padding: 3px;
}
.qty{
    padding: 4px 15px 4px 15px;
    border: 1px solid rgb(223, 215, 215);
}
.qtyb{
    background-color:rgb(249,218,121);
    border:none;
    padding: 5px 25px 5px 25px;
}
.popular > div:nth-child(1){
    font-size:25px;
    text-align: center;
    margin-top:4%;
    padding-bottom: 5px;
    border-bottom: 1px solid rgb(223, 215, 215);
    margin-bottom: 1%;
    margin-left: 10%;
    margin-right: 10%;
}

.popularOne{
    padding-bottom: 5px;
    margin-bottom: 1%;
    margin-left: 9%;
    margin-right: 9%;
    display: flex;
}
.popularTwo{
    width: 100%;
    height: 100%;
    border: 1px solid rgb(223, 215, 215);
    margin-right:2%;
}
.popularTwo:hover{
    box-shadow:  rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.popularTwo >img{
    width:100%;   
}
.fruit{
    display:flex;
    margin-left: 9%;
    margin-right: 9%;
}
.fruitOne{
        width:50%;
        height:100%;
        border:1px solid rgb(223, 215, 215);
}
.fruitTwo{
        width:50%;
        height:98%;
        border:1px solid rgb(223, 215, 215);
        display:flex;
        margin-left: 2%;
}
.innerFruitOne{
    margin-left: 3%;
}
.innerFruitTwo{
    margin-left: 2%;
}
.inner{
    border:1px solid rgb(223, 215, 215);
    margin: 5px;
} 
.inner > img{
    width:97%
}
.staple{
        display:flex;
        margin-left: 9%;
        margin-right: 9%;
        height: 100%;
}
.innerStaple{
        border: 1px solid rgb(223, 215, 215);
        width: 20%;
        height: 100%;
        margin: 5px;
}
.innerStaple:hover{
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.innerStaple > img{
    width: 100%;
} 

      /* footer css */
  
.parent1 {
    height: 400px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
margin-bottom: 2%;
}
.parent1 > .child{
  display: grid;
  height: 100%;
  width: 80%;
  margin: auto;
  display: inline-table;
} */
.parent2 {
        height: 300px;
        width: 100%;
        display: grid;
        grid-template-rows: repeat(4, 1fr);
        gap: 20px;
}
.parent2 > .child2{
  display: grid;
  height: 100%;
  width: 95%;
  margin: auto;
}
.footerdes{
        margin-top:3%;
        margin-left: 9%;
        margin-right: 9%;
        border: 1px solid black;
        height:100%;
        padding-left:10px;
        padding-bottom:15px;
        padding-right: 10px;
}
.Foottitle{
              font-size:30px;
        }
        .Footcontent{
            font-size:15px;
            color:gray;
        }
        .Footcontent > a{
            color:rgb(20, 31, 4);
            text-decoration:none;
            font-weight:bold;
        }
        .footerdes > button{
            padding:3px;
        }
.child>h4{
        color: hsl(84, 95%, 30%);
}        
.child2>h4{
        color: hsl(84, 95%, 30%);
        width: 30%;
}        
.bankimage>img{
        width: 70px;
        height: 40px;
        margin: 0 5px;

}
.bankimage{
    display: flex;
        
}
#copyRight{
        padding: 3px;
        background-color: #dedede;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: gray;
      }
      
      #copyRight p{
        margin-left: 13%;
        font-size: 11px;
      }

.footer1{
        width: 90%;
        margin: auto
}
        @media all and (min-width:480px) and (max-width:780px){
                  #navbar{grid-template-columns: repeat(1,1fr);
             grid-template-rows: repeat(auto,auto);
            }
            #container{grid-template-columns: repeat(2,1fr);
                grid-template-rows: repeat(40,auto);
               }            
         }
         @media all and (min-width:50px) and (max-width:481px){
         }