#container{
    width:1500px;
    display: flex;
}
#leftmenu{
    width:200px;
    height:900px;
    padding-left: 50px;
} 
#mainbody{
    width:1200px;
    margin-left: 50px;
}
#category{
    margin-top: 20px;
    display: flex;
    width:1150px;
    height:350px;
    justify-content: space-between;
}
#category>div{
    width:260px;
    height:350px;
    text-align: center;
}
.btn1{
    padding: 10px 50px;
    border:1px solid black;
    background: none;
    margin-top: 20px;
    cursor: pointer;

}
.btn1:hover{
    color:white;
    background-color: black;
}
#lowertext{
    font-size: 17px;
    line-height: 30px;
    color:rgb(145, 143, 143)
}
#lowerbox{
    width:800px;

}
img{
    cursor:pointer;
}
h2{
    font-family: Trade Gothic W01 Light,Arial,sans-serif;
    font-weight: 400;
}
/* these style for text shop by category on a horixontal line */
#catestyle{
    font-family: Trade Gothic W01 Bold_2,Arial,sans-serif;;
    text-align: center;
    position: relative;
}
#catestyle::before{
    content:"";
    display:block;
    width:480px;
    height:1px;
    background: black;
    position: absolute;
    left:0;
    top:50%;
}
#catestyle::after{
    content:"";
    display:block;
    width:480px;
    height:1px;
    background: black;
    position: absolute;
    right:0;
    top:50%;
}
#menu{
    font-family: Trade Gothic W01 Bold_2,Arial,sans-serif;
}
#menutext{
    color:rgb(158, 157, 157);
    font-family: sans-serif;
    font-size: 15px;
    cursor: pointer;
} 
   #navigation{    
    text-align: center; 
       
    margin: auto;
    width: 100%;
    display: flex;
    height: 60px;
    background-image: url("https://customercare.bathandbodyworks.com/euf/assets/images/customerCARE_gingham_d.png");
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 20px;
    margin-top: 0%;
}
#navigation>div{
    text-align: center;
    justify-content: center;
    margin: auto;
    width: 60%;
    display: flex;
    background-color: white;
    border: 1px solid cornflowerblue;
    height: 44px;
    color: rgb(28, 28, 160);
    font-weight: bold;
    margin-top: 14px;
}

