*{
   font-family:'Ubuntu',sans-serif;
   margin:0;
   padding:0;
   box-sizing:border-box;
}
body{
  background-color: rgb(216, 216, 216)
}
#mobile{
   display: none;
   align-items:center;
}
#close{
   display:none;
}


@media (max-width:799px){
   .section-p1{
      padding:40px 40px;
   }
   #navbar{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      justify-content: flex-start;
      position: fixed;
      top:0;
      right:-300px;
      height:100vh;
      width:300px;
      background-color:white;
      box-shadow: 0 40px 60px black;
      padding:80px 0 0 10px;
      transition: 0.3s;
   }
   #navbar.active{
   right:0px;
   }
   #navbar li{
      margin-bottom:25px;
   }
   #mobile{
   display: flex;
   align-items:center;
   }
   #mobile i{
      color:black;
      font-size:24px;
      padding-left:20px;
   }
   #close{
      display:initial;
      position: absolute;
      top:30px;
      left:30px;
      color:black;
      font-size:15px;
   }
   #lg-bag{
      display:none;
   }
   #hero{
   height:90vh;
   background-position:top 30% right 30%;
   padding:0 80px;
   }
   #feature .fe-box{
   margin:15px 15px;
   }
   
   #product1 .pro{
      margin:15px;
   }
   #banner{
      height:20vh;
   }
   #sm-banner .banner-box{
      min-width:100%;
      height:30vh;

   }
   #banner3{
      padding: 0  40px;
   }
   #banner3 .banner-box{
      width:28%;
   }
   #newsletter .form{
      width:70%;
      margin-top:10px;
   }
}



@media (max-width:477px){
   .section-p1{
      padding: 20px;
   }
   #header{
      padding:10px 30px;
   }
   h1{
      font-size:38px;
   }
   h2{
      font-size:32px;
   }
   #hero{
      padding: 0 20px;
      background-position: 55%;
   }
   #feature{
      justify-content: space-between;
   }
   #feature .fe-box{
      width:180px;
      height:200px;
      margin: 0 0 15px 0;
   }
   #product1 .pro{
      width:100px;
   }
   #banner{
      height:40vh;
   }
   #sm-banner .banner-box{
      height:40vh;
   }
   #sm-banner .banner-box2{
      margin-top:20px;
   }
   #banner3{
      padding:0 20px;
   }
   #banner3 .banner-box{
      width:100%;
   }
   #newsletter{
      padding: 40px 20px;
   }
   #newsletter .form{
      width:100%;
   }
   footer .copyright{
      text-align:start;
   }

   
   
}