*{
    margin:0;
    padding:0;
    box-sizing: border-box;

}

html,body{
    height: 100%;
    width: 100%;
    scroll-behavior: smooth;
}


.search-box  input:hover{
    background-color: aquamarine;
}

.search-box  input{ 
   height: 25px;
   width: 180px;
   border-radius: 20px;
border: none;
outline-color: white;

padding-left: 7px;
}



.fa-magnifying-glass{
    position: absolute;
    font-size: 14px;
    transform: translate();
    right: 12%;
    top: 70px;
color: black;
}
.upper-line{
    height: 45px;
    width: 100%;
    background-color: #F4B800;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-family: sans-serif;
     
}

.depper-line{
    height: 80px;
    width: 100%;
    background-color: black;
    display: flex; 
 
}


.depper-line img{

height: 80px;
width: 80px;
}

.depper-line-1{
    height: 100%;
    width: 20%;
    background-color: black;
    display: flex;
    justify-content: center;
    
}

.depper-line-2{
    height: 100%;
    width: 50%;
    background-color: black;
    display: flex;
    align-items: center;
    font-family: sans-serif;
    padding-left: 50px;
   
}

.depper-line-3{
    height: 100%;
    width: 30%;
    background-color: black;
   display: flex;
   align-items: center;
   padding-left: 70px;
  font-size: 20px
}


.depper-line-3 i{
    
margin: 9px;
}

.fa-user{
color: white;
}

.fa-truck{
color: white;
}


.fa-cart-shopping{
    color: white;
}




.depper-line-2 a:hover{
    color: blue;
}

.depper-line-2 a{
    color: white;
   text-decoration: none;
  justify-content: space-between;
  margin: 5px 15px;  
}


                           /* designing of login-page starts from here... */
.main-page{
    width: 100%;
    height: 550px;
    border: none;

}

.main-page img{
    height: 100%;
    width: 100%;

}

.glass-drop{
    height: 400px;
    width: 40%;
border: none;
    position: absolute;
    transform: translate();
top: 190px;
right: 390px;
background: transparent;
background-color: rgba(255,255,255,.2);
   border-radius: 30px;
  backdrop-filter: blur(7px);
  box-shadow: 0 0 30px rgba(0,0,0,.5);
  color: white;
}

.glass-drop h1{
color: white;
font-family: sans-serif;
font-size: 38px;
margin: 30px 200px;
}
    



.log-1{
    height: 50px;
    width: 320px;
    margin: 20px 100px;
 
    border: none;
    
    border-radius: 50px;
}

.log-1 i{
    position: absolute;
    transform: translate();
    top: 120px;
    right: 140px;
    color: white;
}


.log-1 input{
    height: 100%;
    width: 100%;
    border-radius: 50px;
    background: transparent;
background-color: rgba(255,255,255,.1);
padding-left: 7px;
font-size: 17px;
border: none;
}

.log-1 ::placeholder{
    color: white;
}


.log-2{
    height: 50px;
    width: 320px;
    margin: 20px 100px;
   border: none;
    border-radius: 50px;
    
}

.log-2 i{
    position: absolute;
    transform: translate();
    top: 190px;
    right: 140px;
    color: white;
}


.log-2 input{
    height: 100%;
    width: 100%;
    border-radius: 50px;
    background: transparent;
background-color: rgba(255,255,255,.1);
padding-left: 12px;
font-size: 17px;
 border: none;
}


.check{
    position: relative;
    left: 40px;   /* right */
    top: 43px;     /* down */
    color: white;
}




.log-2 ::placeholder{
    color: white;
    cursor: pointer;
}

.username{
    color: white;
}

.password{
    color: white;
}

.password-toggle-icon svg {
background-color: white;
margin-right: 10px;
}

 h2{
    font-size: 24px;
    font-family: sans-serif;

}