body {
    margin: 0;
    padding: 0;
    background-color: #f1efef;
    box-sizing: border-box;
}

.navbar {
    border: 1px solid black;
    height: 50px;
    background-color: white;
}

.navbar p {
    font-size: 25px;
    margin: 5px 0 0 8px;
    background-color: brown;
    display: inline-block;
    padding: 6px;
    color: white;
    border-radius: 15px 0 15px 0;
}

nav {
    display: flex;
    justify-content: end;
    margin-right: 140px;
    margin-top: -43px;
}

li {
    list-style-type: none;
    margin: 10px 20px;
}

nav li {
    margin-right: -5px;
}

li a {
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
}

/* navigation bar */

.topnav {
    overflow: hidden;
    background-color: #f1efef;
  }
  
  .topnav a {
    float: left;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    padding-left: 30px;
  }
  
  .topnav a:hover {
    color: red;
  }

#slid {
    width: 99%;
    height: 400px;
    /* border: 2px solid green; */
    margin: auto;
    display: flex;
    background-color: white;
}

#mySlidshow {
    width: 72%;
    /* border: 2px solid red; */
    margin: 5px 10px 5px 5px;
}

#box {
    width: 26%;
    /* border: 2px solid blue; */
    margin: 5px;
}
#mySlidshow img{
    width: 100%;
    height: 100%;
}
#box{
    display: flex;
    flex-direction: column;
    /* border: 2px solid greenyellow; */
}
#box div{
    width: 100%;
    height: 50%;
    margin: 0 0 5px 0;
    /* border: 2px solid hotpink; */
}
#box img{
    width: 100%;
    height: 100%;
}
#Slidshow{
    width: 100%;
    height: 75%;
    /* border: 2px solid blue; */
}
#btn{
    width: 100%;
    height: 23%;
    display: flex;
    /* border: 2px solid red; */
}
#btn div{
    width: 100%;
    height: 100%;
    text-align: center;
}
.size{
    font-size: 18px;
    font-weight: 500;
}
#order{
    width: 100%;
    /* border: 2px solid black; */
    background-color: white;
    display: flex;
    margin: 8px auto;
}
#order div{
    width: 50%;
    height: 100%;
    margin: 10px;
    border: 1px solid black;
    border-radius: 5px;
}
#order p{
    margin: 5px 0 0 10px;
    padding: 0;
}
.size2{
    font-size: 20px;
}
.size2:hover{
    color: red;
}
.blackHover:hover{
    border-bottom: 4px solid black;
}
#ad{
    width: 98%;
    margin: 15px 15px 0 15px;
    /* border: 2px solid red; */
}
#ad img{
    width: 100%;
    height: 20%;
}
.main{
    width: 98%;
    /* height: fit-content; */
    margin: 15px auto;
    /* border: 1px solid darkblue; */
    background-color: white;
}
#medPlus{
   width: 100%;
   height: 200px;
    /* border: 2px solid red; */
    margin: 10px auto auto 30px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 2%;
    /* background-color: white; */
}
#medPlus div{
    /* border: 2px solid black; */
    margin: 5px;
}

.icon-font i{
    font-size: 30px;
    /* -webkit-text-emphasis-style: double-circle; */
    padding-top: 20px;
}
.icon-font div{
    vertical-align: top;
    display: inline-block;
}
.icon-font li{
    padding: 0;
    font: menu;
    margin: -2px;
    font-size: 15px;
}

/* contact design */
.contact{
    width: 80%;
    margin: auto;
}
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }
  
  input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  input[type=submit]:hover {
    background-color: #45a049;
  }
  
  .container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }

/* feedback */

  #feedbackDetails{
      width: 80%;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(4,1fr);
      grid-gap: 15px;
  }

  #feedbackDetails div{
      /* border: 1px solid black; */
      padding: 5px 5px 5px 20px;
      border-radius: 20px;
  }
  #review{
      width: 10%;
      margin: auto;
      /* background-color: grey; */
      text-align: center;
      border-radius: 15px;
  }

  /* shop by catagory */
  #SBC{
    /* border: 1px solid black; */
    display: grid;
    grid-template-columns: 150px 150px 150px 150px 150px 150px 150px;
    grid-row: 150px;
    grid-gap: 30px;
}
.button-size{
    width: 150px;
    height: 150px;
    background-color: rgba(255, 255, 255, 0.966);
    border: 1px solid rgb(212, 210, 210);
    /* border: none ; */
    /* background: transparent; */
    border-radius: 50%;
}
.button-size:hover{
    box-shadow: 0 0px 3px 3px  rgb(233, 230, 230, 0.9);;

}
.ele{
    width: 200px;
    text-align: center;
    margin: auto 25px;
}
 /* p{
    margin: 10px auto;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 15px; 
}  */
#font-style{
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 300;
}
#SBCout{
    /* border: 1px solid red; */
    width: 100%;
    background-color: rgba(245, 245, 245, 0.842);
    padding: 5px 10px 5px 10px;
    margin: 10px;
}
#SBCout div{
    margin-left: 5%;
}

/* best seller */
#bestSellers {
    margin-left: 15px;

    /* margin: 5%; */
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    grid-gap: 15px;
}

#heading {

    display: inline;
}

img {
    width: 70%;


}

/* div>div {


    margin: 10px;
    text-align: center;
    font-size: 15px;

} */

.sellerHv > div:hover {
    border: 2px solid whitesmoke;
}



button {
    background-color: #EF5350;
    color: white;
    font-size: 10px;
    border-radius: 3px;
    padding: 5px 15px;

}

.btn {
    float: right;
    background-color: #BDBDBD;
    color: black;
}
#bestSeller{
    width: 95%;
    height: fit-content;
    margin: auto;
}

/* top offers */

#product{
  display:grid;
  grid-template-columns: repeat(7,1fr);
  grid-gap: 1%;
  justify-content: center;
 
}
#topOffers button{
  background-color: #D32F2F;
  color: white;
  height: 40px;
  border-radius: 10%;
  text-align: center;
  margin-left: 25%;
  border: none;
  cursor: pointer;
  
}
#mainDiv{
  height: 400px;
 
  /* border: 1px solid red; */
  margin: 5%,5%,20%,5%;
}
#topOffers p{
  margin: 4px;
  text-align: center;
}
#topOffers h3{
  margin-left: 2%;
}
img{
  margin-left: 0%;

}
#prod1:hover{
  box-shadow: 1px 1px 1px 1px #757575;
 border-radius: 10%;
}
#gtcart{
  float: right;
  
}
#topOffers{
    width: 95%;
    height: fit-content;
    margin: auto;
}