:root{
  --pink:#f06595;
}



*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: verdana,geneva,tahoma,sans-serif;
  outline: none;
  border: none;
  text-decoration: none;
  text-transform: capitalize;
  transition: .2s linear;

}

html{
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  overflow-x: hidden;
}

 section{
  padding: 2rem 9%;
 }

header{
  position:fixed;
  top:0;left:0;right:0;
  background: #fff;
  padding:2rem 9%;
  display:flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1000;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

header .logo{
  font-size: 3rem;
  color:#333;
  font-weight: bolder;
}
 span{
  color:#f06595;
}
header .navbar a{
  font-size:2rem;
  padding:0 1.5rem;
  color:#666;
}
header .navbar a:hover{
  color:#f06595;
}
header .icons a{
  font-size: 2.5rem;
  color:#333;
  margin-left:1.5rem;
}
header .icons a:hover{
  color:#f06595;
}
header#toggler{
  display:none;

}


  .home{
    display: flex;
    align-items: center;
    min-height: 100vh;
    background: url(img/tulip.jpg);
    background-size:cover ;
    background-position:center ;
  }
 .content h3{
  font-size: 6rem;
  color:#333;
  margin-top: -50px;
 }
.content span{
  font-size: 3.5rem;
  color:#74b816;
  line-height: 2rem;
  padding:2rem 0;
}
.content{
  margin-top:-100px;
}
.content p{
  font-size: 1.5rem;
  color:#999;
  padding:1.5rem 0;
  line-height: 2rem;
  

}
.btn{
  display:inline-block;
  margin-top: 1rem;
  border-radius:5rem;
  background: #333;
  color:#fff;
  padding:.9rem 3.5rem;
  cursor: pointer;
  font-size: 1.7rem;
}
.btn:hover{
  background:#f06595 ;
}
.heading{
  text-align: center;
  font-size: 4rem;
  color:#333;
  padding:1rem;
  margin:2rem 0;
  background: rgba(255, 51, 153, .05);
}
.about .row{
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 0;
  padding-bottom: 2rem;
}
.about .row .video-container{
  flex:1 1 40rem;
  position:relative;
}

