body{
  background-color:
   rgba(235, 242, 225, 30%);
}



body, .p {
  font-family: 'Lato', Roboto;
  font-size: 18px;
  line-height: 1.6;
}



#main{
  max-width: 92%; margin: 0
  auto; padding: 0 2% 0 2%;}


  @media screen and (min-width: 1280px){
    #sec-1{
     margin: 10px auto;
        display: flex; 
        align-items: center; justify-content: center;
     }}


   #sec-1 > figure > img{
    max-width: 900px;
   }


#hero-imgs > a >img{
  width: 100%; height: 
  auto; 
  border-top: 1px solid green;
  padding-top: 20px;
  margin: 2% auto; 
  display: block;

}

#hero-links > ul > a{
  text-decoration: none;
  list-style: none;
   
}

#hero-links > ul > a > li{
  color: brown;
}

p > a:link{
  font-weight: bold; color: #1b18e2;
  text-decoration: none;
}



p > a:hover{
  font-weight: bold; color: #cc3c08;
  text-decoration: underline;
}


 @media screen and (min-width: 1150px){
#hero-imgs{
   display: flex;
   justify-content: space-evenly; align-items: center;
   width: 100%;
  
}

 }

#sec-1-box-2{
  text-align: center; margin: 0 auto;
max-width: 90%;
}


@media screen and (min-width: 800px){
#hero-imgs > a img{object-fit: 
  cover; width: 270px; height: 190px; 
}}

footer > .container {
 /* border: 0.2px solid red; */
  max-width: 1000px; 
  margin: 0 auto;
  padding: 0 2.1%;
  text-align: center;
}

#sec-2{margin: 4% auto 2% auto;
width: 100%;}

.p{font-size: 0.975rem;}



#face-skin-care{
  width: 100%;
}

div h2{
  color: brown; font-size: 1.5rem;
}

#hp-container-1-flex{margin-top: 8%;}
div > h2{ margin: 6% 0;}

h3{margin-top: 4%;}
@media screen and (min-width: 950px){div > h2{
margin: 1% 0;
}}

.li{
  font-size: 0.9102rem; color: #261240;}


.figure{text-align: center; margin: 0 auto;}
@media screen and (min-width: 600px){
#sec-4-box-3{width: 60%;}}


@media screen and (min-width: 800px){
#sec-3-flex-box-1{ margin-top: 2%}}
#acid-reflux-banner{margin: 4% auto; text-align: center;}

@media screen and (min-width: 1000px){
  #sec-2-box-2-flex
{display: flex; }}


#keto-banner-figure{max-width: 450px; text-align: center; margin: 4% auto;}
#keto-banner{width: 100%;} 
#sec-3-img-box{text-align: center; /*border: 2px solid blue;*/}
@media screen and (min-width: 1000px){
#sec-3-img-box{width: 45%;
}}


@media screen and (min-width: 1000px){
#natural-rem-box-1{
  max-width: 940px; margin-right: 4%; }

}

.dryness-ul > li{
line-height: 28px;
 list-style: square; font-size: 17px;}

.dryness-ol > li{line-height: 28px;}
#sec-5, #sec-5-flex{padding-top: 4.5%;}
@media screen and (min-width: 800px){
#sec-5, #sec-5-flex{padding-top: 2%; margin-top: 2%;}}
@media screen and (min-width: 1000px){
#sec-5-flex{display: flex;}}
#sec-5-flex-box-1{text-align: center; margin-bottom: 3%;}
#sec-5-box-2{margin-left: 2%;} 
#remove-dark-spots{width: 95%;}

@media screen and (min-width: 1000px){
#sec-5-box-2{width: 70%; margin-left: 3%;}}
 #sec-2-box-2{text-align: center; border: none;}
#sec-2-box-2{margin-top: 4%;}
@media screen and (min-width: 800px)
{#sec-2-box-2{width: 37%; padding: 0% 0 7% 0;}}
#section-6{margin-top: 4%;}
#section-6 > div > h2{margin-bottom: 3%;}
 #h1{border: solid 2px red}

.flex{
   max-width: 90%;}
   .flex{ max-width: 90%;}

   
  #stuff-ur-face-figure{
    margin-bottom: 4%; 
  text-align: center; }

  

#section-3-flex-box-2{text-align: center; padding-top: 5%;}

#section-3-flex-box-2 > img{max-width: 200px; height: auto;}
@media screen and (min-width: 800px){
#section-3-flex-box-2 > img{height: 65%; float: right;}}

ul li{font-size: 15px; color: black; line-height: 24px;}
@media screen and (min-width: 950px){
#probiotic-sec-flex{display: flex; padding-top: 3%;}}

@media screen and (min-width: 950px){#probio-sec-box-1{width: 70%;}}