project Amazon.css

* {
    margin:0;
    font-family:Arial;
    
}
.navbar{
    height:60px;
    background-color:#0f1111;
      color:white;
      display:flex;
      align-items:center;
      justify-content:space-evenly;
}
.nav-logo {
    height:45px;
    width:130px;
}
.logo {
    background-image:url("amazon-logo-editorial-free-vector.jpg");
    background-size: cover;
    height:45px;
    width:130px;
    
}
.border {
border:3px solid transparent;
}
.border:hover{
    border:3px solid white;
}
.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;
}
i{
    display:inline-block;
    height:2rem;
    width:2rem;
    color:yellow;
   
}
.nav-search{
    display:flex;
    justify-content:space-evenly;
    background-color:paleturquoise;
    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,174,0);
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    color:0f1111;
}
.nav-search:hover{
    border:2px solid orange;
}
span{
    font-size:0.7rem;
}
.nav-second{
    font-size:0.85rem;
    font-weight:700;
}
.nav-cart i{
    font-size:30px;
}
.nav-cart{
    font-size:0.85rem;
    font-weight:700;
}
.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{
    background-image:url("hero_image.jpg");
    background-size:cover;
    height:350px;
    display:flex;
    justify-content:center;
    align-items:flex-end;
}
.hero-msg{
    background-color:white;
    color:black;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    width:80%;
    margin-bottom:25px;
}
.hero-msg a{
    color:#007185;
    }
    /**shop-section**/
    .shop-section{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-evenly;
        background-color:#e2e7e6;
            }
    .box{
        border:2px solid transparent;
        height:400px;
        width:23%;
        background-color:white;
        padding:20px 0px 15px;
        margin-top:15px;
        margin-bottom:1rem;
    }
    .box-img{
        height:350px;
        background-size:cover ;
        margin-top: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.85rem;
    }
    .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;
        justify-content:center;
        align-items:center;
    }
    .logo{
        background-image:url("amazon-logo-editorial-free-vector.jpg");
        background-size: cover;
        height:45px;
        width:130px;
    }
    .foot-panel4{
        background-color:#0f1111;
        color:white;
        height:80px;
        text-align:center;
           }
    .pages{
          padding-top:25px;
    }
    .copyright{
        padding-top:5px;
         }