*{
  margin:0;
  padding: 0;
}



html{
  font-size:  62.5%;
  scroll-behavior: smooth;
}

/*
recyclerView.post(new Runnable() {
    @Override
    public void run(){
        recyclerView.smoothScrollToPosition(pos);
    }
  
});

*/


/*navbar*/

/*
nav {
  
  background-color: black;
  background-size:150.0vw;
  width: auto;
  
  position: sticky;
  top: 0;
 
  
  transform: translate3d(0, 0, 0); 
  }
*/


.navbox{
  display: flex;
}

.navbar{
  
 background-color: black;
  background-size: cover !important;
  width:auto !important;
  height: 6vmax;
  padding-left: 1%;
  position: sticky;
  top: 0;
  display: flex;
  z-index: 1;
  transform: translate3d(0, 0, 0); 
 
  
  
}




  
 .nav-list{
  display: flex;

  list-style: none;
  
  position: -webkit-sticky;
  position: sticky;
  top:0;
  cursor: pointer;
 
  }
 



.item {
 
  margin: 2vmax;
  
}
.item a {
 
  text-decoration: none;
  color:  orangered;
  font-size:2.0vw;
  font-style:bold ;
  font-family: 'Times New Roman', Times, serif;
  
}

.item a:hover{
  color: red;
}


.logo{
  
  width: 5.0vw;
  border: 0.2vw solid red;
  border-radius: 50%;
  margin-top: 1vh;
}


.sch{
  margin: 0.5vmax;

}

.sform{
  display: flex;
  
  padding-left:15.0vw;
  margin-top: 2%;
  margin-bottom:2% ;
  
}

.sspan{
  padding:1.0vw;
}



.Search{
  display: flex;
  width:20.0vw;
  height:3.5vw;
  border-radius:9.0vw;
  font-size: 3.0vh;
  padding-left: 0.5vw;
  
  
}

.Searchbtn{
  width: 10.0vw;
  height: 4.0vw;
  border-radius: 9.0vw;
  font-size: 2.0vw;
  padding-left: 0vw ;
  color: white;
  background: green;
  
}

.btn{
  cursor: pointer;
}




/*section path*/

.features-start{
  height: 23vh;
}


.path{
  width: cover;
  padding-bottom: 10vh;
  
  display: flex;
  text-align: center;
  margin-right: 5%;
  margin-left: 5%;
  justify-content: center;
  justify-content: space-evenly;




}



.p-item p {
  font-size: 5.0vw;
  font-style: bold;
  font-family: 'Times New Roman', Times, serif;
  align-items: center;
  justify-content: center;
  justify-content: space-evenly;
  color: white;
}


.first-feature {
 width: 30%;
 
}

.first-feature img {
  width: 25.0vw;
  border: white solid .2vw;
}

.feature {
 /* padding-left: 10%; */
  width: 30%;

}

.feature img {
  width: 25.0vw;
  border: white solid 0.2vw
}

.path li{
  list-style: none;
}

/* Hover shadow*/

.p-item img:hover{
  
  box-shadow: 10px 10px 10px black;
}



/* food content*/

.fruits{
  background: rgba(0, 0, 0, 0.7) url(Img/flogo.jpg) no-repeat center center fixed;
  
  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size:100vmax;
 

  background-position: top;
  background-blend-mode:darken;
  
  scroll-behavior: smooth;

}


.vegetable{
  background: rgba(0, 0, 0, 0.7) url(Img/vlogo.jpg) no-repeat center center fixed;
  
  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size:100vmax;
  
  
  background-position: top;
  background-blend-mode:darken;
  
  scroll-behavior: smooth;

}


