*{
    margin :0;
    font-family: "Arial";
    border : border-box;
}
.navbar{
    height : 60px;
    background-color : #0f1111;
    color : white;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
.navbar-logo{
    height : 50px;
    width : 100px;
}
.logo{
    background-image : url("amazon_logo.png");
    background-size: cover;
    height : 50px;
    width : 100%;

}
.border{
    border : 2px solid transparent;
}
.border:hover{
    border : 2px solid white;
}
/** box 2  **/

.add first{
    color : #cccccc;
    font-size : 0.80 rem;
    display : flex;
    margin-left : 15px;
}
.add sec{
  font-size : 1 rem;
  margin-left : 3px;
}
.add icon{
    display : flex;
    align-items: center;
}
/** box 3  **/
.nav-search{
    display : flex;
    align-items: center;
    background-color : white;
    width : 620px;
    height : 40px;
    border-radius : 4px;
    margin-left : 20px;
    margin-top : 10px;
}
.search-select {
    background-color: #f3f3f3 ;
    width : 50px;
    border-top-left-radius : 4px;
    border-bottom-left-radius : 4px;
    border : none;
}
.search-input{
    width : 100%;
    font-size : 1 rem;
    border : none;

}
.search-icon{
    width : 45px;
    display : flex;
    align-items:center;
    justify-content: center;
    font-size : 1.2 rem;
    background-color : #febd69;
    border-top-right-radius : 4px;
    border-bottom-right-radius : 4px;
    color:black;
}
.nav-search:hover{
    border : 2px solid orange;
}
/** box 4  **/
.span{
    font-size : 0.7rem;
    align-items:center;
    
}
.nav-second{
    font-size : 0.85rem;
    font-weight :700;
    align-items:center;
    
}
/**  box 5 **/
.nav-icon i{
    font-size : 30px;
}
nav-icon{
    font-size :0.85rem;
    font-weight :700;
    
}


/** panel **/
.panel{
    height : 40px;
    background-color :#222f3d;
    display : flex;
    color : white;
    justify-content: space-evenly;
    align-items: center;
}
.panel-op p {
    display : inline;
    margin-left :15px;
}
.panel-op{
    width :70%;
    font-size : 0.85rem;
}
.panel-deal{
    font-size : 0.9;
    font-weight : 700;
}

/** hero section **/
.hero-section{
    background-image : url("hero_image.jpg");
    background-size:cover;
    height :350px;
    display : flex;
    justify-content: center;
    align-items: flex-end;
}
.hero-mes{
    background-color:white;
    color:black;
    height :40px;
    width : 80%;
    display : flex;
    justify-content: center;
    align-items: center;
    font-size : 0.85rem;
    margin-bottom : 25px;
}
.hero-mes a{
    color : #007195;
}

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

}
.box{   
   height : 400px;
   width : 23%;
   background-color : white; 
   margin-top : 15px;
   padding : 20px 0px 15px;
}
.box-img{
    height:300px;
    background-size: cover;
    margin-top : 1rem;
    margin-bottom : 1rem;
}
.box-content{
    margin-left : 1rem;
    margin-right : 1rem;
}
.box-content p{
    color: #007185;
}

/** Fotter    **/
.foot-panel1{
    background-color : #37475a;
    color : white;
    height : 50px;
    display : flex;
    justify-content: center;
    align-items: center;
    font-size : 0.85rem;
}
.foot-panel2{
    background-color : #222f3d;
    color : white;
    height : 300px;
    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;
    height : 70px;
    display : flex;
    justify-content: center;
    align-items: center;
    border-top: 0.5px solid white;
}
.logo{
     background-image : url("amazon_logo.png");
    background-size: cover;
    height : 50px;
    width : 100px;
}
.foot-panel4{
   background-color : #0f1111;
    color : white;
    height : 80px;
    font-size : 0.85rem;
    text-align : center;
}
.pages{
   padding-top : 25px;
}
.copyright{
   padding-top : 5px;
}