*{
    margin:0;
    box-sizing:border-box;
    font-family:'Noto Sans', sans-serif;
}

.navbar{
    height:60px;
    width:100%; /*Not responsive*/
    background-color:#0F1111;
    color:#FFFFFF;
  display: flex;
  align-items: center;
 
}

.nav_logo {
    height: 60px;
    width: 140px;
    display: flex;
    justify-content: center;
    align-items:center;
}

.logo {
    background-image: url(amazon_logo.png);
    height: 50px;
    width: 110px;
    background-size: cover;

}
.border{
    border: 1.5px solid transparent;
}
.border:hover{
    border: 1.5px solid white;
    cursor:pointer;
    border-radius:3px;
}
/*box2*/
.nav_address{
    margin-left: 10px;
    height:50px;
    width:88px;
    display: flex;
    flex-direction: column;  /* stack lines */
    justify-content: center;
}

.firstText{
   color:#cccccc;
   font-size: 14px;
   margin-left:20px
}
.secText{
    font-size: 16px;
    color:white;
    margin-left:5px;
}

.icon{
    display:flex;
    align-items: center;
}
/*box3*/
.nav_search{
display:flex;
margin-left:25px;
flex:1;
max-width:800px;
}
.departments{
    background-color:#E6E6E6;
    height:40px;
    width:50px;
    font-size:12px;
    text-align:center;
    border:none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.departments:hover{
    background-color:#d5d5d5;
}
input{
    height:40px;
    width:100%;
    font-size:1rem;
    border: none;
}
.search_icon{
    border:2px solid #febd69;
    height:40px;
    width:45px;
    background-color:#febd69;
    color:black;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.search_icon:hover{
border:2px solid #f3a847;
background-color: #f3a847;
}
.search_icon:active{
border:2px solid #fa9c20;
background-color: #f3a847;
transform:scale(1.1);
font-size:18.5px;
}
/*box4*/
.country{
    margin-left:30px;
    height:50px;
    width:59px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    
}
.flag{
    background-image:url(us_flag.png);
    height:11px;
    width:19px;
    background-size:cover;
    margin-top:15px;
    margin-right:2px;
}
.country_icon{
    margin-top:15px;
    background-color:transparent;
    border:none;
    color:white;
    font-weight:bold;
}

/*box5*/
.account{
height:50px;
width:113.52px;
margin-left:25px;
display: flex;
flex-direction: column;
justify-content: center;
padding-left:10px;
}
.line1{
    font-size:12px;
}
.line2{
    font-size:14px;
    font-weight:bold;
}

/*box6*/
.order{
height:50px;
width:77px;
margin-left:25px;
display: flex;
flex-direction: column;
justify-content: center;
padding-left:10px;
}

/*box7*/
.cart{
   height:50px;
   width: 75px;
   margin-left:25px;
   display: flex;
   align-items:center;
   justify-content: center;
}
.cart_icon{
    font-size:25px;
}
.cart-text{
    font-size:16px;
    font-weight:bold;
    margin-top:10px;
}


.panel{
    background-color:#242f3f;
     color:white;
    height:39px;
    width:100%;
   display:flex;
   align-items:center;
}

.op1{
    height:39px;
    width:58px;
    display:flex;
    align-items:center;
    margin-left:11px;
    font-weight:bold;
    font-size:14px;
    justify-content:center;
}
.fa-solid{
    width:25px;
}
.opns {
    display: flex;
    align-items:center;
}
.op{
    font-size:14px;
    height:39px;
    margin-left:10px;
    display: flex;
    align-items:center;
    padding: 0px 10px;
    cursor:pointer;
}

.hero-section{
    background-image: url(hero_image.jpg);
    height:360px;
    width:100%;
    background-size:cover;
    border-image-repeat:stretch;
    display:flex;
    justify-content:center;
    align-items:flex-end;
}
.hero-msg{
    height:40px;
    width: 97%;
    background-color:white;
    color:black;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    margin-bottom:35px;
    padding:0px 14px;
}

.hero-msg a{
    color:#2162a1;
    text-decoration:none;
}
.shop-section {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 5px;
  background-color: #e3e6e5;
  padding: 5px 0px;
}
.box{
    height:420px;
    width:23%;
    padding-top:20px;
    padding-bottom:15px;
    background-color:white;
    margin-top:20px;
    cursor:pointer;
    transition: transform 0.2s ease;
}
.box:hover{
    transform:scale(1.02);
}
.box p{
    font-size:21px;
    color:black;
    font-weight:bold;
    margin-left:20px;
}
.box a{
    font-size:13px;
    color:#2162a1;
    text-decoration:none;
    margin-left:20px;
    margin-bottom:20px;
    display: inline-block;
}
.image {
    height:303px;
    background-size:cover;
    margin-left: 20px;
    margin-top:10px;
    margin-bottom:20px;
    margin-right:20px;
}
.b1{
    background-image:url(box1_image.jpg);
}
.b2{
    background-image:url(box2_image.jpg);
}
.b3{
    background-image:url(box3_image.jpg);
}
.b4{
    background-image:url(box4_image.jpg);
}
.b5{
    background-image:url(box5_image.jpg);
}
.b6{
    background-image:url(box6_image.jpg);
}
.b7{
    background-image:url(box7_image.jpg);
}
.b8{
    background-image:url(box8_image.jpg);
}
footer{
  background:#131A22;
  color:white;
  text-align:center;
  padding:20px;
}