/*TEXT STYLES*/
@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,600;1,300;1,500&display=swap');

body{
  background: #D7DCFB;
}
.main{
  padding:0 1rem;
}



img,video{
  width: auto; 
  height: auto;
  max-width: 100%; 
}

h1 {

	font-family: 'Marcellus', serif;
	font-size: 300%;
	font-weight: normal;
	text-align: center;
	color: #0F3D3D;
}



h2 {

	font-family: 'Marcellus', serif;
	font-size: 40px;
	font-weight: normal;
	text-align: center;
	color: #0F3D3D;
}



h4 {

	font-family: 'Marcellus', serif;
	font-size: 28px;
	line-height: 1.4em;
	font-weight: normal;
	text-align: left;
	color: #0F3D3D;
}
h5 {

	font-family: 'Marcellus', serif;
	font-size: 20px;
	line-height: 1.4em;
	font-weight: normal;
	text-align: left;
	color: #0F3D3D;
}



h6 {
	font-family: 'Mulish', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: #0F3D3D;
	margin-bottom: 24px;
}


p {
	font-family: sans-serif;
	font-size: 16px;
	font-weight: 800;
	text-align: left;
	color: #0F3D3D;
	margin-bottom: 24px;
	max-width: 800px; 
  line-height: 1.8;

}


/* NATALIYA MEALPREP */

.c25 {
	width: 25%;
	text-align: center;
}


.c33 {
	width: 33.333333%;
	text-align: center;
}

/* .c50 {
	width: 50%;
 
} */
.recipeinformation{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:50px;
  margin-bottom: 3%;
}


.c100 {
	width: 100%;
}

img,video{
  width: auto; 
  height: auto;
  max-width: 100%; 
}
.mealprep{
  display:grid;
    /* grid-template-columns: 1fr 1fr; */
    grid-gap: 60px;
    padding: 40px;  
    margin-top: 10px;
    width: 90%;
}

.mealprep p {
  text-align: left;
}

.mealprep h5,  .recipe-info h5{
  font-family: 'Lato', sans-serif;
}

.mealprepdeets h2, .recipe-info h2 {
  text-align: left;
  margin: 10px 0px;
}
.mealprepdeets h6, .recipe-info h6 {
  text-align: left;
  margin:0%;
}
.n_titles p{
  text-align: center;
}








/* NATALIYA ABOUT*/

.n_about_intro{
  margin-top: 70px;
  align-items: center;
  justify-content: center;
align-items: center;

}

.n_about_intro .hero-button{
display: flex;

  margin: 0px 0px;
}

.n_about_intro h4{
  text-align: center;
}


.n_about_intro img{

  max-width:95%;
  
}

#n_ourstory{
  background-image: url("/images/about/ourstory@2x.jpg");
  background-size: 1800px 600px;
  background-color: #cccccc;
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

  align-content: center;
}





#n_ourstory h1{
  padding: 100px 0px;
}

#n_paragraph{
 justify-content: center;
 display: flex;
  margin-top: 0px;
}


#n_paragraph h4{
  font-size: 20px;
  max-width: 800px;
  margin-top: -10px;
 }



#n_titles{
  margin: 0px auto;
  align-content: center;
  padding:50px auto;



}

#n_titles h1{
 
  margin: 10px 10px;
}



.n_iconsection h2{
  padding-top: 40px;
  font-size: 32px;
}

.n_icons{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 60px;
    padding: 20px 60px;  
    width: 90%;
  }




#n_1234{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

#n_1234nat{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}


#n_1234nat img{
  padding-bottom: 0px;
  width: 100%;
}

