*{
    margin: 0;
    font-family: arial;
    border: border-box;
}
.navbar{
    height: 60px;
    background-color: black;
    color: white;
    display: flex;
    /* by align-items all ites of navbar will be at center from y axis */
    align-items: center;
    justify-content: space-evenly;
}
.nav-logo{
    height: 50px;
    width: 100px;
}
.logo{
    background-image: url("ama.png");
    background-size: cover;
    height: 50px;
    width: 100px;
}
.border{
    border: 1.5px solid transparent;
}

.border:hover{
    border: 1.5px white solid;
}

/* box2 of navbar */
.add-icon{
    display: flex;
}
.add-first{
    color: #cccccc;
    /* rem used so that it will adjust within its box and is good for accessing and limiting or increasing the size of page */
    font-size: 0.85rem;
    margin-left: 15px;
}
.add-second{
    font-size: 1rem;
    margin-left: 3px;
}

  /* for box 3 in navbar */
  .nav-search{
    display: flex;
    background-color:pink;
    width: 620px;
    height: 40px;
    border-radius: 4px;
    /* justify-content is used so that search bar can fully spread; */
    justify-content: space-evenly;
  }
.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 as 100% so that remaining space will be taken by search bar */
    width: 100%;
    font-size: 1rem;
    border: none;
}

.search-icon{
    width: 45px;
    display: flex;
    /* justify-content for making it in center; */
    justify-content: center;  
    /* and then align items will take in mid that is from top to mid at center place */
    align-items: center;
    /* here font size for icon of search */
    font-size: 1.2rem; 
    background-color: #febd68;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* box 4  of navbar */
span{
    font-size: 0.7rem;
}
.nav-second{
    font-size: 0.85;
    /* here font-weight is for lighter and darker shade of text; */
    font-weight: 700;
}
.nav-search:hover{
    border: 2px solid orange;
}
 /* box 6 of navbar */

 .nav-cart i{
    /* here only i written for changing th font size of icon not for text part which is attached to icon */
    font-size: 30px;
 }
 .nav-cart{
    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-ops p{
    display: inline;
    width: 70%;
    font-size: 0.85rem;
    margin-left: 15px;
}
.panel-deals{
    font-size: 0.9rem;
    font-weight: 700;
}


/* hero section 2nd part of page or this page contain main content */
.hero-section{
    background-image: url("hero.png");
    height: 300px;
    background-size: cover;
    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: 20px;
}

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

/* fourth part of page that is shopping */

/* .shop-section */
.box{
    /* border: 2px solid black; */
    height: 400px;
    width: 23%;
    background-color: white;
    padding: 20px 0px 15px;
    margin-top: 15px;

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

.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;
}




/* footer */
footer{
    background-color:#232F3E ;
    margin-top: 2rem;
    margin-left:  0%;
}
footer a{
    color: rgb(244, 95, 162);
    text-decoration: none;
}
footer a:hover{
    color: rgb(177, 248, 90);
}
.first-footer{
    background-color:#0f1111;
    color:white;
    text-align: center;
    margin-top: 8rem;
    margin-bottom: 5px;
}
.second-footer{
    display:flex;
    justify-content: space-evenly;
    background-color:#232F3E;
    color: white;

}
.ul-para{
    font-weight: 700;
}
.second-footer a{
 text-decoration: none;
 display: block;
 color: white;
}

.second-footer a:hover{
text-decoration: underline;


}