body {
    font-family:  "Nunito", monospace,sans-serif;
    color:#2E8B70;
    background-color: #141414;
    margin: 0;
 
    display:flex;
    justify-items: center;
    align-items: center;
    overflow-x: hidden;
}

.wrapper { 
    width:100%;
    margin-left: 4%;
    margin-right: 4%;
    margin-top: 1%;
    background-color: #101010;
}


.subtitle {
    background-color: #101010;
   width: 97%;
    padding-left: 3%;
    align-items: center;
     text-shadow: 1px 1px 11px black;
}

.TOP {
    position: sticky;
    bottom: 0;
    background-color:#101010;
    text-align: center;
    padding: 1%;
    font-size:110%;
}

/*titles*/

#charity {
    width: 94%;
    color: #2E8B70;
    background-image:url(volsecdark.png);
    color: white;
    padding: 3%;
    margin-bottom:2%;

}


#involved {
    width: 94%;
    color: #2E8B70;
    background-image:url(volsecdark.png);
    color: white;
    padding: 3%;
}

#meetOurTeam {
      width: 94%;
    color: #2E8B70;
    background-image:url(volsecdark.png);
    color: white;
    padding: 3%;
    margin-bottom:2%;
}

#OP {
     width: 88vw;
    color: #2E8B70;
    background-image:url(volsecdark.png);
    color: white;
    padding: 3%;
    padding-right: 0;
    margin-bottom:2%;
    margin-left: 0;
}

#opportunites {
    
     width: 88vw;
    color: #2E8B70;
    background-image:url(volsecdark.png);
    color: white;
    padding: 3%;
    padding-right: 0;
    margin-bottom:2%;
    margin-left: 0;
}


#opportunites h1 {
    color: white;
}
/*---------------------------*/
h1 {
    padding: 3%;
    font-size: 300%;
}

h2 {
    color: floralwhite;
    font-size: 250%;
    padding: 3%;
}

h3 {
    color: floralwhite;
    padding: 3%;
}

p {
    
font-size: 140%;
    
}

li {
    display: inline;
    list-style-type: none;
    align-content: center;
    font-size: 110%;
    }

strong {
    color: #3F8B70;
}

underline {
    text-decoration-line: underline;
    text-decoration-color: #3F8B70;
    
}
/* button */
button {
      font-family: "Nunito", monospace,sans-serif;
    font-size: 100%;
    padding: 2%;
    font-size: 100%;
    background-color:transparent;
    border: solid 4px floralwhite;
    margin: 0 1% 0 0%;
    cursor: pointer;
    
    
}
button:hover {
      font-family: "Nunito", monospace,sans-serif;
    font-size: 100%;
     padding: 2%;
    font-size: 105%;
    border: solid 5px floralwhite;
    background-color: transparent;
    cursor: pointer;
    
}

button strong {
    color: floralwhite;
   
    
}



/* links */
a:link, a:visited, a:active {
    font-family: "Nunito",monospace,sans-serif;
    font-size: 130%;
    text-decoration: none;
     color:floralwhite;
    cursor: pointer;
}

a:hover {
    font-family:"Nunito", monospace,sans-serif;
      font-size: 130%;
    text-decoration: none;
    font-style: bold;
   /* color: #004d40;*/
    color: #3F8B70;
    transition: 0.2s;
    padding: 5px;
    background-color: #ffffff;
    border-bottom: solid;
    border-bottom-width: 5px;
    border-bottom-color: #004d40;
      cursor: pointer;
}



/* navigation banner */

.navBar {
    display: grid;
    grid-template-columns: auto auto auto;
    column-gap: 10%;
    grid-template-rows: 100%;
    align-items:center;
    padding-left: 2%;
    padding-right: 1%;
    
    background-color:#101010;
    width: 90vw;
    height: auto;
    position: sticky;
    top:0;
   
    z-index: 2 !important;
}

.navBar p {
    padding-left: 3%;
}

.SMicons {
    justify-content: space-evenly;
    align-content: space-around;
}

/*bottom banner */
.bottombar {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 5%;
    grid-template-rows: auto auto;
   
    align-content: center;
    justify-content: center;
    align-items:center;
    text-align: center;
    
    padding: 2%;
     background-color: #090909;
   
}

.bottombar li {
    display: inline-grid;
text-align: center;
    border-bottom:solid 2px #2E8B70;
    font-size:160%;
    padding: 2% 10% 2% 10%;
    align-items:center;
}

.bottombar p {
    font-size: 120%;
    color: white;
}

.address {
    width:100%;
}

.tel {
    width:100%;
    height:100%;
}

.email {
       width:100%;
    height:103%;
}

.connect {
       width:100%;
    height:100%;
}

/* donation and volunteer form page */

.VandDform {
    background-image:url(geometricbg.jpg);
}