#n_iconsind p{
  text-align: center;
}

  .n_icons img{
width:50px;
align-items: center;
  }


  .n_icons h4{
    text-align: center;
    font-size: 20px;
    margin-bottom: 10px;
      }

  .icons p{
    text-align: center;
  }

  #n_team{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 60px;
    padding: 20px;  
    margin-top: -70px;
    width: 90%;
  }

  .n_team img{
    width:70px;
  }

  #n_teammem h4{
    text-align: left;
  }

  #n_teammem p{
    text-align: left;
    width:60%
  }


  .padding-top{
    padding-top: 70px;
  }

  .n_button{
    background-color: #0F3D3D; /* Green */
  border: none;
  color: #FFFFFF;
  border-radius: 4px;
  padding: 15px 32px;
  margin-left: 100px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  }

  .n_join{
    background-color: #EAEDFF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 50px;
    margin: 100px 100px;
  }


  @media(max-width:768px){

    .main{padding: 0px 1rem;
    }
    .recipeinformation{
      display:grid;
      grid-template-columns: 1fr;
      grid-gap:50px;
      margin-bottom: 3%;
    }

    #n_ourstory h1{
      font-size: 40px;
      padding: 100px 0px;
    }



#n_paragraph h4{
  margin-top: 20px;
 }

    
    #n_ourstory{
      background-size: 900px 300px;
      background-color: #cccccc;
      background-position: right; /* Center the image */
    }



    .n_icons{
      display:grid;
      grid-template-columns: 1fr;
      grid-gap: 10px;
      padding: 20px 20px;  
      width: 90%;
    }

    #n_iconsind{
      margin-bottom: 20px;
    }

    
    .padding-top{
      padding-top: 0px;
    }

    #n_1234{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
    }

    .n_join{
      background-color: #EAEDFF;
      border-radius: 8px;
      display: block;
      align-items: center;
      justify-content: center;
      padding: 30px 30px;
      margin: 0px;
    }

    .n_join h4{
      text-align: center;

  }

  .n_join p{
    text-align: center;
  }
 .n_button{
  margin-left: 0px;
 } 


}



/* NATALIYA RECIPES */

.recipetop{
  display: flex;


}
.recipetop img{
 padding: 60px;
  
}


.recipeinfo{
  align-items: left;
  margin-top: 70px;
}

.recipeinfo h6{
  text-align: left;
}

.recipeinfo h2{
  text-align: left;
}


/* NATALIYA SIGNUP */

#n_formintro{
  background-image: url("/images/signup/yoga.jpg");
  background-size: 1800px 600px;
  background-color: #cccccc;
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

  align-content: center;
}


#n_formintro h1{
  padding: 100px 0px;
}


.n_form{
  align-items: center;
  justify-content: center;
  display: flex;
  margin: auto 60px;
  margin-bottom: 400px;
  margin-top: 150px;
}


@media(max-width:768px){

  .n_form{
    margin-bottom: 300px;
    margin-top: 50px;
  }

}



li{
  font-family: sans-serif;

	font-size: 14px;
	font-weight: 400;
	text-align: left;
	color: #0F3D3D;
	margin-bottom: 24px;
	max-width: 800px; 
  line-height: .4;
}


.n_nutrition{
  align-content: center;
  justify-content: center;
  display: flex;

}

.n_nutrition img{
  width: 100%;
  margin: auto 50px;
}







