body::-webkit-scrollbar {
  display: none;
}
body
{
  font-family: 'Albert Sans', sans-serif;
  font-size: 18px;
}
header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 4px 4px 4px lightgray;
  max-width: 100%;
  position: relative;
  /* background:linear-gradient(black,white); */
  background-color: white;

 
}



#img-1
{width: 80px;
background-color: transparent;}
#img-2
{width: 50px;
height: 40px;}



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

 /* The dropdown container */
 .dropdown 
 {
  float: left;
  overflow: hidden;
 }

 /* Dropdown button */
 .dropdown  {
   border: none;
   outline: none;
   color: rgb(255, 255, 255);
   padding: 14px 16px;
   background-color: inherit;
   font: inherit; /* Important for vertical align on mobile phones */
   margin: 0; /* Important for vertical align on mobile phones */
 }
 .dropbtn{
   border: none;
   outline: none;
   color:black;
   background-color: rgb(255, 255, 255);
   padding: 14px 16px;
   margin: 0;

 }
 .dropbtn1{
  border: none;
  outline: none;
  color:black;
  background-color: rgb(255, 255, 255);
  padding: 14px 16px;
  margin: 0;

}



 .dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   top: 85%;
   width: 100%;
   height: 250%;
   justify-content: space-around;
   left: 0;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
 }


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

 /* Create three equal columns that floats next to each other */
 .column {
   text-align: center;
   width: 50%;
   background-color: rgb(255, 255, 255);
   /* height: 100%; */
   color: #000;
   display: flexbox;
   flex-direction: row;
  
 }
 .dropdown-links
 {
  display: flex;
  flex-direction: column;
  
 }
 /* Style links inside the columns */
 .column a {
   color: black;
   padding: 16px;
   text-decoration: none;

 }

 /* Add a background color on hover */
 .column a:hover {
   background-color: #ddd;
 }

 /* Clear floats after the columns */
 .row:after {
   content: "";
   display: table;
   clear: both;
 }





/* 
user dropdown 2 */

.dropdown-content2 {
  display: none;
  position: fixed;
  background-color:#F0EAE0;
  top: 0%;
  width: 15%;
  height: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  flex-direction: column;
  

}
#signed-in{
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: flex-start;

}
#profile-pic{
  width: 50%;
  height:5%;
  top: 5%;
  position: absolute;
}
#profile-pic1{
  width: 100%;
  height: 200%;
} 
#Profile{

position: absolute;
text-decoration: none;
top: 20%;
--h: 1.2em;   
line-height: var(--h);
color: #0000;
text-shadow: 
  0 calc(-1*var(--_t, 0em)) #000, 
  0 calc(var(--h) - var(--_t, 0em)) #9C8B6E;
overflow: hidden;
transition: .3s;
}
#Profile:hover {
  text-shadow: 
    0 calc(-1 * var(--h)) #000, 
    0 0 #9C8B6E;
}
#About{
  position: absolute;
  top: 30%;
  --h: 1.2em;   

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 calc(-1*var(--_t, 0em)) #000, 
    0 calc(var(--h) - var(--_t, 0em)) #9C8B6E;
  overflow: hidden;
  transition: .3s;
}
#About:hover {
  text-shadow: 
  0 calc(-1 * var(--h)) #000, 
  0 0 #9C8B6E;}


  


  


#checkout{
position: absolute;
top: 40%;
--h: 1.2em;   

line-height: var(--h);
color: #0000;
text-shadow: 
  0 calc(-1*var(--_t, 0em)) #000, 
  0 calc(var(--h) - var(--_t, 0em)) #9C8B6E;
overflow: hidden;
transition: .3s;}


#checkout:hover {
  text-shadow: 
    0 calc(-1 * var(--h)) #000, 
    0 0 #9C8B6E}


#settings{
  position: absolute;
  top: 50%;
  --h: 1.2em;   

  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 calc(-1*var(--_t, 0em)) #000, 
    0 calc(var(--h) - var(--_t, 0em)) #9C8B6E;
  overflow: hidden;
  transition: .3s;}
  #settings:hover {
    text-shadow: 
      0 calc(-1 * var(--h)) #000, 
      0 0 #9C8B6E;}

#log-out{
  position: absolute;
top: 70%;
}




.closebtn1{
  position: absolute;
  right: 0;
  text-decoration: none;
  color: black;
  height: 20px;
}
.closebtn1:hover{
  color: red;
}





/* 
user dropdown 1 */
.dropdown-content1 {
  display: none;
  position: absolute;
  background-color:#F0EAE0;
  top: 70%;
  width: 15%;
  height: 300%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  flex-direction: column;
  

}

#sign-up
{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
 

}


#my-acc
{ position: absolute;
  text-decoration: none;
  color: black;
 top: 20%;
 --h: 1.2em;   
 line-height: var(--h);
 color: #0000;
 text-shadow: 
   0 calc(-1*var(--_t, 0em)) #000, 
   0 calc(var(--h) - var(--_t, 0em)) #1095c1;
 overflow: hidden;
 transition: .3s;
}
#my-acc:hover {
  text-shadow: 
    0 calc(-1 * var(--h)) #000, 
    0 0 #1095c1;}


#fav
{text-decoration: none;
color: black;
position: absolute;
top: 40%;
--h: 1.2em;   
 line-height: var(--h);
 color: #0000;
 text-shadow: 
   0 calc(-1*var(--_t, 0em)) #000, 
   0 calc(var(--h) - var(--_t, 0em)) #1095c1;
 overflow: hidden;
 transition: .3s;}

 #fav:hover {
  text-shadow: 
    0 calc(-1 * var(--h)) #000, 
    0 0 #1095c1;}
