*{
 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("amazon_logo.png");
 height: 50px;
 width: 100%;
 background-size: cover;


}
.border{
 border: 1.5 solid transparent;
}
.border:hover{
 border: 1.5px solid white;
 
}
/* box 2 */
.add-first{
 color:#cccccc;
 font-size:0.85rem;
 margin-left: 15px ;

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


}
.add-icon{
 display: flex;
 align-items: center;
}
/* box3 */
.nav-search{
 display: flex;
 background-color: pink;
 width: 620px;
 height: 40px;
 border-radius: 4px;


}
.search-select{
 background-color: #f3f3f3;
 width: 50px;
 text-align: center;
 border-top-left-radius: 4px;
 border-bottom-left-radius: 4px;
 border:none;

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

}
.search-icon{
 width: 45px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 1.2rem;
 background-color: rgb(255, 213, 0);
 border-top-right-radius: 4px;
 border-bottom-right-radius: 4px;
 color: #0f1111;
 
}
.nav-search:hover {
 border: 2px solid orange;
}
/* box 4 */
.span {
 font-size: 0.7rem;

}
.nav-search{
 font-size: 0.85rem;
 font-weight: 700;
}
/* }box5 */

.nav-cart{
 display: flex;
 font-size: 0.85rem;

}
.nav-cart i{
 font-size: 30px;
 font-weight: bold;
}

/* panel */
.panel{
 height: 40px;
 background-color: #222f3d;
 display: flex;
 color: white;
 align-items: center;
 justify-content: space-evenly;
}
.panel-ops p{
 display: inline;
 margin-left: 15px;
}
.panel-ops{
 width: 70%;
 font-size: 0.85rem;
}
.panel-deals{
 font-size: 0.9rem;
 font-weight: 700;
}
/* hero section */
.hero-section {
 background-image: url("hero_image.jpg");
 height: 350px;
 background-size: cover;
 display: flex;
 justify-content: center;
 align-items: flex-end;

 
}
.hero-message{
 background-color: white;
 color: black;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 0.8rem;
 width: 80%;
 margin-bottom: 25px;


 
}
.hero-message a{
 color:#007185;


}
/* shop-section */
.shop-section{
 display: flex;
 justify-content: space-evenly;
 background-color: #e2e7e6;
flex-wrap: wrap;


}

.box{
 height: 400px;
 width: 23%;
background-color: white;
padding: 20px 0px 15px;
margin-top: 15px;
}
.box-img{
 height: 300px;
 background-size: cover;
 background-repeat: no-repeat;
 margin-top: 1rem;
 margin-bottom: 1rem;
 


}
.box-content{
 margin-left: 1rem;
 margin-right: 1rem;

}
.box-content p{
 color:#007185
}
/* footer */
#footer{
 margin-top: 15px;
}
.foot-panel1{
 background-color: #37475a;
 color: white;
 height: 50px;
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 0.85;

}
.foot-panel2{
 background-color: #222f3d;
 color: white;
 height: 500px;
 display: flex;
 justify-content: space-evenly;

}
ul{
 margin-top: 20px;
}
ul a{
 display: block;
 font-size: 0.85rem;
 margin-top: 10px;
 color: #dddddd;

}
.foot-panel3 {
 background-color: #222f3d;
 color: white;
 border-top: 0.5px solid white;
 height: 70px;
 display: flex;
 align-items: center;
 justify-content: center;

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

}
.foot-panel4{
 background-color: #0f1111;
 color:white;
 height: 70px;
 font-size: 0.7rem;



}
.pages{
 text-align: center;
 padding-top: 25px;
}
.copyright{
 padding-top: 5px;
 text-align: center;
}
/* ----------- Responsive Design ----------- */
@media screen and (max-width: 768px) {
  .nav-search {
    width: 90%;
    margin: 10px auto;
  }

  .shop-section {
    flex-direction: column;
    align-items: center;
  }

  .box {
    width: 90%;
  }

  .panel-ops {
    display: none;
  }

  .panel-deals {
    font-size: 0.8rem;
  }

  .foot-panel2 {
    flex-direction: column;
    align-items: center;
    height: auto;
  }

  .foot-panel2 ul {
    margin: 10px 0;
  }

  .hero-message {
    width: 95%;
    font-size: 0.7rem;
  }
}