.nonveg {
  background: rgba(0, 0, 0, 0.7) url(Img/mlogo.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: 100vmax;
  

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;

}


.f-heading{
  font-size:12.0vh;
  font-style: bold italic;
  font-family: 'Times New Roman', Times, serif;
  color:white;
  text-align: center;
  padding-top:10.0vw;
  padding-bottom: 5.0vw;
  
}

.f-content{
  border: solid white 1.0vw;
  border-radius: 9.0vw;
  padding-top: 5.0vw;
  display: block;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: .5vw;
}
  
.f-content p{
  font-size: 8.0vh;
  font-style: bold italic;
  font-family: 'Times New Roman', Times, serif;
  color: white;
  text-align: center;
}



.f-content img{
  width: 25.0vh;
  border: white solid 0.2vw;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}

.f-des {
  color: white;
  justify-content: center;
  align-items: center;
  font-size:2.0vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  padding-top: 1.0vw;
  margin-left: 10%;
  margin-right: 10%
;




}

tr td:nth-child(2) { /* I don't think they are 0 based */
   text-align: right;
}

.tdd{
vertical-align: top;
}

.vt{
  padding-left: 5.0vw;
}

.t-des{
 

  font-size: 2.0vw;
  padding-top:2.0vw;
  padding-bottom:2.0vw;
}



/* exercise content*/
.gym {
  background: rgba(0, 0, 0, 0.7) url(Img/glogo.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: 100vmax;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;

}

.yoga {
  background: rgba(0, 0, 0, 0.7) url(Img/ylogo.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: 100vmax;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;

}

.normal-exercise {
  background: rgba(0, 0, 0, 0.7) url(Img/nlogo.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: 100vmax;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;

}


.g-des{
  
  padding:30px;
  padding-top: 5px;
}

.v-container{
  text-align: center;
  padding: 10px;
  overflow: hidden;
}

.vid{
  
  width: 65%;
  border: 0.5px solid white;
}



/* remedies*/

.heart{
  background: rgba(0, 0, 0, 0.7) url(Img/heart.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: cover;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;
}

.skin{
  background: rgba(0, 0, 0, 0.7) url(Img/skin.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: cover;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;
}

.kidney{
  background: rgba(0, 0, 0, 0.7) url(Img/kidney.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: cover;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;
}

.lungs{
  background: rgba(0, 0, 0, 0.7) url(Img/lungs.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: cover;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;
}

.diabetes{
  background: rgba(0, 0, 0, 0.7) url(Img/diabetes.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: cover;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;
}

.teeth{
  background: rgba(0, 0, 0, 0.7) url(Img/teeth.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: cover;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;
}

.hair{
  background: rgba(0, 0, 0, 0.7) url(Img/hair.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: cover;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;
}

.digestion{
  background: rgba(0, 0, 0, 0.7) url(Img/digestion.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: cover;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;
}

.liver{
  background: rgba(0, 0, 0, 0.7) url(Img/liver.jpg) no-repeat center center fixed;

  /*-webkit-background-size: cover;
          /*-moz-background-size: cover;
          /*-o-background-size: cover;*/
  background-size: cover;
  width: cover;

  background-position: top;
  background-blend-mode: darken;

  scroll-behavior: smooth;
}

.good-bad{
  justify-content: center;
}

.good-bad ul{
  padding-top: 5px;
}
  


.gb{
  padding-top: 0;
  padding: 3.5vw;
  display: inline-grid;
}




  
  /*contact*/
  

.contact{
  background-color: lightgrey;
  
  
  
}

.fitem{
  justify-content: center;
  display: contents;
  justify-content: center;
}

.heading{
  font-size: 10.0vh;
  font-family: 'Times New Roman', Times, serif;
  font-style: bold;
  text-align: center;
  padding-top: 3.0vh;
  padding-bottom:3.0vw;
 }
 
 .pform{
 font-size: 5.0vh;
 text-align: center; 
   
 }
 
 .finput{
  text-align: center;
  padding: 1%;
  
 }

 .feedback{
  width: 50vw;
  height: 20vh;
  border:1px solid black;
  border-radius:1.5vh;
  font-size: 3.0vh;
  padding-left: 2vh;
  tab-size: absolute;
 }
 
 input{
  
   width: 50.0vw;
   height: 8.0vh;
   border-radius: 1.5vh; 
   font-size: 3.0vh;
   padding-left: 1vw;
   
 }

 .finput input{
   border: 0.5px solid black;
 }

 
 .b{
   padding-top:5.0vh;
   padding-left: 20%;
   padding-bottom:5.0vh;
 
 
 }
 
 .b input{
   background:green;
   color:white;
   font-size: 3.0vh;
   font-style:bold;
   font-family: Arial, Helvetica, sans-serif;
   width:30.0vh;
   height:8.0vh;
   
 }
  


 

 
 /*Tips*/

 .dtip {
  background-color: black;
  width: 100%;
  
  
 }


 .tip {
 
  
   font-size: 2vw;
   font-style: bold;
   font-family: 'Times New Roman', Times, serif;
   padding-left: .5vmax;
   padding: 1.0vmax;
   color: red
 }
 
 .tipc {
   color: white;
   
 }
 

.search-burger{
  font-size: x-large;
  color: white;
  display: none;
  position: absolute;
  cursor: pointer;
  right: 3%;
  top: 1.5vh;
}



.line{
  width: 33px;
  background-color: white;
  height: 4px;
  margin: 3px 3px;
}

 /*  media query */

@media (max-width:500px){

  /* navbar */
  
  .navbar{
    height: 25vmax; 
    overflow-y: hidden; 
    transition: all 0.5s ease-out;
    flex-direction: column;  
    
  }

  .navbox{
   justify-content: center;
  }

  .nav-list{
    
    position: absolute;
   
  }

  

  .logo{
    
    position: absolute;
    
    left: 3%;
  

    width: 5vmax;
  
   
  }
  
  .item {
    align-items: center;
    margin: 2.5vw;
    margin-top: 2.5vh;
  }

  .item a {
 
   
    font-size:2vmax;
    font: bold;
    
    
    
  }

  .sch{
   
    display: block;
    margin-inline-end: 4.5vmax;
    padding-top: 10vh;
  }

  .Search{
   
    width:60.0vw;
    height:10.5vw;
    border-radius: 2vh;
    font-size: 3vw;
  }

  .Searchbtn{
    width: 20.0vw;
    height: 10.6vw;
    font-size:1rem ;
  }

  .search-burger{
    display: block;
    
  }
  
  .h-nav-resp{
    height:7vmax ;
   
    
  }

  .v-class{
    visibility: hidden;
  }

  .intro p{
    font-size: 4vw;
    padding-right: 5px;
  }

  .des{
    font-size: 3.5vw;
  }

  .f-des{
    margin-left: 3%;
    margin-right: 3%;    
    font-size: 4vw;
  }

  .t-des{
    font-size: 4vw;
    margin-left:1%;
    margin-right: 1%;
  }

  /*categories*/

  .f-heading{
    font-size:12.0vw;

  }
  
  .f-content p{
    font-size: 8.0vw;
  }
  
  .f-content img{
    width: 25.0vw;
  }

  .p-item img{
  
    box-shadow: 10px 5px 10px black;
  }


/*  video */  

.vid{
  width: 80%;
}


.good-bad{
  justify-content: center;
}

.gb{
  display: block;
}

/* Contact */
  .heading{
    font-size: 10.0vw;
    padding-top: 3.0vw;
    padding-bottom:3.0vw;
   }

   .pform{
    font-size: 5.0vw;
    
  } 
  
   input{
  
   width: 50.0vw;
   height: 8.0vw;
   border-radius: 1.5vw;
   font-size: 3.0vw;
   
 }

 .b{
   padding-top:5.0vw;
   padding-left: 20%;
   padding-bottom:10.0vmax;
   
 
 }
 
 .b input{
 
   
   font-size: 3.0vw;
   width:30.0vw;
   height:8.0vw;
 }

 .feedback{
  width: 50vw;
  height: 20vw;
  border-radius: 1.5vw;
  font-size: 3.0vw;
 }
  
.dtip{
  bottom: 0;
  position: fixed;
}

.tip{
  font-size: 2vh;
  
}  


}