*{
  font-family: 'Poppins', sans-serif;
}
.productContainer{
    display: flex;
    margin-top: 20px;

    
}
.productImg{
  padding: 12px;
  margin: 15px;
  border-radius: 3%;
  /* border: 2px solid grey; */
  box-shadow: 2px 3px 8px grey;
    background-color: rgba(82, 82, 80, 0.616); 
    height: 320px;
}

  



#sidenav {
height: 100%;
width: 150px;
position:fixed;
/* z-index: 1; */
top: 0;
right: 0;
background-color: silver;
/* opacity: 70%; */
/* overflow-x: hidden; */
padding-top: 20px;
text-align: center;
}
.logo{
    width: 20%;
  }
  
  .logo img{
    width: 70px;
    margin:5px 20px 20px 5px;
    float: left;
  }
  nav{
  width: 80%;
  float: right;
}
nav ul{
  margin:10px 10px 10px;
  font-size: 22px;
  
}
nav ul li {
  display: inline-block;
  padding: 10px;
  position: relative;
  left:380px;
  top: 25px;
  color: white;
 
}
nav ul li:hover{
  color: rgba(255, 191, 14, 0.918);
  border-bottom: 1px solid white;
}
nav ul li a{
  color: rgb(253, 253, 253);
  text-decoration: none;
}
nav button a {
  color: rgb(29, 28, 28);
  text-decoration: none;
}
  
  /* nav ul .menu .subMenu {
      padding: 5px;
      color: rgba(223, 222, 222, 0.918);
      display: none;
  
  }
  nav ul .menu:hover .subMenu{
      color: rgba(250, 244, 244, 0.918);
      border-bottom: 1px solid;
      display: block;
    }
  
  nav ul .menu .subMenu li {
      padding: 5px;
      color: rgba(95, 87, 87, 0.918);
  } */
  #copyright{
    background-color: rgb(17, 17, 17);
    padding: 10px 0;
    color: rgb(243, 241, 241);
    text-align: center;
  }
  header{
    min-height: 100px;
    background-color: rgba(10, 10, 10, 0.87);
    overflow: hidden;
    position: relative;
    z-index: 3;
    padding-bottom: 1px;
    
  }
  
  #Tiles1Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 106, 134, 0.767);
    border-radius: 25px;
  
    
  }

  #Tiles2Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #Tiles3Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }

  #tap1Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #tap2Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #tap3Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #shower1Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #shower2Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #shower3Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #paint1Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #paint2Quantity{
    width: 100%;
    padding: 5px 5px;
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #paint3Quantity{
    width: 100%;
    padding: 5px 5px;
    
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;
  }
  #paintTint{
     /* width: 100%; */
    /* padding: 8px 10px; */
    margin: 8px 0;
    box-sizing: border-box;
    border: 4px solid rgba(68, 108, 134, 0.822);
    border-radius: 25px;

  }
  body{
    background-color:rgb(255, 255, 255);
    
  }
  #total{
    background-color: rgb(0, 0, 0);
    border-radius: 8px;
    box-sizing: border-box;
    border: solid rgb(0, 0, 0);
    font-size: x-large;
    font-family: 'PT Serif', serif;
    margin-left: 25px;
    margin-top: 10px;
    width: 90px;
    text-align: center;
    display: inline-table;
    color:white;
  }
  #butt{
    text-align: center;
    background-color: rgb(0, 0, 0);
    color:white;
  }
  #total a{
    color:white;
  }
  
 /* .info{
    padding: 5px 5px;
  } */
  .Img1{
    background-color: rgb(0, 0, 0);
    border-radius: 8px;
    box-sizing: border-box;
    border: solid rgb(0, 0, 0);
    font-size: x-large;
    font-family: 'PT Serif', serif;
    margin-left: 25px;
    margin-top: 5px;
    width: 150px;
    text-align: center;
    display: inline-table;
    color:white;
   
  }
.choosecolor{
  padding: 12px;
 margin-top: 10px;
 margin-bottom: 10px;
 margin-left: 320px;
  
  border-radius: 3%;
  /* border: 2px solid grey; */
  box-shadow: 2px 3px 8px grey;
    background-color:rgba(82, 82, 80, 0.616);
    height: 100px;
    width: 150px;
    text-align: center;
}
#chooseTint{
  background-color: rgb(0, 0, 0);
    border-radius: 8px;
    box-sizing: border-box;
    border: solid rgb(0, 0, 0);
    font-size: x-large;
    font-family: 'PT Serif', serif;
    margin-left: 1px;
    margin-top: 5px;
    width: 100px;
    text-align: center;
    display: inline-table;
    color:white;
    
}

#divQ{
  padding: 10px;
  text-align: center;
  color: red;
  width:10%;
  font-weight: 600;
  background-color: rgb(27, 27, 27);
  margin:50px auto 10px auto ;
  border-radius:10px;
  position: relative;
  top: 100px;
  left:30px;
}