* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.navbar {
  padding: 30px 0;
  text-transform: capitalize;
}
.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

ul {
  list-style-type: none;
}

.logo,.menu,.icons,.button {
  float: left;
}

.logo {
  width: 30%;
}

.menu {
  width: 45%;
}

.icons {
  color: blue;
  margin-right: 50px;
}

.icons i {
  margin-right: 10px;
}

.icons .fa-bars {
  display: none;
}

.fa-magnifying-glass, .fa-cart-shopping{
    transition: transform 1s;
}

.fa-cart-shopping:hover{
    transform: scale(2);
}

.fa-magnifying-glass:hover{
    transform: scale(2);
}

.menu li {
  float: left;
  width: 70px;
}

.menu li a:hover{
color: red;
}

a {
  text-decoration: none;
  color: #333;
}

.navbar .button {
  border: solid 1px;
  padding: 10px 30px;
  border-radius: 30px;
  border-color: blue;
  transition: background-color 1s;
}

.navbar .button a{
    transition: color 2s;
}

.navbar .button:hover{
 background-color:blue;
}

.navbar .button a:hover{
    color: #fff;
   }
   

.icons {
  padding-top: 10px;
}

.fa-bars {
  display: none;
}

.header-img {
  float: left;
  width: 40%;
}

.header-img img {
  width: 100%;
}

.header-content {
  float: right;
  width: 60%;
  padding-top: 180px;
  padding-left: 80px;
}

.fpara {
  color: #333;
  font-size: 25px;
  padding-bottom: 20px;
}

.secpara {
  color: #333;
  font-size: 16px;
  padding-bottom: 20px;
}

.header-content h1 {
  font-size: 50px;
  font-weight: 700;
  padding-bottom: 20px;
}

.header .button {
 
  border-color: transparent;
  border: #333;
}

.header .button a {
  color: #fff;
  text-transform: capitalize;
  border: 1px #333;
  border: solid 1px;
  padding: 10px 30px;
  border-radius: 30px;
  border-color: transparent;
  background-color: blue;
  transition: background-color 1s;
}

.header .button a:hover{
    background-color: rgb(126, 126, 126);
}

.heroslide {
  height: 500px;
  padding-top: 80px;
  
}

.heroslideimg {
  float: left;
  width: 30%;
  margin-left: 20px;
  transition: transform 2s , opacity 2s;
  
}


.heroslideimg:hover{
    transform: scale(1.2);
    opacity: 0.3;
    
}

.heroslideimg img {
  width: 100%;
}

.productimg {
  float: left;
  width: 24%;
  margin-right: 5px;
  margin-bottom: 25px;
}

.productimg img {
  width: 100%;
  transition: transform 1s;
}

.productimg img:hover{
    transform: scale(1.3);
}


.products {
  margin-top: 100px;
}

.products h2 {
  font-size: 30px;
  margin: 20px 0;
  font-weight: 700;
}

.products  {
    color: #333;
  }

.products span {
  text-decoration: underline blue;
 
}

.price {
  color: blue;
  font-weight: bolder;
}

.productimg p , h3{
    padding-top: 10px;
}