body{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    background: #e5f5ff;
    margin: 0;
}


header{
    background: #649FED;
    position: relative;
    z-index:4;
    display:flex;
   justify-content: space-between;
}

.reresource{
  
    background: url(images/get-food-relief.png);
    padding:20em 5em 2em 0em;
}
.rr{
    color: #fff;
    font-weight: bolder;
    text-align: right;
   font-size: 3.5rem;
    
}
nav a, footer a{
    text-decoration: none;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}
nav a:hover{
    color:#5EF087;
}
@media(min-width:800px){
    nav{
        flex-basis: 100%;
        max-width: 60rem;
        align-self: center;
    }
}
#search-input{
    border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -webkit-border-radius: 3.1em 3.1em 3.1em 3.1em ;
   -moz-border-radius: 3.1em 3.1em 3.1em 3.1em ;
    padding:.2em;
    font-size: 1rem;
    color: #000000;
    font-weight: 900;
    width:7em;
    text-align: center;
}
#search-form{
    position:relative;
   
}
#search-form button{
    position: absolute;
    right:.4em;
    top:.2em;
    border: none;
    background-color: transparent;
    font-size: 1rem;

}

/*-------hamburger styles--------------------------------------*/
.menu-icon {
    position: relative;
    cursor: pointer;
    padding: 0.7rem;
   
}
.menu-icon .nav-icon{
    background: #fff; /*placeholder color*/
    display: inline-block;
    height: .125rem;
    width: 1.25rem;
    position: relative;
}
@media (min-width:800px){
    .menu-icon .nav-icon {
        display: none;
    }
}

.menu-icon .nav-icon:before{
    background: #fff; /*placeholder color*/
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0.6em;
    transition: all .4s ease-out;
}
.menu-icon .nav-icon:after{
    background: #fff; /*placeholder color*/
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: -0.6em;
    transition: all .4s ease-out;
}
.menu-btn{
    display: none;
}
.menu-btn:checked ~ .menu{
    display: block;
}
#menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(45deg);
    top: 0;
}
#menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(-45deg);
    top: 0;
}
#menu-btn:checked ~ .menu-icon .nav-icon{
    background: transparent;
}
nav ul{
    display: none;
}
@media (min-width:800px){
    .menu{
        display:block;

    }
}
ul.menu{
    padding-left: 0;
}
.menu li{
    display: block;
}
@media(min-width:800px){
    .menu li{
    display: inline-block;
    margin: 0 1em 0 1.5em;
}
}

/* -----------------second slider styles----------- */
#slider{
    margin:0 auto;
    width: 100%;
    max-width:100%;
    text-align: center;
    
}
#slider input[type=radio]{
    display:none;
}
#slider label{
    cursor:pointer;
    text-decoration: none;
}
 #slides{
    background: #fff;
    position:relative;
    z-index: 1;
  
   } 
  

 #overflow{
    width:100%;
    overflow:hidden;
}
#slide1:checked ~ #slides .inner{
    margin-left: 0;
}
#slide2:checked ~ #slides .inner{
    margin-left: -100%;
}
#slide3:checked ~ #slides .inner{
    margin-left: -200%;
}
#slides .inner{
    transition:margin-left 800ms cubic-bezier(0.770, 0.000,0.175, 1.000);
    width: 400%;
    height:22em;
    position: absolute;
   
} 

#slides .slide{
    width: 25%;
    float:left;
    display:block;
    height: 100%;
    color:#fff;
}
#slides .slide_1{
    background:url(images/get-food-relief.png);
    background-size: cover;
  
}
#slides .slide_2{
    background:url(images/lets-fight-food-waste-together.jpg);
    background-size: cover;
    height:23em;
   
}
#slides .slide_3{
    background: url(images/help-your-community.png);
    background-size: cover;
}
.slide-content{
    padding:5.5em;
}
#controls{
    margin:10em 0 0 0;
    width:100%;
    height:3.1em;
    z-index: 3;
    position: relative;
}
#controls label{
    transition: opacity 0.2s ease-out;
    display:none;
    width:50px;
    height:3.1em;
    opacity:.4;
}

main a{
    text-decoration: none;
    color: #fff;
    border:0.3em solid #88FFA9;
    border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -webkit-border-radius: 3.1em 3.1em 3.1em 3.1em ;
   -moz-border-radius: 3.1em 3.1em 3.1em 3.1em ;
   background: #88FFA9;
}
main a:hover{
    border:0.3em solid #FBFF4F;
    border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -webkit-border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -moz-border-radius: 3.1em 3.1em 3.1em 3.1em ;
    background: #FBFF4F;
}
header figure a{
    border:none;
    background: none;
}
header figure a:hover{
    border:none;
    background: none;
}

/*mobile visible arrows*/
#slide1:checked ~ #controls label:nth-child(2),
#slide2:checked ~ #controls label:nth-child(3),
#slide3:checked ~ #controls label:nth-child(1){
background: url(images/right-arrow.png) no-repeat;
background-size: cover;
float: right;
margin: 0 0 0 10rem;
display: block;
color: #5EF087;


}
#slide1:checked ~ #controls label:nth-child(3),
#slide2:checked ~ #controls label:nth-child(1),
#slide3:checked ~ #controls label:nth-child(2){
background: url(images/left-arrow.png) no-repeat;
background-size: cover;
float:left;
margin: 0 0 10rem 0;
display:block;
color: #5EF087;

}


