Style.css

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

.NavBar{
    background-color: #0F1111;
    display: flex;
    justify-content: space-evenly;
    align-content: center;
    padding: 4px;
    height: 60px;
    
}
.NavBar_logo{
   height: 50px;
}
.NavBar_Address{
    padding: 7px 7px;
}
.NavBar_Address>p{
    color: #ccc ;
    font-size: 0.8rem;
    margin-left: 0.85rem;
}
.NavBar_location{
    display: flex;
    color: #fff;
    align-content: center;
}
.border{
    border: 1px solid transparent;
}
.border:hover{
    border: 1px solid white;
    border-radius: 3px;
}

.NavBar_SearchBox {
    display: flex;
    margin: 6px;
    box-sizing: border-box;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 7px;
}
.NavBar_SearchBox:hover{
    border: 2px solid #ff990a;
}
.Departments>*{
    width: 50px;
    height: 35px;
    padding: 5px;
    font-size: 14px;
    background-color: #fff;
    border: none;
    border-right: rgb(182, 181, 181) 1px solid;
    background-color: #e4e3e3;
    border-top-left-radius: 5px;
    border-end-start-radius: 5px;
}
.Departments>*:focus{
    outline: none;
    background-color: #fff;
}

.SearchBar{
    padding: 14px 7px;
    font-size: 0.8rem;
    height: 35px;
    border: none;
    width: 40vw;
}
.SearchBar:focus{
    outline: none;
}
.Search_icon{
    border-top-right-radius: 5px;
    border-end-end-radius: 5px;
    background-color: #febd68;
    height: 35px;
    width: 45px;
    padding: 7px 12px;
    font-size: 1.2rem;   
}
#search_icon{
    height: 30px;
}

/* Box4 */
.NavBar_language{
    display: flex;
    justify-content: center;
    align-content: center;
    height: 50px;
    width: 88px;
    padding: 18px 8px;
}
.language_list>select{
    width: 45px;
    height: 20px;
    background-color: black;
    color: #fff;
    border: none;
}
.language_list>*:focus{
    background-color: #fff;
    color: black;
    border: none;
    outline: none;
}


/* Box5*/

.us_flag{
    height: 20px;
}

/* box6 */

.NavBar_return{
    color: #fff;
    height: 50px;
    width: 77px;
    padding: 8px 7px;

}
#first_para{
    font-size: 0.8rem;
}
#second_para{
    font-size: 1rem;
    font-weight: 500;
}


.NavBar_signin{
    color: #fff;
    width: 131.5px;
    height: 50px;
    padding: 8px 8px;
}

/* BOX7 */

.NavBar_cart{
    height: 20px;
    color: #fff;
    display: flex;
    align-content: center;
    justify-content: center;
    height: 50px;
    width: 84px;
    padding: 12px; 
}
#cart{
    font-size: 1.5rem;
}
#cart_para{
    padding: 6px;
    font-weight: 700;
}


/* PANEL */
.Panel{
    height: 39px;
    background-color: #131b28;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* BOX1  */
.Panel_All{
    color: #fff;
    height: 37.5px;
    width: 58.5px;
    padding: 7px 9px;
    display: flex;
    align-content: center;
}
#menu_icon{
    font-size: 1.2rem;
    color: #e4e3e3;
}
.Panel_All span{
    padding: 2px 5px;
    font-weight: 600;
}


/* BOX2 */

.Panel_ops{
    display: flex;
    margin-left: 10px;
    align-items: center;
}


.Panel_ops>a{
    text-decoration: none;
    color: #fff;
    padding: 8px 9px ;
    
}

/* BOX3 */
.Panel_box3{
    width: 173px;
    height: 26px;
    display: flex;
    align-items: center;
    /* margin: 10px; */

}
.Panel_box3>a{
    text-decoration: none;
    color: #fff;
    padding: 5px 7px;
    font-weight: 700;
    margin-right: 10px;

}

.box1{
    display: flex;
    margin-left: 10px;
}



/* HERO SECTION  */

.Hero_section{
    background-image: url("hero_image.jpg");
    height: 300px;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    
}
.Hero_msg{
    background-color: #fff;
    color: black;
    height: 40px;
    width: 95vw;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 1.7%;
   font-size: 0.9rem;
}
.Hero_msg>a{
    text-decoration: none;
    color: #007185;
    
}


/* MAIN SECTION  */


.shop_section{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #e2e7e6;
    margin-top: 16px;

}

.box{
    height: 400px;
    width: 23%;
    background-color: #fff;
    padding: 20px 0px 15px;
    margin-top: 15px;
    margin-bottom: 15px;
    
}
.image{
    height: 290px;
    background-size: cover;
    margin: 1rem 0rem;
}
.box>h2{
    background-color: #fff;
    color: #0F1111; 
}
.box span a{
    margin-bottom: 10px;
    text-decoration: none;
    color: #007185;  
}

.box_content{
    margin: 0rem 1rem;   
}

/* FOOTER  */

.footer_box1{
    height: 49px;
    padding: 15px 0px;
    background-color: #151d2b;
    color: #fff;
    text-align: center;
    font-size: 0.85rem;  
}

.footer_box2{
    display: flex;
    justify-content: space-evenly;
    background-color: #141921;
    height: 370px;
    border-bottom: 0.1rem solid gray;
}

.list{
    height: 320px;
    color: #fff;
    margin: 20px ; 
}
.list>h2{
    padding: 6px 0px 14px;
    font-size: 1.1rem;
}
.list>ul>li {
    text-decoration-style: none;
    list-style-type: none;
    color: #DDDDDD;
    outline: none;
    padding: 6px 0px;
    font-size: 0.95rem;
}
.box3{
    background-color: #141921;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer_logo{
    height: 60px;
}


.box4{
    height: 80px;
    background-color: #0a0e16;
    padding: 10px 0px 30px;
}
.box4_first,
.box4_second{
    display: flex;
    justify-content: center;
    align-content: center;
    color: #DDDDDD;

}
.box4_first>a{
    text-decoration: none;
    color: #DDDDDD;
    padding: 0px 8px;
    font-size: 0.8rem;
}
.box4_second{
    padding: 0px 8px;
    font-size: 0.8rem;
    margin-top: 0.1rem;
}