.forms {
    color: floralwhite;
    font-size:120%;
    
}


.forms h1 {
    color:#2E8B70;
}

.forms a:hover {
    background-color:transparent;
    font-size: 140%;
    border: none;
}

.forms button {
    color: floralwhite;
}


/*volunteer form*/
#volform{
 display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    align-items: center;
     align-content: center;
   
    width: 100%;
    padding: 5%;
    
}

/* Donation Form */

#donoform {
    display: grid;
    grid-template-columns: auto 2% auto;
    grid-template-rows: 1fr;
    align-items: center;
    align-content: center;
  
    padding: 8%;
    
}

#donoform button {
    color: floralwhite;
    padding: 5%;
    font-size: 140%;
    margin: 3%;
}

/*sponsor*/




/*main content HOME*/
.Content {
    width: 100%;
background-image:url(geometricbg.jpg);
    color: floralwhite;
}

#extra { 
    
    padding-left: 3%;
}

#Homeformbtn strong{
    color: white;
}
.homePage {
    background-image:url(foodtrucklinedark.png);
      width: 90%;
    height: 56vh;
    object-position: top;
    align-content: center;
    color: white;
    text-shadow: 2px 2px 8px black; 
    text-align: left;
    padding: 5%;
}

.homePage a:active, a:link, a:visited{
    font-size: 100%;
    background-color:transparent;
    border: none;
}


.homePage a:hover {
    font-size: 105%;
    border: none;
    background-color: transparent;
}

.info {
    padding: 4%;
    background-color: #222222;
    margin:3%;
}

#ourcause h2 {
    color: #2E8B70;
}

.Content strong {
   /* color: #2E8B6A;
    color: #379479;*/
   color: #45b997;
}


.Content h3 {
    font-size:140%;
}



.Content h1, h2, h3, p{
    padding: 1% 0 0 0;
}

.subContent {
       padding: 4%;
    background-color: #222222;
    margin:0 3% 0 3%;
}



#volunteering {

    color: #2E8B70;
}

#vol {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr;
    
    padding: 6% 2% 6% 2%;
    
    align-items: center;
    justify-content: center;
}

.volSec {
     display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr;
    column-gap: 1%;
    width:93vw;
    
        align-items: center;
    justify-content: center;
    align-content: center;
}
    

#buttonplacement {
    padding: 0 3% 0 3%;
}


.subContent button {
    padding: 6%;
}

#volPic {
    width: 90%;
            align-items: center;
    justify-content: center;
    align-content: center;
}
#opportunites {
    color: #2E8B70 ;
  
}

#sponsor {
    color: #2E8B70 ;
   
}
#spon {
     padding: 4% 2% 6% 2%;
}

.sponsorbtn button {
    padding: 3%;
    margin-left: 3%;
}

#newsletter {
    color: #2E8B70 ;
    
}


/*-----------------------------*/

/* mobile content */


#child {
    display: none;
}

.redirect {
    display: none;
}

.mobile-navigation {
    display: grid;
    grid-template-columns: 60% auto;
    column-gap: 20%;
    grid-template-rows: 1fr;
    width:100%;
    padding: 1%;
    align-items: center;
    background-color: #101010;
    
}

.mobile-navigation p{
    font-size: 130%;
    padding: 0 5% 0 5%;

}



/*About Us*/


.HOMEimage {
    display:grid;
    grid-template-rows: 1fr;
    grid-template-columns: 45% auto;
    column-gap: 2%;
    width: 90vw;
    padding-bottom: 1%;
    font-size: 100%;
}
.mainContent {
    padding-top: 1%;
    background-image:url(geometricbg.jpg);
}

.mainContent h3 {
    font-size:190%;
}



.aboutus {
    background-image: url(aboutusbg.png);
     width: 100%;
    height: 90vh;
    object-position: top;
    align-content: center;
    color: white;
    text-shadow: 2px 2px 8px #121212; 
    text-align: center;

}




.welcome {

    background-color:#222222;
    border: solid 2px #222222;
    text-align: left;
    padding-top: 1%;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 100%;
    color: floralwhite; 
    
    
}
.team {
    background-color:#121212;
    padding-top: 1%;
    font-size:105%;
}

.teamContent {
    padding: 5%;
    background-color: #222222;
    font-size: 90%;
    color: floralwhite;
}



.members {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    width: 85%;
    
    align-content: center;
    justify-content: center;
    
    padding: 0 5% 0 5%;
    column-gap: 3%;
    color: floralwhite;
}

#samNaaz {
    text-align: right;
    padding-right: 10%;
}

#faisalTariq {
    padding-left: 10%;
}


/* Board members*/

.boardMembers {
       display: grid;
    grid-template-columns: auto auto;
    column-gap: 5%;
    grid-template-rows: 1f;
    width: 90%;
    
    align-content: center;
    align-items: center;
    
    padding: 0 5% 5% 5%;
    color: floralwhite;
    
}