#a{
    padding: 15px;
    color: rgb(28, 28, 160);
    
}
#a:hover{
    text-decoration: none;
}
#navdes{
    text-align: right;
    justify-content: right;       
    width: 100%;
    display: flex;
    height: 48px;
    background-color: rgb(235, 235, 235);
    color: rgb(28, 28, 160);
    padding-right: 2%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#b{
    padding: 18px;
    color: rgb(73, 73, 73);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#ser{
    height: 50px;
    text-align: center;
    justify-content: center;
    width: 100%;    
    display: flex;         
    font-size: 20px;    
    margin-left: 70px;
}
#hed{
color: tan;
}
i{
    margin-top: 20x;
}
#blog{
    line-height: 30px;
    font-size: 20px;
}
#search{
    padding: 40px;
    font-size: 25px;
}
#sign{
    padding: 38px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#sign:hover{
    text-decoration: none;
}
.btn:hover {
  background: #0b7dda;
}
#hed:hover{
    color: sandybrown;
}
#ser1{
    height: 38%;    
    width: 340px;           
    margin-left: 50px;
    padding: 10px;
    margin-top: 30px;
}
#t{
    margin-top: 50px;
    justify-content: space-around;
    display: flex;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#na{
    text-decoration: none;
}
#na:hover,#gift:hover,#offers:hover,#a,#b ,#b:hover{
        text-decoration: underline;
        
        
      }
      #b:hover {
        text-decoration: none;
        
      }
      #ser1:hover {
        text-decoration: none;
        
      }
      #gift{
       color: red;
       font-weight: bold;
       text-decoration: none;
      }
      #offers{
       color: green;
       font-weight: bold;
       text-decoration: none;
      }
      #b,#location{
    padding: 18px;
    color: rgb(73, 73, 73);
}
#b:hover {
        text-decoration: none;
        
      }
      #location:hover{
         color: blue;
         cursor: pointer;
         
        }
        #baa{
            line-height: 30px;
            text-decoration: none;
            color: slategrey;
        }
        #baa:hover{
            text-decoration: none;
            color: rgb(60, 60, 211);
        }
        #home:hover{
          text-decoration: none;
        }
        #searchbtn{
            width: 100px;
            height: 41px;            
            margin-top: 30px;
            border: 1px solid black;
        }
        #search{
            padding: 10px;
        }
        #searchbtn:hover{
         background-color: slategrey;
        }
        #search:hover{
         color: white;
        }
        #hed{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        input{
            width: 150px;
            height: 26px;
            margin-top: 0%;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .fa {
  padding: 10px;
  font-size: 50px;
  width: 20px;
  height: 20px;
  text-align: center;
  justify-content: center;
  text-decoration: none;  
  border-radius: 50%;
  justify-content: space-around;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.fa:hover {
    opacity: 0.7;
}
      .fa-facebook {
  background: #3B5998;
  color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
}
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-youtube {
  background: #bb0000;
  color: white;
  
}
.fa-pinterest {
  background: #cb2027;
  color: white;
}
        #btn{
            color: white;
            background-color: black;           
            padding: 7px 15px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        #btn:hover{
            background-color: rgb(228, 226, 226);
            color: black;
            border: transparent;
        }
        
        #footer{
            display: flex;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            width: 90%;
            margin: auto;
        }
        #fhead{
            text-align: left;
            justify-content: left;  
        }
        #info{
            width: 30%;
        }
        #abtacc{
            width: 25%;
            margin-left: 20px;
        }
        #abtdis{
            width: 25%;
            margin-left: 20px;
        }
        #abtfind{
            width: 25%;
            
        }
        #abtcust{
            width: 25%;
            margin-left: 20px;

        }
        #footanc{
            text-decoration: none;
            line-height: 26px;
            color: rgb(102, 101, 101);
        }
        #footanc:hover{
            color: #55ACEE;
        }
        #imga{
          width: 50%;
          height: 100px;
          margin-left: auto;
        }
         #last{
       margin-top: 60px;
        width: 100%;
        height: 100px;
        background-color: rgb(223, 221, 221);        
        
        justify-content: center;       
       

    }
    #cr{
        margin-top: 50px;
        text-align: center;
        
        margin: auto;
        
    }
    #bottom{       
       
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    #infom{
        margin: auto;
        justify-content: center; 
        align-content: center;
        margin-bottom: 30px;
        margin-left: 15px;
       
    }
       #account{
         text-decoration: none;
         color: white;
        
       } 
        #account:hover{
          background-color: transparent;
          color: black;
        }
        #abc{
            width: 100%;
            margin: auto;
        }
        #searchbtn{
            width: 100px;
            height: 41px;            
            margin-top: 30px;
            border: 1px solid black;
        }
        #search{
            padding: 10px;
           
        }
        #searchbtn:hover{
         background-color: slategrey;
        }
        #search:hover{
         color: white;
        }
        #hed{
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        li {
       list-style-type: none;
   }

   .menu-bar {
       text-align: center;
   }

   #grid {
       display: grid;
       grid-template-columns: repeat(6, 1fr);
   }

   .menu-bar ul {
       list-style-type: none;
       margin-bottom: 10px;
   }

   .menu-bar ul li {
       width: 100%;
       margin-right: 50px;
       margin-bottom: 10px;
   }

   .dropdown {
       display: none;
   }

   .dropdown ul {
       display: block;
   }

   .menu-bar ul li:hover .dropdown {
       display: block;
       justify-content: start;
       text-align: start;      
       
       
   }

   .sub-dropdown {
       display: block;
   }

   .sub-dropdown {
       display: none;
   }

   .dropdown ul li:hover .sub-dropdown {
       margin-left: 200px;
       justify-content: start;
       text-align: start;
       display: block;
       cursor: pointer;
       color: rgb(57, 57, 252);
      
   }

   a {
       color: blue;
   }