@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}


.nav{
    display: flex;
  }
  
  #logo{
    border-radius: 50%;
    width: 5%;
    margin-right: 10PX;
    border: 2px solid red;
}
nav{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
ul > li > a{
  margin-right: 60px;
}
  .bag{
    /* border:2px solid red; */
    height:150px
  }
  .bag img{
    width:400px
  }
  
  .empty-tag{
    text-align: center;
    margin-top: 60px;
  }
  
  #shop{
  
    display: inline-block;
    text-transform: uppercase;
    color: #fff!important;
    font-size: 14px;
    font-family: SourceSansPro;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
    background-color: #d5a249;
    padding: 0 20px;
    border-color: #d5a249;
  }
  
  
  .shop-btn{
    text-align: center;
    margin-top: 50px;
  }
  
  .option{
    /* border:2px solid black; */
    display: flex;
    justify-content:space-around;
    margin-top: 50px;
  }
  
  .option img{
    width:50%
  }
  
  .images img{
    width:80%
  }
  
  .images{
    display: flex;
    justify-content: center;
  
    margin-top: 50px;
  }
  
  #cont{
  display: flex;
  }
  
  #product-cont{
  width:80%
  }
  
  .order-total{
  border:2px solid red;
  background-color: #fafafa;
  }
  
  .order-total h5{
  margin-bottom: 20px;
  }
  
  
  #total{
  margin-left: 100px;
  }
  
  .proceed{
  background-color: hsl(38, 100%, 74%);
    padding: 0 20px;
    display: inline-block;
    text-transform: uppercase;
    color: #fff!important;
    font-size: 14px;
    font-family: SourceSansPro;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    height: 50px;
    line-height: 50px;
    border-color: #d5a249;
    margin-top: 20px;
  }

  .add-to-bag{
    display: flex;
    }
    .add-to-bag >img{
    width: 50%;
    margin: auto;
    padding-bottom: 30px;
    }
    .add-to-bag div{
    /* border: 1px solid; */
    margin-left:10px ;
    }
    .add-to-bag :nth-child(2)>img{
    width: 35px;
    }

    
#product-cont > div img{
    width:80%;
    margin-bottom: 10px;
  }
  
  
  
  
  #order-total{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 5px;
    /* text-align: center; */
  }
  
  *{
    box-sizing: border-box;
  }
  .karan{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    width: 100%;
    border: 1px solid rgb(208, 205, 205);
  }
  .karan > div:first-child{
    width: 73%;
  }
  
  .karan > div:last-child{
    width:300px
  }
  
  .cont{
    margin-top: 40px;
  }
  
  #total{
    margin-left: 60%;
  }
  
  #removebtn{
    width:200px;
    text-transform: uppercase;
    color: #fff;
    background-color: #d4a048;
    font-family: SourceSansProSemiBold;
    font-size: 14px;
  
  padding: 5px ;
    border:none;
    margin-top: 10px;
    display: block;
    margin-bottom: 10px;
  }
  
  #product-cont div{
    padding: 5px;
    border: 1px solid rgb(193, 189, 189);
  }
  
  #proceed{
    
  
    color: #fff;
    background-color: #d4a048;
    font-family: SourceSansProSemiBold;
    font-size: large;
    border:none;
    padding: 5px 10px;
    border-radius: 5px;
    display: block;
    margin: auto;
  }
  
  
  #order-total h5{
    margin-bottom: 40px;
    margin-left: 10px;
    margin-top: 10px;
  }
  
  #order-total p{
    margin-left: 10px;
  }
  
  #order-total button{
    margin-left: 10px;
  }
  
  #product-cont p{
    margin-top: 10px;
  }
  
  #product-cont h4{
    margin-top: 10px;
  }
  
  .incdec{
    margin-left: 10px;
  }
  
  .incbtn{
    color: #fff;
    background-color: #d4a048;
    font-family: SourceSansProSemiBold;
    font-size: 14px;
    /* box-shadow: 0 3px 6px 0 rgba(0,0,0,.16)!; */
    padding:3px 5px;
    border-color: #d4a048;
  }
  
  #product-cont{
    width:100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
  }
  
  #product-cont div{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      width:80%;
  }
  
  #product-cont img{
    margin-left: 25px;
  }
  
  #product-cont button{
    margin-left: 10px;
  }
  
  #product-cont h4{
  margin-left: 10px;
  }
  
  #product-cont p{
  margin-left: 10px;
  }
  
  @media screen and (max-width:850px){
  #product-order-cont{
   grid-template-columns: repeat(2,1fr);
   gap: 10px ,10px;
  }
  
  #order-total{
    box-shadow: none;
  }
  
  #product-cont{
    grid-template-columns: repeat(2,1fr);
  }
  
  #product-cont div{
    box-shadow: none;
  }
  }


  /* footer section start  */
  