/* NATALIYA ENDS */





  @media(max-width:768px){
      html{
      max-width: 100%;
      }
  }
  
  #wrapper{
      margin: auto;
      padding:1em;
  }
  
  .site-header {
  font-family: 'Lato', sans-serif;
  }
  
  .site-header h1{
      margin:1rem;
      color: #0f3D3D;
  }
  
  .site-header a{    
  text-decoration: none;    
      font-weight: 900;
  }
  p,h1,h2,h3,h4{
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  margin-bottom: 1em;
  }
  h1,h2,h3,h4{
  font-weight:600;    
  }
  
  .site-header h1{
  font-weight: 650;
  font-size: 200%;    
  }
  .site-header h1:hover{
  color: #93BD89;
  }
  
  .site-header {
      display:flex;
      align-items: center;
      justify-content: space-between;
  }
  
  .menubar{   
  display: flex;
  flex-wrap:wrap; 
  list-style: none;
  padding:0;
  justify-content: space-between;    
  }
  
  @media (max-width:768px){
      .menubar{
      flex-direction: column;
      padding-right:15px;     
      }
  }
  
  .menu a {
  color:#0F3D3D;
  ;
  }
  .menu a:hover{
  color:#93BD89;
  }
  /* .main h1{
  text-align: center;
  } */
  
  /* default style for the boxes. suggestion, use border OR background-color not both (or something else if you like.) */
  .box{
  /*   border: 2px solid grey; */
    padding: 20px;
    background-color:transparent;
  }
  .box h1{
  font-weight: 600;
  font-size: 300%;    
  }
  .one img{
  width: 500px
  }
  
  @supports (grid-area: auto) {
    
    .boxes{
      display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
  }
  .one{
grid-column: 2;
  }
  @media (max-width:768px){
  .one img{
    margin-left: 15px;
    width: 100%;

  }
}
      .two{
      grid-column: 3/ span 2;
      }
      .two h1{
text-align: left;
      }
      .two p{
        width:500px;

      }
    }
      @media (max-width:1000px){
    .boxes{
  display: grid;
     grid-template-columns: 1fr;
      grid-gap: 10px;
  }
  .one {
    grid-column: 1;
    }
    .one img{
width:100%;
    }

          .two, .two p{
          grid-column: auto;
          width:100%;    
          }
  }
  .Event-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
    grid-gap: 20px;
    padding: 20px;    
    margin-top: 50px;
  }
  .Event-boxes img{
      width:250px;
  }
  
  .e-image {
  grid-column: 4/span 2 ;
  }
  .e-image img{
  width: 500px;
  height: 350px;    
  }
  .e-info{
    grid-column: 2/ span 2;
  }
  .e-f1{  
  grid-column: 2/span 1;   
  }
  .e-f2{
  grid-column: 3/span 1;  
  }
  .e-f1 img, .e-f2 img{
width:50px;

  }
  @media(max-width:768px){
      .Event-boxes{
        grid-column: auto;
      }
      .e-image{
  width: 100%;
  }
  /*
      .e-f1, .e-f2{
  grid-column: 1;
  text-align: center;        
  }
  */
      .e-f1 , .e-f2{
      width: 200px;
      }
      .e-f1 img, .e-f2 img{
      display: none;
      }
     
  }
  .hero-button{  
    background-color: #0F3D3D;
    border-radius: 4px;
    border: none;
    color: white;    
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 1% 0 2% 3%; 
    margin-left: 0;   
  }

  .hero-button a{
    color:white;
    text-decoration: none;
  }


  
  .hero-button:hover {
  background-color: #3CB371;
  color:black;
  }
  ul li{
  list-style-type: none;
  }
  
  
  
  @media (max-width:768px){
  .About-me p, .About-me h1{
  margin: auto; 
  text-align: center;
  width:100%;
  }
  }
  .MS-container{
    margin-left: 25px;
  }
   .MS-heading{
          text-align: center;
          margin-bottom: 40px;    
          }
          .MS-heading h1{
            font-size: 200%;

          }
          .MS-heading p{
            margin: auto;
            text-align: center;    
            }
   .MSboxes{
      padding:0; 
      display: grid;
     grid-template-columns: 1fr 1fr 1fr;
  }
  .MSboxes p{
width:200px;
text-align: center;
margin:auto;
  }
  .star{
display: flex;
flex-direction: column;
flex-wrap: wrap;
  }
    .card-img{
    width:310px;
        }
  @media (max-width:768px){
   .MSboxes{
      padding:2%; 
      display: grid;
     grid-template-columns: 1fr;
      grid-gap: 10px;
  }
  }
       .container{
          width:90%;
          margin:50px auto;    
          }
          
          .heading{
          text-align: center;
          margin-bottom: 40px;    
          }
          
          .row{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
              flex-flow: wrap;
          }
          .card{
          width:320px;
          background:#fff;
          border-radius: 20px;    
          border: 1px solid #ccc;
          margin-bottom:50px;
          transition: 0.3s;    
          }
          
          .card-header{
          text-align: center;
          border-radius:20px 20px 0px 0px ;  
          padding:5px 5px;
          background-color:#fff;
          color:#fff;    
          }
          
          .card-body{
          padding:30px 20px;
          text-align:center;
          font-size:18px;    
          }
  .card-img{
  border-radius: 20px 20px 0 0;
  }
          
          .card-body .btn{
          display: block;
          border-radius:10px;     
          color:#5B9E8E;
          text-align:center;
          background-color: #fff;   
          margin-top:30px;
          text-decoration: none;
          padding:10px 5px;    
          }
          
          .card:hover{
          transform:scale(1.05);
          box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.25);    
          }
          
          @media screen and (max-width:768px){
              .card{
              width:100%;
              }
          }
            @media screen and (max-width:768px){
                .container{
                width:100%;
                }
                .heading{
                padding:20px;
                  font-size:20px;  
                }
                .card{
              width:80%;
              }
          }
  
  .btn1 {
      background:#3B5568;
      text-align: center;
      padding: 15px;
      border-radius: 5px;
      color: #fff;
      cursor: pointer;
      text-transform: uppercase;
  }
  @media (min-width:768px){    
      .menu li{
      display:flex;
          flex-wrap: wrap;
      margin-right:2em;    
      }
       .hero-banner p{
          width: 100%;
          }
      
  }
  
  @media screen and (max-width: 768px){
      .Contact{
          width: 90%;
      }
    .contact-form{
      flex-direction: column;
    }
    .msg textarea{
      height: 80px;
    }
    .input-fields,
    .msg{
      width: 100%;
    }
       
  }
  
  #P-Works h1{
  text-align: center;
  margin-bottom: 10px;    
  }
    .container2 {
        justify-content: center;
          display: flex;
          align-items: center;
        margin-bottom: 20px;
        }
      .container2:hover{
          border-radius: 10px;
          background-color:#98DACB ;
          transform:scale(1.01);
          box-shadow: 0 0 40px -10px rgba(0, 0, 0, 0.25);    
          }
        .container2 img { 
          border-radius:20px;   
          max-width: 450px
        }
        .P-images {
          flex-basis: 0;
          order: 0;
        }
      .P-images2 {
          flex-basis: 0;
          order: 2;
        }
      .text{
          margin:1%;
          width:50%;
      }    
        .text a{  
          color: #000;
          padding-left: 20px;
            text-decoration: none;
        }
  
  @media (max-width: 768px){
      
      .container2{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      }
      .container2:hover{
          border-radius: 20px;
      }
          
      .text{
          margin-top: -30px;
          color: #f4f4f4;
          width:90%;
      }
          .P-images2 {
          flex-basis: 0;
          order: 0;
        }
      #P-Works{     
  margin-left: 0;
  }
      
       .container2 img{
      width: 100%;
      border-radius:5px ;     
      }
       .hero-button{
      margin-left: 35%;
      }
        
  }
  
  .button {
    border-radius: 4px;
    background-color: #3B5568;
    border: none;
    color: #ccc;
    text-align: center;
    font-size: 28px;
    padding: 10px;
    width: 90%;
    transition: all 0.5s;
    cursor: pointer;
    margin: 5px;
  }
  
  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  
  .button span:after {
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  
  .button:hover span {
    padding-right: 25px;
  }
  
  .button:hover span:after {
    opacity: 1;
    right: 0;
  }
  
  .box2{
    padding: 20px;
    background-color:transparent;
  }
  .box2 h2{
  font-weight: 750;
  font-size: 250%;    
  }
  
  @supports (grid-area: auto) {
    
    .boxes2{
      display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
  }
      .g-image{
      grid-column: 2 ;
      }
      .g-info {
      grid-column: 3 ;
      }
      .g-info p{
      width:400px;
      }
      @media (max-width:768px){
    .boxes2{
        display: grid;
     grid-template-columns: 1fr;  
      grid-gap: 10px;
  }
          .g-image{
          grid-column: auto;
          }  
           .g-info{
          grid-column: auto;
          }
  
  }
  }
  .site-footer {
  font-family: 'Lato', sans-serif;
  }
  
  .site-footer h1{
      margin:1rem;
      color: #0f3D3D;
  }
  
  .site-footer a{    
  text-decoration: none;    
      font-weight: 900;
  }
  
  .site-footer h1{
  font-weight: 650;
  font-size: 200%;    
  }
  .site-footer h1:hover{
  color: #93BD89;
  }
  
  .site-footer {
      display:flex;
      align-items: center;
      justify-content: space-around;
  }
  .f-menubar{   
  display: flex;
  flex-wrap:wrap; 
  list-style: none;
  padding:0;
  justify-content: space-around;    
  }
  
  @media (max-width:768px){
      .f-menubar{
      flex-direction: column;
      padding-right:15px;     
      }
      .site-footer{
  display: block;
   text-align: center;
  }
  }
  .f-menubar li{
  padding: 10px;
  }
  
  .f-menu a {
  color:#0F3D3D;
  ;
  }
  .f-menu a:hover{
  color:#93BD89;
  }

  
   /* RECIPE PAGES CSS */

  .square{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:30px;
    margin: 5%;
    width:90%;
  }
    .recipe-info h6 {
    margin-top:5%;
  }

  .ingredients, .ingredients-body{
    margin:auto;

  }
  .Ingredients, .instructions, .back-to{
    margin-top:10%
  }
  
 .instuctions h2, .ingredients h2, .ingredients-body h2{
   text-align: left;
 }
 .back-to h2{
font-size: 200%;

 }

  @media(max-width:768px){
    .square{
      display:grid;
      grid-template-columns: 1fr;
      grid-gap:30px;
      margin: 5%;
      width:90%;
    }

  }
    

  .ingredients-body{
  color:#0F3D3D;
  font-family: Lato;   
  width:1200px;
  margin: auto;
  margin-top: 8%;
  }
  .nutrition{
  justify-content: space-between;    
  display: flex;
  flex-wrap: wrap; 
 
  }
  .n-cards {
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width:110px;
  }
  
  .n-cards:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  .n-container {
  text-align: center;    
    padding:30px 0px;
  }
  .n-container p{
text-align: center;
font-family:Lato ;
  }
  @media (max-width:1200px){
      .n-cards{    
      margin: 10px 10px 10px 20px;
      }
  }
  
  .calories{
  background: linear-gradient(180deg, rgba(239,242,250,1) 0%, rgba(239,242,250,1) 70%, rgba(216,220,248,1) 30%, rgba(216,220,248,1) 100%);
  }
  
  .sodium{
  background: linear-gradient(180deg, rgba(239,242,250,1) 0%, rgba(239,242,250,1) 60%, rgba(216,220,248,1) 40%, rgba(216,220,248,1) 100%);
  }
  
  .fat{
  background: linear-gradient(180deg, rgba(239,242,250,1) 0%, rgba(239,242,250,1) 72%, rgba(216,220,248,1) 28%, rgba(216,220,248,1) 100%);
  }
  
  .protein{
  background: linear-gradient(180deg, rgba(239,242,250,1) 0%, rgba(239,242,250,1) 61%, rgba(216,220,248,1) 39%, rgba(216,220,248,1) 100%);
  }
  
  .carbs{
  background: linear-gradient(180deg, rgba(239,242,250,1) 0%, rgba(239,242,250,1) 86%, rgba(216,220,248,1) 14%, rgba(216,220,248,1) 100%);
  }
  .fiber{
  background: linear-gradient(180deg, rgba(239,242,250,1) 0%, rgba(239,242,250,1) 24%, rgba(216,220,248,1) 24%, rgba(216,220,248,1) 100%);
  }
  .recipe-description li{
  padding: 10px;
  }
  .instructions img{
    max-width:75%;

  }
  .ing-list li{    
  padding: 10px; 
  padding-left: 0;
  }
  .instructions img{
  width:100%;
  }
  .back-button {
  padding: 20px;    
  height:100px;     
  background-color:#EAEDFF;
  text-align: center;    
  }
  .ingredients-body a{
  text-decoration: none;
  color:#0F3D3D;

  }
  .back-to h2{
 text-align: center;
 margin-bottom: 40px;
  }
  .back-to p{
text-align: center;
margin: auto;
  }
 
  .back-to{
    margin:auto;
    margin-top: 80px;
    margin-bottom: 80px;
  }
  .back-button img{
    width: 40px;
      position: absolute;
      margin-left:-550px;
  }
  @media (max-width:1200px){
      .ingredients-body{
        margin-left: 15px;
      width:100%;
      }
    }
      @media (max-width:768px){
        .back-button img{
          margin-left: -200px;
        }
        .instructions img{
          max-width:95%;
      
        }
        .back-to h2{
          font-size:150%;
        }
        .back-to{
          margin: auto;

        }
      }
  
/* Split */

  /* ANGELICA */
  /* PHILOSOPHY PAGE */
   .main{
    padding:0 4rem;
  }

  .a_intro{
    display: flex;
    /* flex-wrap: wrap; */
    max-width: 1150px;
    padding:0 7rem;
    /* margin: 60px auto; */
    
  }
  
  .a_c50{
    width: 50%;
    margin-top: 5%;
    margin-bottom: 4%;
    
  }
  .a_c50 img{
    margin-left:8%;
  }
  .a_c50 img{
    max-width: 100%;
    width: auto; 
    margin-right: 2%; 
  }
  
.a_c50 h1{

  margin-bottom: 0px;
 text-align: left;
 margin-left: 13%;

}
.a_c50 p{
  margin-top: 4%;
  margin-left: 13%;

}
.a_icons { 
  margin-top: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-gap:150px;
}
.a_icons_icon{
  justify-self:center;
}

.a_icons_icon h5{
text-align: center; 
}
   
.a_imagery{
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
}
 
.a_icons img{
 align-items: center;
}
   .a_icons h4{
     width: 150px;
    align-items: center;
   }
   .books, .media{
     margin-bottom: 10%;
   }
  
 
   .books img{
     width: 50%;
     
   }
   .books .btn{
     border-radius: 10px;
     color: #5B9E8E;
     text-align: center;
     background-color: #D7DCFB;
     margin-top:5px;
     text-decoration: none;
     
   } 
 .description{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   grid-gap: 2rem;
   /* outline: 1px solid red; */
 }

.description-item{
  text-align: center;
  justify-content: center;

}

.description-item p{
  width: 330px;
  padding-left: 40px;
}
.description p{
  place-self: center; 
 
   text-align: center;
  justify-content: center;
}

.text-center h4{
 text-align: center;
} 

.media img{
  width:60%;
  height:60%;
  
}
  @media screen and (max-width:768px) {
    .main{
      padding:0;
      padding-right: 7%;
    }
  .a_c50{
    width:100%;
  }
  .a_c50 img{
    margin-left:5%;
  }
  .a_c50 h1, .a_c50 p{
    margin-top:0;
    margin-left:5%;
  
  }
  .a_c50 p{
    margin-top:3%;
  }
  .description{
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
    /* outline: 1px solid red; */
  }
  .description-item img{
    width:40%
  }
  .description-item p{
    padding-left: 25%;
  }
  
  }

  @media screen and (max-width:600px) {

    .a_c50 img{
      margin-left:4%;
    }
    
    h1{
      font-size: 150%;
    }
    .a_c50 {
        width: 100%;

    }
    .a_intro{
        flex-direction: column;
        padding: 4rem 0;

    }
    .description-item p{
      padding-left: 10%;
    }
   .a_icons{
     grid-gap:50px;
   }
   .resourcesintro p{
     margin-left: 3%;
   }

}  



  @media screen and (min-width: 600px) {
    .p_description {
      width: 95%;
      max-width:42rem;
      margin: 0 auto;
      margin-bottom: 5%;
     }
     .a_icons { 
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
@media (max-width:768px){
.f-menubar{
  align-items: center;
}
}