Style.css

body{
  margin: 0px;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  overflow-x: hidden;
  /* background-color: black; */
  font-family: Arial, Helvetica, sans-serif;

}

.Main{
  /* display: grid; */
 width: 100%;  text-align: center;
 height:50% ;
 /* position: fixed; */
 /* background-color: rgb(3, 3, 3) */
 }

 .Main>ul{
  background-color: rgb(3, 3, 3);
 color: aliceblue;
  display: inline-flex;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

a.Menu    {color: aliceblue;
/* font-family: 'azo-sans',sans-serif; */
font-size: 15px;
text-decoration: none;
/* margin: 2%; */
margin: 5px;
padding: 10px;
/* display: block; */
/* padding: 0px 2.5%; */
/* line-height: 75px; */
}

a.Menu:hover{
background-color:whitesmoke; 
color:black; 
transition: all 0.7s ease-in-out;
/* line-height: 3%; */
transform: scale(2,1);

}


.Main li{
  /* padding: 1% 0 1% 1%; */
   width: 8.3%;
height: 100%;
   /* color: aliceblue; */
   list-style-type: none;
   /* font-family: helvetica; */
   font-size: 16px;
  /* text-align: right; */
  line-height: 95px

}

#li2 {
  margin: 3%;
  margin-top: 1%;
  margin-bottom: 1%;
  font-size: 40px;
  text-align: center;
  margin: auto;
}

#logo
  {
    height: 50%;
    width: 30%;
}

.top{
font-family: lobster;
font-size: larger;




}

/* end of all a,ul,li */
.navbar {
  overflow: hidden;
  background-color:rgb(3, 3, 3);
}

.navbar a {
 
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown 
  {
    position: relative;
    display: inline-block;
    /* line-height: 82px; */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color:black;
  color:red;
  overflow-x: hidden;
  transition: 0.5s;
}

#center a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
text-align: center;
  transition: 0.3s;
}

#center a:hover {
  color: #f1f1f1;
}


.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 5%;
  font-size: 36px;
  color: white;
  }

  #center{
    position: absolute;
    top: 10%;
  text-align: center;
  }

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.closebtn{ height: 25%;width: 15%;}
.center{
  width: fit-content;
}

/* for slideshow */
/* for slidebar */
.setValue {
  width:85%;
  height: 420px;
}


.circles {
  width: 10px;
  height: 10px;
  border: 1px solid black;
  border-radius: 100%;
  margin: 0 auto;
  margin-top: -110px;
  display: inline-block;
  /*z-index: 9999;*/
}

#changeBackground {
  background:gray;
}

#removeBackground {
  background: #fff;
}
/* for favourite */
#sup sup{
  border-radius:50%;
  background-color:red;
  color: white; 
  width: 30%;
  font-size: large;
}



/* FOR PRODUCT */
.Bag{
  height: 100%;
  width: 100%;
margin: 0%;
padding: 0%;
}
.Bag:hover{
transform: scale(1.3,1.3);
transition:all .5s ease  ;
}
.firstrow{
  border: 2px solid black;
  background-color: antiquewhite;
  width: 20%;
  height: 25%;
text-align: center;
display: inline-block;
/* margin-right: 1.5%  */
position: relative; 
overflow: hidden;
position: relative;

}
.firstrow:hover .overlay,.firstrow:hover .overlay1 {
  opacity: 1;
  height: 1;
}
#moreh1 a{
  font-family: lobster;
  text-decoration-line: none;
}



.MORE{
border-radius:50%; 
}
.formore{
/* display: inline; */
position: absolute;
right: 0%;

font-size:smaller;
}
 #more{
width:15%;
display: inherit; 
 }

 .overlay {
  position: absolute;
  bottom: 0;
left: 0%;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  /* Black see-through */
  color: #f1f1f1;
  width: 50%;
  transition: .5s ease;
  opacity: 0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.overlay1 {
  position: absolute;
  bottom: 0;
  /* left: 0; */

  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  /* Black see-through */
  color: #f1f1f1;
  width: 50%;
  transition: .5s ease;
  opacity: 0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}


img:hover{
  transition: all .5 ease-in;      
}
.firstrow:hover .overlay {
  opacity: 1;  } 


 /* for end the page */
#end{
width: 100%;
 height: 20%; 
text-align: start;
position:relative;
display: inline-flex;
color: white;
/* background-color: black */
}

.secondEnd,thirdEnd,fourEnd{
  display: inline-block;
width: 25%;

}
.fourEnd{
  text-align: center;
  position: absolute;
  right: 0;
}
.fourEnd-ka .fa{
  background-color: white;
  color: black;
    padding: 20px;
    font-size: 24px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
  
  }
  .fourEnd .fa{
    background-color: white;
    color: black;
      padding: 20px;
      font-size: 24px;
      text-align: center;
      text-decoration: none;
      margin: 5px 2px;
      border-radius: 100%;
    /* background: rgba(red, green, blue, alpha) */
    }
  .fa fa :hover{
  opacity: 0.2;
}