#footer{
  padding: 10px 20px;
  background-color: rgb(240, 249, 249);
}

.support,.about-us{
  /* border: 1px solid; */
  padding: 20px;
}
.support h6,.about-us h6{
  font-weight: 600;
}
.support a,.about-us a{
  display: flex;
  flex-direction: column;
  /* border: 1px solid; */
  font-size: 15px;
  color: black;
  text-decoration: none;
  padding: 3px;
}

.support a:hover,.about-us a:hover{
  border-bottom-style: solid;
  padding: 3px;
  margin-left: 5px;
  width: fit-content;
}
.bottom{
  display: block;
  /* border: 2px solid; */
  text-align: end;
}

.text p{
  font-size: 12px;
}
.bottom p{
  font-size: 12px;
  line-height:0;
  padding-top: 10px;
}

.hover-bar{
  position: absolute;
  width: 200px;
  height: 200px;
}


/* footer section  */
.footer{
  background-color: whitesmoke;
  padding: 30px 50px;
  margin-top: 30px;
}
.footer > .top-part{
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 15px;
}
.top-part >div> h2 , .top-part >div> p {
color: black;
margin-bottom: 10px;
text-underline-position: inherit;
font-size: 15px;
}
.top-part > div > button{
padding: 10px 20px;
border: 1px solid black;
background-color: rgb(0, 0, 0);
color: rgb(237, 233, 233);
margin-top: 20px;
}
.top-part > div > button:hover{
border-bottom: 3px solid black;
}
.footer > .bottom-part{
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 15px;
}
.footer > .bottom-part >div{
margin-top: 20px;
}
.footer > .bottom-part > div > h3{
color: black;
margin: 20px 0px;
margin-bottom: 35px;
font-size: 20px;
}
.footer > .bottom-part > div > a{
display:block;
margin-bottom: 14px;
color: black;
text-decoration: none;
}
.footer > .bottom-part > div > a:hover{
  border-bottom-style: solid;
  width: fit-content;
}
.social-media > h3 , .payment > h3{
color: black;
margin-top: 20px;
margin-bottom: 35px;
font-size: 20px;
}
.social-media >a> i{
background-color:whitesmoke;
color: black;
font-size: 30px;
padding-bottom: 5px;
margin-right: 20px;
margin-bottom: 20px;
}
.social-media >a> i:hover{
border-bottom: 4px solid;
}
.payment > img{
width: 40px;
margin-right: 5px;
margin-bottom: 10px;
cursor: pointer;
}
.android-mac{
width: 40%;
margin-top: 20px;
}
.android-mac >img:hover{
border-bottom: 4px solid gray;

}
.android-mac > img{
margin-bottom: 10px;
cursor: pointer;
}
.last-logo{
width: 50px;

}
.last-logo >img{
width: 80px;
border-radius: 50%;
border: 2px solid black;
}
.padd{
padding-bottom: 15px;
border-bottom: 4px solid red;
font-size: 20px;
}
.padd > a > i{
  color: black;
}

.btn1{
  padding: 5px 10px;
  border-radius: 6px;
}
.inp{
  background-color: whitesmoke;
  color: black;
}

.nav-link:hover{
  border-bottom: 2px solid;
  width: fit-content;
}
  


/* nav cart and wishllist icon  */
.search{
  background-color: #fff;
}
.search-icon{
  display: flex;
  align-items: center;
}
.search > input{
  font-size: 10px;
  padding: 5px 10px;
  /* border-radius: 16px; */
  border: none;
 
}


.icon{
  /* background-color:black; */
  color: black;
  margin-left: 10px;
  /* border: 2px solid; */
}
.icon >a> i{
  margin: 5px;
  font-size: 17px;
  padding-bottom: 6px;
  text-decoration: none;
  /* color: whitesmoke; */
  color: black;
}
.icon >a> i:hover{
  color:maroon;
  border-bottom: 5px solid white;
}