*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family:Arial, Helvetica, sans-serif;
}
body{
    background-color: rgb(207, 206, 206);
}
.nav{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: #0f1111;
    color:white;
    padding:0.2rem;
    max-width:100%;
}
.nav-logo{
    width:6rem;
    height:auto;
    padding:0.1rem;
}
.logo{
    background-image: url("images/amazon-logo.png");
    background-size: cover;
    background-position: center;
    width:100%;
    height:3em;
}
.border:hover{
    border:1.5px solid white;
}

.nav-location{
    padding:0.5rem;
}
.location-first{
    font-size: 0.8rem;
    color:#cccccc;
    margin-left:18px;
}
.location-second{
    font-size: 1rem;
    color:#ffffff
}
.location-icon{
    display:flex;
    align-items: center;
    gap:0.25rem;
}



.nav-searchbar{
    display: flex;
    flex:1 1 300px;
    justify-content: space-evenly;
    height:2.5rem;
    border-radius:0.25rem;
    background-color: rgba(245, 211, 118, 0.863);
    color:black;
    overflow: hidden;
}
.nav-searchbar:hover{
    border:2px solid orangered;
}
.search-select{
    background-color: #f3f3f3;
    width:3.5rem;
    text-align: center;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border:none;
}
.search-input{
    flex:1;
    font-size: 1rem;
    border:none;
}
#search-icon{
    width:2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.3rem;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.first-p{
    font-size:0.7rem;
    line-height: 1rem;
}
.second-p{
    font-size: 0.8rem;
}
.nav-same{
    padding: 0.5em;
    min-width: 5rem;
}
.nav-cart{
    font-size: 1.8rem;
    padding:0.5rem;
}


.panel{
    background-color: #232F3E;
    color:#ffffff;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    height:auto;
    max-width:100%;
    padding:0.2rem;
    flex:1 1 5%;
}
.panel-all{
    padding:0.6rem;
}
.panel-all strong {
    font-size: 1.3rem;
}
.panel-all i{
    font-size:1.5rem;
}
.panel-menu{
    padding-left:1rem;
    display:flex;
    flex-wrap: wrap;
    padding-left:0.1rem;
    align-content: flex-start;
    width:90%;
    gap:0.2rem;
    font-size: 1.3rem;   
}
.panel-menu p{
    padding:0.3rem 0.7rem;
}

.hero{
    background-image: url("images/top.jpg");
    background-size:cover;
    height:34rem;
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.hero::after{
    content:"";
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:30%;
    background: linear-gradient(to bottom, rgba(255,255,255,0)0%, rgb(207, 206, 206) 100%);
}
.text{
    color:black;
    background-color: white;
    padding:0.8rem 1rem;
    font-size: 1rem;
    height:auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    width:97%;
}
.text a{
    color:#007185;
}
.shopping{
    position:relative;
    margin-top:-14rem;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.box
{
    
    flex: 1 1 250px;
    max-width:300px;
    padding:1rem;
    margin:1rem;
    background-color: white;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    flex:1 1 20%;
    box-shadow: 0 0 0.7rem rgba(0 ,0,0,0.5);
}
.box-img{
    margin-bottom:1rem;
    margin-top:1rem;
}
img{
    height:auto;
    width:100%;
}
.box-para
{
   color: blue;
   text-decoration: none;
}

.foot-panel1{
    background-color: #2f3946;
    color:#ffffff;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height:auto;
    max-width:100%;
    padding:0.4rem;
    margin-top:0.3rem;
}
.foot-panel1 a{
    color:white;
    text-decoration: none;
    font-size: 0.8rem;
}
.foot-panel2{
    background-color: #222f3d;
    color:white;
    height:auto;
    width:100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom:5rem;
}
ul{
    margin-top: 0.7rem;
    padding:1rem;
}
ul a{
    display: flex;
    flex-direction: column;
    font-size: 0.7rem;
    margin-top: 0.3rem;
    color:#dddddd;
}
.foot-panel3{
    height:auto;
    background-color:#222f3d ;
    color:white;
    border-top:0.5px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.end-logo{
        height:auto;
        width: 10%;    
}
.foot-panel4{
    background-color:#222f3d;
    color:white;
    padding:0 0  0.8rem 0;
    height:auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
}
.pages{
    padding-bottom:0.3rem;
}