#osmaninfo {
    padding: 0 10% 0 10%;
    text-align: center;
}


#zaheerIqbalinfo {
      padding: 0 10% 0 10%;
    text-align: center;
}



.trustee {
           display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 1fr;
    width: 85%;
    
    align-content: center;
    align-items: center;
    text-align: center;
    
    padding: 0 2% 2% 2%;
    column-gap: 3%;
    color: floralwhite;
    
}


 /*Our Work*/   

.workcontent {
    background-image: url(geometricbg.jpg);
}

.OWtitle {
    background-image:url(ourworkbg.png);
    width: 100%;
    height: 90vh;
    
    align-content: center;
    color: white;
    text-shadow: 2px 2px 8px #121212; 
    text-align: center;

    
}
    
    .section1 {
     display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
        grid-row-gap:0;
    width: 80%;
}

.ourProjects {
 display: grid;
    float: left;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    width: 90vw;
    height: 100%;
    
    text-align: left;
    transform: translateY(3%) 
} 

.ourProjects p{
    padding: 3%;
}
#sites {
    padding-left: 5%;
}


.workContent {
    background-color:#101010;
    align-content: center; 
    width: 80vw;
    margin:3%;
    padding: 3%;
}

#FoodKitchen {
    
}

#community {

}

#overseas {
   
}


/* Volunteer with us*/

.volunteer {
    background-image:url(volunteerdark.png);
         width: 100%;
    height: 90vh;
    object-position: top;
    align-content: center;
    color: white;
    text-shadow: 2px 2px 8px #121212; 
    text-align: center;

}

#opp p {
    color: floralwhite;
    font-size: 130%;
}
    
#admin {
     color: floralwhite;
    font-size: 130%;
    padding: 3%;
}
    
#admin button {
     padding:3%;
}
#volunteerbg {
    background-image:url(geometricbg.jpg);
}


.volunteerinfo {
    background-image:url(geometricbg.jpg);
}

.volunteerinfo p, h2, h3, h1{
    padding: 0 3% 0 3%;
}

.volunteerinfo h3 {
    font-size: 230%;
}

/*forms */

.forms {
     padding-left: 10%;
    padding-top: 1%;
    background-image: url(geometricbg.jpg);
}
/*Contact Us*/

.contact {
    padding-left: 10%;
    background-image: url(geometricbg.jpg);
}




/* screen adjustment */

/* min-width = <600px, 601px, 768px, 992px, 1200px */



/*-----------------------------------*/

@media only screen and (max-width: 600px ){ 
    
    .wrapper {
        width=100%;
     background-image:url(geometricbg.jpg);
        
    }
    
    .navBar {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10%;
    grid-template-rows: auto auto;
    align-items:center;
    padding-left: 2%;
    padding-right: 1%;
    
    background-color:#101010;
    width: 90vw;
    height: auto;
    position: sticky;
    top:0;
   
    z-index: 2 !important;
    }
  
    .TOP {
        width: 92vw;
        padding: 1%;
        position: sticky;
        height:40px;
        bottom: 0;
    }
    
    .bottombar {
            display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto auto;
        grid-row-gap: 2%;
    align-items:center;
        padding-top: 5%;
        
        background-color: #121212;
    }

    button {
        font-size: 200%;
        padding: 4%;
    }

    
#SMicons {
    padding: 5%;
    
}
    
    #child {
        display: block;

    }
    
/* Donation Form */

#donoform {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    align-items: center;
    align-content: center;

    
}

    
/*volunteer form*/
#volform{
 display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    align-items: center;
     align-content: center;
    width: 83%;
    margin 2%;
    
  
    
}

    
    
/* Index.html/ home page mobile version */ 
    
   
    /*titles*/


#charity {
    width: 80vw;
    color: #2E8B70;
    background-image:url(volsecdark.png);
    color: white;
    padding: 1%;
    margin-bottom:2%;
    font-size: 100%;

}


#involved {
    width: 80vw;
    color: #2E8B70;
    background-image:url(volsecdark.png);
    color: white;
    padding: 1%;
}

    #ourteam {
             width: 85vw;
    color: #2E8B70;
    background-image:url(volsecdark.png);
    color: white;
    padding: 1%;
    margin-bottom: 5%;
    }
    
#meetOurTeam {
      width: 85vw;
    color: #2E8B70;
    background-image:url(volsecdark.png);
    color: white;
    padding:1%;
    margin-bottom: 5%;
}

    /*mobile version that will redirect to other parts of the website - functions like the navigation bar */
    .homePage {
        display: none;
    }
    
    .Content p {
        display:none;
    }
    
    .PCvers {
        display: none;
    }