#sb-1
{
  display: flex;
 border: 1px solid black;
  width: 45%;
  height: 10%; 
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: black;
  position: absolute;
  top: 60%;
  --h: 1.2em;   
 line-height: var(--h);
 color: #0000;
 text-shadow: 
   0 calc(-1*var(--_t, 0em)) #000, 
   0 calc(var(--h) - var(--_t, 0em)) #1095c1;
 overflow: hidden;
 transition: .3s;
  




}
#sb-1:hover {
  text-shadow: 
    0 calc(-1 * var(--h)) #000, 
    0 0 #1095c1;}
#sb-2
{ 
 
 position: absolute;
  width: 100%;
  height: 10%;
  text-align: center;
  top: 80%;




}


#sb-2 a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    rgb(0, 0, 0) 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.4s ease-in-out;
}

#sb-2 a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.5s ease-in-out;
}

#sb-2 a:hover {
 background-position: 0;
}

#sb-2 a:hover::before {
  width:100%;
}



/* #sb-2 a
{


  color: rgb(122, 148, 66);
  text-decoration: none;
  border-bottom: 1px solid rgb(27, 237, 27);

} */

.closebtn2{
 position: absolute;
  right: 0;
  text-decoration: none;
  color: rgb(0, 0, 0);
  cursor: pointer;
  
}

.closebtn2:hover{
  color: red;
}








/* searchbar */
.search-bar {
  margin:0;
  padding:0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  position:relative;
  border: 2px #CADDE4 solid;
  border-radius: 2%;
  transition-duration: 0.2s;
 
}

.textbox {
  width: 0px;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  outline: none;
  transition-duration: 0.05s;
  font-family: 'Quicksand', sans-serif;
}

.search-btn {
  margin: 0;
  width: 45px;
  height: 100%;

}


#sb-pop-up
{
  position: absolute;
  top: 100%;
  width: 100%;
  height: 400%;
  border: 1px solid black;
  display: none;
  backdrop-filter: blur(100px);
  overflow: auto;
  flex-direction: column;
  z-index: 10000;
}

.sps{

  display: flex;
  width: 100%;
  height: 50%;
}

.sp-img{
    width: 50%;
  height: 100%;
}
#spname{
  width: 50%;
  text-align: center;
}








.search-bar:hover > .textbox {
  padding: 0px 10px 0px 10px;
  width: 100%;
  transition-duration: 0.7s;

}
.search-bar:hover>#sb-pop-up
{display: flex;}


.search-bar:hover >.search-btn:hover {
  background: linear-gradient(#EEE3D0,#E8ECEC);
  transition-duration: 0.5s;
}

.search-bar:hover >.search-btn:active {

  color: white;
  transition-duration: 0.1s;
}

 #main-options {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    rgb(0, 0, 0) 50%
  );
   background-size: 200% 100%;
  background-position: -100%; 
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.3s ease-in-out; 
}

#main-options:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}

#main-options:hover {
 background-position: 0;
}

#main-options:hover::before {
  width:100%;
}

.column a {
  background-image: linear-gradient(
    to right,
    #54b3d6,
    #54b3d6 50%,
    rgb(0, 0, 0) 50%
  );
  background-size: 200% 100%;
  background-position: -100%;
  display: inline-block;
  padding: 5px 0;
  position: relative;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: all 0.4s ease-in-out;
}

.column a:before {
  content: '';
  background: #54b3d6;
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.5s ease-in-out;
}

.column a:hover {
 background-position: 0;
}

.column a:hover::before {
  width:100%;
}













/* cart */

.cart
{
  background-color:rgb(255, 255, 255);
  border-radius: 4px;
  position: relative;
  margin-right: 5%;
  cursor: pointer;
}
.cart-amt
{
  position: absolute;
  top: -15px;
  right: -15px;
  border-radius: 50%;
  width: 50%;
  text-align: center;
}

.sidepanel {
  height: 250px; /* Specify a height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 100000; /* Stay on top */
  height: 100%;
  top: 0;
  right: 0;
  background-color:#F0EAE0;
  overflow-x: hidden; /* Disable horizontal scroll */
  /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
  display: flex;
  flex-direction: column;
  overflow: auto;

}
.sidepanel a {

  text-decoration: none;
  color: #000000;
  display: block;
  transition: 0.3s;
  
  
}
/* The sidepanel links */
.sidepanel p{
  text-align: center;
  text-decoration: none;
  color: #000000;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
  color: #f79292;
}

/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
  position: absolute;
  top: 0;
  right: 0%;
  margin-left: 50px;
}


#products{
  display: flex;
  flex-direction: column;
}
.product{
  display: flex;
  width: 99%;
  height: 100%;
  border: 1px solid black;
  margin-bottom: 10%;
  box-shadow: 1px 1px 1px 1px #696161;
  

}
.ip-img{
  width: 50%;
}
#i-d-b{
text-align: center;
}


#name{
  margin: 0;
  margin: 4%;
}
#price{
  margin: 0;
  margin: 4%;
}
#color{
  margin: 0;
  margin: 4%;
}
#size5{
  margin: 4%;
}
#total-price{
  margin: 4%;
}
#info{
    text-align: left;
 width: 50%;
}
.i-button
{
 border: none;
 background-color: transparent;
}
#add-btn:hover{
  color: greenyellow;

}
#minus-btn:hover{
  color: rgb(248, 26, 26);

}
.number-box
{
  text-align: center;
}

#encloser{
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 769px) {
  .dropdown-content1 {
    width: 50%;
  }
}