* {
  margin: 0;
  font-family: arial;
  border: border-box;
}
.navbar {
  height: 60px;
  background-color: #0f1111;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.nav-logo {
  height: 50px;
  width: 100px;
}

.logo {
  background-image: url("img/amazon_logo.png");
  background-size: cover;
  height: 50px;
  width: 100px;
  align-items: center;
}

.border {
  border: 2px solid transparent;
}

.border:hover {
  border: 2px solid whitesmoke;
}

/* box 2 */
.nav-address {
  height: 50px;
  width: 75x;
  padding-left: 5px;
  padding-right: 5px;
}

.add-first {
  color: #cccccc;
  font-size: 0.85rem;
  margin-left: 20px;
}

.add-sec {
  font-size: 1rem;
  margin-left: 3px;
}

.add-icon {
  display: flex;
  align-items:center;
}

/** box 3 **/

.nav-search{
  display:flex;
  width: 650px;
  height:40px;
  justify-content:space-evenly;
  align-items:center;
}

.nav-search:active {
 border: 5px orange;
}

.search-select{
  background-color:#E6E6E6;
  width:200px;
  height:40px;
  text-align:center;
  border-radius:5px 0px 0px 5px ; /** border-top-left-radius:3px; **/
  border:none;
}

.search-input{
width:100%;
height:38px;
font-size:1rem;
border:none;
}

.search-icon{
  width:45px;
  align-items:center;
  display:flex;
  justify-content: center;
  height:40px;
  background-color:#f3a847;
  border-radius:0px 5px 5px 0px ;
  font-size:1.2rem;
}

.greetings{
 font-size:0.7rem;
}

.nav-account{
  font-size:0.85rem;
  font-weight:700;
}

.returns{
 font-size:0.7rem;
}

.order{
  font-size:0.85rem;
  font-weight:700;
}

.nav-cart{
  display:flex;
}

.cart-logo{
  font-size:2rem;

}

.cart{
  font-size:1rem;
  font-weight:700;
  /* justify-content:bottom ; */
  margin-top:15px;
}

/* panel */

.panel{
  background-color:#222e3d ;
  height:40px;
  display:flex;
  color:white;
  align-items:center;
  justify-content: space-evenly;
}

.panel-ops p{
  display:inline;
  margin:5px;
}

.panel-ops {
  width:85%;
  font-size:0.85rem;

}

/* hero section */
.hero-section{
  background-image:url(img/hero_image.jpg);
  height:500px;
  width:100%;
  background-size:cover;
  align-items:flex-end;
  justify-content:center;
  display:flex;
}

.hero-msg{
  background-color:white;
  width:90%;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}