.redirect {
    display:block;
    width: 90vw;
    height: 20vh;
   background-color: #121212;
    border: solid 3px white;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
}

    .redirect h2 {
        font-size: 220%;
        
    }
    
    .redirect a:link, a:visited, a:active {
         font-family:"Nunito", monospace,sans-serif;
      font-size: 220%;
    text-decoration: none;
    font-style: bold;
        
    }

#donate:hover {
      background-color:#00643e;
     opacity: 80%;
    font-size: 105%;
}

#volunteer:hover {
 background-color:#2E8B70;
   opacity: 80%;
           font-size: 105%;
}
    
    #sponMonbile:hover {
        background-color:#1E8B74;
   opacity: 80%;
           font-size: 105%;
    }

#aboutus:hover {
   background-color: seagreen;
  opacity: 80%;
        font-size: 105%;
    
        /*background-color: #FCD12A;
     background-color:#c21807; */
} 
    
/* about us mobile version */
   
    .aboutus {
        background-image:url(aboutusbgcropped.png);
        height: 70vw;
    }
    
    .HOMEimage {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
         grid-row-gap: 2%;
    width: 80vw;
        align-content: center;
        
    }

    .welcome {
        width: 80vw;
    }
    
    
    #lineup {
    width: 91vw;
        position: relative;
        align-content: center;
        
        
    }
    
    .subtitle {
    background-color: #101010;
    width: 100%;
}
    .members {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
        grid-row-gap: 5%;
    width: 80vw;
    
    align-content: center;
    justify-content: center;
        
    
    padding: 0 5% 0 5%;
    color: floralwhite;
}
    
    .members p{
        font-size: 120%;
        width: 69vw;
        padding-left:2%;
        padding-right:2%;
    }
    
    #samNaaz {
    text-align: left;
    padding: 0 1% 0 1%;
    background-color: #161616;
}

#faisalTariq {
  padding: 0 1% 0 1%;
    background-color: #161616;
    width: 90vw;
}

    
    .teamContent {
    padding: 2%;
        width: 88vw;
    background-color: #222222;
    font-size: 100%;
    color: floralwhite;
}
    .team {
        transform: translateY(-8%);
    }
    
    /*The Board Members*/
    
    .boardMembers {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 1fr 1fr;
    width: 88vw;
    
    align-content: center;
    justify-content: center;
        
    padding: 0 2% 30% 2%;
   grid-row-gap:5%;
    color: floralwhite;
        
        transform: translateY(-10%;)
    }
    
    #osman {
        width:95%;
        height: 60%;

    }
    
    #osmaninfo {
        background-color: #161616;
        text-align: center;
    }
    
    #iqbal {
        width:95%;
        height: 60%;
    }
    
    #zaheerIqbalinfo {
        background-color: #161616;
        text-align: center;
    }
    
    /* The Trustees */
    .trustee {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr;
        grid-row-gap: 5%;
    width: 95%;
    
    align-content: center;
    align-items: center;
    text-align: center;
    
    padding: 10% 2% 5% 2%;
    column-gap: 3%;
    color: floralwhite;
        
    transform: translateY(5%)
        
    }
    #zafeer {
          width:95%;
        height: 60%;
        
    }
    #trusteeinfo {
                background-color: #161616;
        text-align: center;
    }
    
    #mahboob {
               width:95%;
        height: 60%;
        
    }
    
    #khaqan {
               width:95%;
        height: 60%;
        
    }
 

    /*our work pc version*/

    .ourProjects {
    width: 110%;
    }
    
    #FoodKitchen {
    background-color:#141414;
    padding: 5%;
}

#community {
     background-color: #141414;
    padding: 5%;
}

#overseas {
     background-color: #141414;
    padding: 5%;
}
    
    /* our work mobile version*/

    .OWtitle {
        background-image:url(ourworkbgcropped.png);
        height: 70vw;
    }

    /*Volunteer mobile version*/ 

.volunteer {
    background-image:url(volunteercroppedhands.png);
    height: 100%;
}
    
    
}



@media only screen and (min-width: 601px ){ 
    
    .wrapper {
        width=100%;
    }
    
    
 .OWtitle {
    background-image:url(ourworkbg.png);
    width: 100%;
    height: 100%;
    
    align-content: center;
    color: white;
    text-shadow: 2px 2px 8px #121212; 
    text-align: center;
}
}

@media only screen and (min-width: 768px ){ 
    
    .wrapper {
        width=100%;
    }
     .OWtitle {
    background-image:url(ourworkbg.png);
    width: 100%;
    height: 90vh;
    
    align-content: center;
    color: white;
    text-shadow: 2px 2px 8px #121212; 
    text-align: center;
}
@media only screen and (min-width: 992px ){ 
    
    .wrapper {
        width=100%;
    }


    }
}
@media only screen and (max-width: 1200px ){ 
    
    .wrapper {
        width=100%;

    }
}