*{
    margin: 0%;
    padding: 0%;
    border: border-box;/* ess ka matlab hai ka jitni bhi hmm na height or weidth
     deya hoga ossi height or width mai ya border raha ga ess height or width sa
      zyada jaga nhi lainga*/
}
.navbar{
    height: 50px;
    background-color: #0f1111;
    color: white;
    display: flex;
    align-items: center;/*ess ki waja sa jo navbar hai oss mai jo chezza hai wo thora
    top sa nichi hojay ga*/
    justify-content: space-evenly;
}
.navlogo{
    height: 50px;
    width: 100px;
}
.logo{
 background-image: url("amazonprofile.jpg");
 background-size: cover;
 height: 40px;
 width: 100%;
}
/*matlab ka jab hmm navbar mai kisi cheezz per mouse laika jai ga tho oss per
aik box matlab box border ajay ga woo ess hover ki waja sa*/
.border{
    border: 1px solid transparent; /*transparent matlab ka jo background
    ka color hai wahi ess border ka color honga*/
}
.border:hover{
    border: 1px solid white;
}
.addres{
    
}
.addfirst{
    color: #cccccc;
    font-size: 1rem;
    display: flex;
    
}
.addsecond{
       font-size: 1rem;
}
.navsearch{
    display: flex;
    justify-content: space-evenly;
    background-color: pink;
    width: 610px;
    height: 40px;
    border-radius: 3px;/*ess ka zarya border ka corner thora goll hojay ga*/
}
.searchselect{
    background-color: #f3f3f3;
    width: 50px;
    text-align: center; /*ess ki waja sa All text jo hai wo center mai agaya*/
    border-top-left-radius: 3px; /*ess ki waja sa all ka box ka corner top left sa
    sirf curve hongi*/
    border-bottom-left-radius:3px;
    border: none;/*ess ki wja jo white sa box bantha hai hover karna per wo es per 
    apply nhi honga*/
}
.searchinput{
    width: 100%;/*search ko hmm na 100% ka width daideya jiss ka waja sa wo thora 
    zyada width pakraa ga*/
    font-size: 1rem;
    border: none;
}
.searchicon{
    width: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    background-color: #febd68;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #0f1111;

}
.navsearch:hover{
    border: 2px solid orangered;
}
span{
    font-size: 0.8rem;
}
.navsecond{
    font-size: 0.95;
    font-weight: 700; /*ess ka zarya ya thora bold hojay ga*/
}
.navcart i{
      font-size: 30px;
}
.navcart{
    font-size: 0.85rem;
    font-weight: 700;
}
.panel{
    display: flex;
    height: 40px;
    background-color: #222f3d;   
    color: white;
    align-items: center; /*es ka zarya ya jo text hai woo ess container ka center mai ajayga*/
    justify-content: space-evenly;
}
.panelopt p{
    display: inline;/*ess ka zarya text jo hai woo ess line mai hojay ga*/
    margin-left: 13px;
}
.panelopt{
    width: 90%;
    font-size: 1rem;
}
.herosection{
    background-image: url("Hero.jpg");
    background-size: cover;
    height: 350px;
}
.shopsection{
   display: flex;
   justify-content: space-evenly;/*ess ka zarya box ka darmyan space ayy ga evenly*/
   background-color: #e2e7e6;
}
.box{
    height: 350px;
    width: 23%;
    background-color: white;
    padding: 20px 0px 15px;
    margin-top: 10px;
}
.boximage{
    height: 300px;
    background-size: cover;
}
.boximage3{
    height: 150px;
    width: 250px;
    background-size: cover;
}
.boxcontent{
    margin-left: 10px;
    margin-right: 10px;
}
.boximage4{
    height: 145px;
    width: 270px;
    background-size: cover;
}
.coffe{
    margin-top: 10px;
    height: 125px;
    width: 125px;
    background-size: cover;
}
.kettle{
    margin-top: 10px;
    margin-left: 10px;
    height: 125px;
    width: 125px;
    background-size: cover;
}
.secondrow {
    background-color: #e2e7e6; /* Same light gray as the first row */
    padding: 20px;
}
/* .row {
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap: wrap;
} */
.container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: nowrap;
    margin-top: 50px;
}
.category {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 23%;
}
.category h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
}
.items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    
}
.item {
    text-align: center;
}
.item img {
    width: 100px;
    height: 100px;
    border-radius: 8px;
}
.item p {
    margin-top: 8px;
    font-size: 0.9em;
}
.link {
    margin-top: 15px;
    display: block;
    font-size: 0.9em;
    color: blue;
    text-decoration: none;
}

.secondrow{
    height: ;
}
.row{
    display: flex;
    justify-content: space-around;
    text-align: center;
}
.writing{
    margin-top: 150px;
}
footer{
    margin-top: 12px;
}
.footpanel1{
   
    background-color: #37475a;
    color: white;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
}
.footpanel2{
    background-color: #222f3d;
    color: white;
    height: 400px;
    display: flex;
    justify-content: space-evenly;/*ess ka zarya content ka bichh mai space evenly ajayga*/
}
ul a{
    display: block; /*ess ka zarya jo content hai wo alahda alahda block mai ajay ga
                      jab display block ki property hmm hatha da tho phir hamin acha
                                           sa patha chal jay ga*/
    font-size: 12px;
    margin-top: 10px;                                       
}