/* styles for recipient resource page*/
.food-bank-intro{
    text-align: center;
}
.food-bank{
  padding: 5em;
    
}
@media(min-width:800px){
.food-bank{
   display: flex;
    background-color: #F4e9cb;
    column-gap: 2em;
  }
}
@media(min-width:800px){
.diff{

    flex-wrap: wrap;
}
}   
@media(min-width:800px){
    .criteria-details{
      max-width: 50%;
        }
   
}
.criteria{
   display: flex;
   flex-direction: column;
   padding:2em;
    
}
@media(min-width:800px){
    .criteria{
        display:flex;
       flex-direction: row;
      column-gap: 5em;

        }
   
}

.criteria h4{
    margin:0 ;
}
.criteria p{

        margin:0 0 2em 0;
    }



@media(min-width:600px){
.row {
    display: flex;
    width: 100%;
  }
}
  
  .row div {
   
  }
  
  .noMargin {
  }
  
  
 @media(min-width:600px){
        .row {
            display: flex;
            width: 100%;
            column-gap: 1.5em;
           margin-bottom: 2em;
          }
        }
          .row div {
           
          }
          
          .Margin {
          
          }
          
    .one{
         padding: 2em;
    }     
    @media(min-width:600px){
        .one{
            padding: 0em;
       }
    }
.dis{
          padding: 2em 0;
        text-align: center;
     
        }
    
        @media(min-width:600px){
        .dis{
           display: flex;
          text-align: left;
       
          }
        }
    
 .rr-top{
        margin-bottom: 0;
    }

.hope{
    margin-right:100rem ;
}
@media(min-width:600px){
.locations{
display: flex;
flex-basis: 100%;
}
}

/* styles for Donate page*/

.donate-heading{
   font-size: 3rem;
   margin: 1rem 0;
}


.donate-body{
    text-align: center;
    align-content: center;
    
}
@media(min-width:800px){
.donations{
    display: flex;
    margin-bottom: 5rem;
    column-gap: 5rem;
}
}
.donations-section img{
    border: none;

}
.donations-section{
    text-align: center;
    padding: 5rem;
    margin: 0 auto;
}
@media(min-width:800px){
    donations-section{
        width:fit-content;
    }
}
 .donate-hero{
        background: #649FED;
        color: #fff;
        font-size: 1.5rem;
        padding: 3rem;
        text-align: center;

  
    }
    .donate-hero p{
        font-size: 1.3rem;
        width:70%;
        margin: auto;
    }
    @media(min-width:800px){
        .donate-hero{
            background: #649FED;
            color: #fff;
            padding: 2em;
            display: flex;
            flex-direction: row-reverse;
            font-size: 1.5rem;
      
        }
    }
.donate-how-to{
    background:#F4e9cb ;
    font-size: 1.5rem;
    padding: 3rem 2rem;
}

.donate-how-to p{

    width:70%;
    margin:auto;
    font-size: 1rem;}


    @media(min-width:800px){
.donate-intro{
    display: flex;
    flex-direction: row-reverse;
    background: #649FED;
}
}
@media(min-width:800px){
.today{
display: flex;
    flex-direction: column;
    font-size: 1.4rem;
}
}

.donate{
    text-align: center;
    padding: 1rem 0;
    font-size: 2rem;
}
.donate-1{
    text-align: left;
    margin: 2rem 0;


}
@media(min-width:500px){
    .donate-1{
        width: 70%;
        margin: 2rem auto;
    }
}
@media(min-width:800px){
    .donate-1{
       flex-basis: 100%;
    }
}
@media(min-width:1200px){
    .donate-1{
     display: flex;
     flex-direction: row-reverse;
     column-gap: 1rem;
    }
}
.donate-1 span{
    display: block;
    font-weight: bold;
}
@media(min-width:650px){
    .donate-1 figcaption{
        width: 70%;
        
    }
}
.donations-section + .resource-container{
    margin: 0 auto 2rem;
}

/* styles for About Us page*/



.hero-about{
    background: url(images/about-us-header.jpg);
    background-size: cover;
    padding:5em;
    margin-top:0;
}
@media (min-width: 800px){
.hero-about{
    background: url(images/about-us-header.jpg);
    padding:20em;
    margin-top:0;
}
}
.about-section{
    text-align: center;
}
@media (min-width: 800px){
    .history-container{
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-around;
        margin: 2em;
    }
}
@media (min-width: 800px){
    .about-box{
        flex-basis: 40%;
    }
}
@media (min-width: 800px){
    .value-container{
        display: flex;
        justify-content: space-around;
        margin: 2em;
    }
}
.mobile-team{
    text-align:center;
}
@media (min-width: 800px){
    .mobile-team{
        display: none;
    }
}
.carousel-item{
    padding: 1em;
}
.carousel-item p{
    text-align: justify;
}
.team-section{
    display: none;
}
@media (min-width: 800px){
    .team-section{
        display:block;
        text-align: center;
        margin-top: 2em;
    }
}
@media(min-width:800px){
    .team-container{
        display:flex;
    }
    .team-member{
        flex-basis: 20%;
    }
}