.about .row .video-container video{
  width: 100%;
  border:1.5rem solid #fff;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
  height: 100%;
  object-fit: cover;
}
.about .row .video-container h3{
  position: absolute;
  top:50%; transform: translate(-0%);
  font-size: 3rem;
  background: #fff;
  padding: 1rem 2rem;
  width:100%;
  text-align: center;
  mix-blend-mode: screen;
}
.about .row .content{
  flex: 1 1 40rem;
  padding: 2rem;
  margin-top: 2rem;
}
.about .row .content h3{
  font-size: 3rem;
  color:#333;

}
.about .row .content p{
  font-size: 1.5rem;
  color:#333;
  padding: .5rem 0;
  padding-top: 1rem;
  line-height: 2rem;

}
.icons-container{
  background: #eee;
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.icons-container .icons{
  background: #fff;
  border:.5rem solid rgba(0, 0, 0, .1);
  padding: 2rem;
  display: flex;
  align-items: center;
  flex: 1 1 25rem;
  font-size:rem;
}

.icons-container .icons i{
  height: 5rem;
  margin-right: 2rem;
  font-size: 5rem;
}

.icons-container .icons span{
  color:#74b816;
  padding-bottom: .5rem;
  font-size: 1.5rem;
}
 
 .products .box-container{
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
 }
 .products .box-container .box{
  flex:1 1 30rem;
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
  border-radius: .5rem;
  border: .1rem solid rgba(0, 0, 0, .1);
  position: relative;
 }
 
 .products .box-container .box .discount{
  position: absolute;
  top:1rem ;left:1rem;
  padding: .7rem 1rem;
  font-size: 2rem;
  color:#f06595;
  background: rgba(255, 51, 153, .05);
  z-index:1;
  border-radius: .5rem;
 }

  .products .box-container .box .image{
    position: relative;
    text-align: center;
    padding-top: 2rem;
    overflow: hidden;
  }
   .products .box-container .box .image img{
    height: 25rem;

   }
     .products .box-container .box:hover .image img{
     transform: scale(1.1);
    
   }
   .products .box-container .box .image .icons{
    position: absolute;
    bottom:-7rem; left: 0; right: 0;
    display: flex;
   }
   .products .box-container .box:hover .image .icons{
     bottom:0;
   }

     .products .box-container .box .image .icons a{
      height: 5rem;
      line-height: 5rem;
      font-size: 2rem;
      width:50%;
      background:#f06595 ;
      color: #fff;
     } 
     .products .box-container .box .image .icons.cart-btn{
      border-left: .1rem solid #fff7;
      border-right: .1rem solid #fff7;
      width: 100%;
     }
     .products .box-container .box .image .icons:hover a{
      background: #333;
     }
     .products .box-container .box .tag{
      padding: 2rem;
      text-align: center;
     }
     .products .box-container .box .tag h3{
      font-size: 2.5rem;
      color: #333;
     }
     .products .box-container .box .tag .price{
      font-size: 2.5rem;
      coloe:#f06595;
      font-weight: bolder;
      padding-top: 1rem;
     }
     .products .box-container .box .tag .price span{
      font-size: 1.5rem;
      coloe:#999;
      font-weight:lighter;
      text-decoration: line-height;
     }
     .review .box-container{
      display: flex;
      flex-wrap: wrap;
      gap:1.5rem;

     }
     .review .box-container .box{
      flex:1 1 30rem;
      box-shadow: 0 .5rem rgba(0, 0, 0, .1);
      border-radius: .5rem;
      padding: 3rem 2rem;
      position: relative;
      border:.1rem solid rgba(0, 0, 0, .1);
     }
     .review .box-container .box .fa-quote-right{
      position: absolute;
      bottom:3rem;right:3rem;
      font-size: 6rem;
      color:#eee;

     }
     .review .box-container .box .stars i{
      color:#ffb90f;
      font-size:2rem;
     }
     .review .box-container .box p{
      color: #999;
      font-size: 1.5rem;
      line-height: 1.5;
      padding-top: 2rem;
     }

     .review .box-container .box .user{
      display: flex;
      align-items: center;
      padding-top: 2rem;
     }
      .review .box-container .box .user img{
        height:6rem;
        width:6rem;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 1rem;
      }
      .review .box-container .box .user h3{
        font-size: 2rem;
        color:#333;
      }
     .review .box-container .box .user span{
        font-size: 1.5rem;
        color:#999;
      }
      .contact .row{
        display: flex;
        flex-wrap: wrap-reverse;
        gap: 1.5rem;
        align-items: center;
      }
      .contact .row form {
        flex: 1 1 40rem;
        padding: 2rem 2rem;
        box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
        border:.1rem solid rgba(0, 0, 0, .1);
        background: #fff;
        border-radius: .5rem;
      }
      .contact .row image{
        flex: 1 1 40rem;
      }
      .contact .row img{
        width:100%;
        border-radius: .5rem;
      }
      .contact .row form .box{
        padding: 1rem;
        font-size: 1.7rem;
        color:#333;
        text-transform: none;
        border:.1rem solid rgba(0, 0, 0,.1);
        border-radius: .5rem;
        margin: .7rem 0;
        width: 100%;
      }
     .contact .row form .box:focus{
      border-color:#f06595;
     }
      .contact .row form textarea{
        height: 15rem;
        resize: none;
      }
      .footer .box-container{
        display: flex;
        flex-wrap: wrap;
        gap:2rem;
      }
       .footer .box-container .box{
        flex: 1 1 25rem;
       }
       .footer .box-container .box h3{
        color: #333;
        font-size: 2.5rem;
        padding: 1rem 0;
       }
       .footer .box-container .box a{
        display: block;
        color: #666;
        font-size: 1.5rem;
        padding: 1rem 0;
       }
       .footer .box-container .box a:hover{
        color: #f06595;
        text-decoration:underline ;
       }
       .footer .box-container .box img{
        margin-top: 1rem;
       }
       .footer .credit{
        text-align: center;
        padding: 1.5rem;
        margin-top: 1.5rem;
        padding-top: 2.5rem;
        font-size: 2rem;
        color: #333;
        border-top:.1rem solid rgba(0, 0, 0, .1);
       }
       .footer .credit span{
        color:#f06595 ;
       }
       .footer{
        background: #FFF5FA;
       }