#team-carousel .carousel-control-prev, #team-carousel .carousel-control-next{
    position: absolute;
    top:-13rem;
}
.impact-section{
   display: flex;
 

}
.imp{ 
   text-align: center;
}
.mobile-testimonials{
    padding: 2em;
}
@media (min-width: 800px){
    .mobile-testimonials{
        display: none;
    }
}
#testimonial-carousel-recipient, #testimonial-carousel-donor{
    text-align: center;
    background: #649FED;
    padding: 2em 4em;
    margin: 2em 0;
}
.testimonials{
    display: none;
}
@media (min-width: 800px){
    .testimonials{
        display: flex;
    }
}

/* styles for faq page*/
@media(min-width:800px){
    .faq-container{
        display:flex;
        flex-direction: row-reverse;
    }
}
.header-faq{
    margin-bottom: 0;
}
.faq-top{
    margin:0;
}
/* styles for main section of CSS*/
h1{
    font-weight: 700;
}
.parallax{
    margin-top: 15rem;
    text-align: center;
}
.parallax h2{
    text-align: center;
}

@media(min-width:800px){
.who-we-are{
    display: flex;
    justify-content:space-around;
}
}
@media(min-width:800px){
    .who-we-are-box{
        flex-basis: 50%;
    }
    }
.who-we-are figure{
    position: relative;
}
@media(min-width:800px){
    .who-we-are figure{
        flex-basis: 30%;
        margin: 0;
        align-self: center;
    }
    }
.circle{
    background-color: #FFCA41;
    height: 12rem;
    width:12em;
    border-radius: 9.3em 9.3em 9.3em 9.3em ;
    -webkit-border-radius: 9.3em 9.3em 9.3em 9.3em;
    -moz-border-radius:9.3em 9.3em 9.3em 9.3em;
    position: absolute;
    top: -3rem;
    right: -1.5rem;
    z-index: -1;
}
@media (min-width: 600px){
    .circle{
        height: 20rem;
        width: 20rem;
        right: -5rem;
        top: -4rem;
    }
}
@media(min-width:800px){
    .figure-container{
         display:flex;
    }
}

/*styles for forms*/
form input{
  
  
    border-radius: 3.8em 3.8em 3.8em 3.8em;
    -webkit-border-radius: 3.8em 3.8em 3.8em 3.8em;
    -moz-border-radius: 3.8em 3.8em 3.8em 3.8em;
   

}
form textarea{
    border-radius: 3.8em 3.8em 3.8em 3.8em;
    -webkit-border-radius: 3.8em 3.8em 3.8em 3.8em;
    -moz-border-radius: 3.8em 3.8em 3.8em 3.8em;
    width:100%;
    border:1px solid #B1B1B1;
    padding: 0;
}
form label{
    display: block;
    text-align: left;
    margin: .2rem 0;
}

.resource-container{
    align-self: center;
    background: #fff;
    width: fit-content;
    padding:3rem;
   
}
.resource-container input{
    margin-bottom: 2rem;
    border:1px solid #B1B1B1;
    width: 90%;
    padding: .2rem;}


    @media(min-width:600px){
    .resource-container{
        align-self: center;
        background: #fff;
        border: .5em solid #fff;
       flex-basis: 100%;
    }
}

/* styles for all images*/
img{
    height:auto ;
    max-width: 100%;
}



/* styles for footer*/
footer{
    background: #649FED;
    display: flex;
    padding: 2em;
   
}
footer li{
    list-style: none;


}
.footer-links{

    text-align: center;
}
@media(min-width:800px){
    .footer-links{
      display: flex;
    width: 20%;
    margin: auto;
     
    }
}
.social-contact{
    text-align: right;

}
.social-contact li{
    display: inline-block;
}
.social-contact a{
    text-decoration: none;
    color: #fff;
    border:0.3em solid #5EF087;
    border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -webkit-border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -moz-border-radius: 3.1em 3.1em 3.1em 3.1em ;
    background: #5EF087;
}
.social-contact a:hover{
    border:0.3em solid #FBFF4F;
    border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -webkit-border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -moz-border-radius: 3.1em 3.1em 3.1em 3.1em ;
    background: #FBFF4F;
}
.contact{
    text-align: right;
    padding-bottom:0.5em;

}
.contact a{
    text-decoration: none;
    color: #fff;
    border:0.3em solid #5EF087;
    border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -webkit-border-radius: 3.1em 3.1em 3.1em 3.1em ;
   -moz-border-radius: 3.1em 3.1em 3.1em 3.1em ;
   background: #5EF087;
}
.contact a:hover{
    border:0.3em solid #FBFF4F;
    border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -webkit-border-radius: 3.1em 3.1em 3.1em 3.1em ;
    -moz-border-radius: 3.1em 3.1em 3.1em 3.1em ;
    background: #FBFF4F;
}