/***************************************
 Base Styles 
 ***************************************/

  /* Clear Elements */

    .group:before, .group:after {content: ""; display: table;} 
    .group:after {clear: both;}
    .group {zoom: 1;}


    /* Set up REM style */

  /*  html { font-size: 62.5%; } 
    body { font-size: 14px; font-size: 1.4rem; background: #fff;} 
    h1   { font-size: 24px; font-size: 2.4rem; } */


    /* Older browsers */
    html { font-size: 12px; background: #ffffff; scroll-behavior: smooth;}

      @media screen and (min-width: 320px){
      html { font-size: calc( 12px + (16 - 12) * (100vw - 320px) / (1200 - 320) ); }
  }

      @media screen and (min-width: 800px){
        html { font-size: 16px; }
  }

    /* Border Box */

    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

body { font-family: "Inter", sans-serif; font-optical-sizing: auto;}

/************************
 * Colors 
 * 
 * *********************/

:root {

--green:  #687753;
--dark-green: #4e593f;
--red: #834937;
--yellow: #9b852c;
--white: #ffffff;
--dark-grey: #1e1e1e;
--light-grey: #dadada;
--light-green: #b5c59e;
}





/***************************************
 Fonts 
 ***************************************/

  /* 

font-family: "Fustat", sans-serif;

  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;

light = 300
reg = 400
med = 500
semi-bold = 600
bold = 700
extra-bold = 700
black = 900

  */



h1 {font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-size: 65px; font-size: 4.0625em; line-height: 1.2; margin: 0px; color: var(--green); margin-bottom: 15px;}
h2 {font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-size: 45px; font-size: 2.8125em; line-height: 1.2; margin: 0px;  color: var(--green); margin-bottom: 15px;}
h3 {font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-size: 24px; font-size: 1.5em; line-height: 1.2; margin: 0px; color: var(--green); margin-bottom: 15px;}
h4 {font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-size: 18px; font-size: 1.125em; line-height: 1.2; margin: 0px;  color: var(--green); margin-bottom: 15px;}
h5 {font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-size: 16px; font-size: 1.0em; line-height: 1.2; margin: 0px; color: var(--green); margin-bottom: 15px;}
h6 {font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; font-size: 14px; font-size: 0.875em; line-height: 1.2; margin: 0px; color: var(--green); margin-bottom: 15px;}

p {color: var(--dark-grey);  font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-size: 16px; font-size: 1em; line-height: 1.5;font-weight: 400; font-style: normal; margin-top: 0px; margin-bottom: 15px;}
 p strong {font-weight: 600;}
a {color: var(--dark-grey);  font-family: "Fustat", sans-serif; font-optical-sizing: auto; text-decoration: none; font-style: normal; }
ul li, ol li, li {color: var(--dark-grey);  font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-style: normal; }
em {color: var(--dark-grey);  font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-style: italic; }



/***************************************
Buttons 
***************************************/
.nav-wrapper {text-align: right;}

.menu-btn {font-family: "Inter", sans-serif; transition: all 0.5s ease 0s; display: none; background: var(--green); color: var(--white); border: 0px;}
.menu-btn:hover {background: var(--purple); color: var(--white);}

.white-btn {display:  inline-block; transition: all 0.5s ease 0s; background: transparent; color: var(--white); border: 2px solid var(--white); border-radius: 30px; padding: 10px 25px; }
.white-btn:hover {background: var(--white); border: 2px solid var(--white); color: var(--green)}
.white-btn:after {font-family: 'FontAwesome'; content: "\f061"; font-size: 13px; margin-left: 10px;}


/*************************************** 
Navigation 
***************************************/

 body.pushy-open-right {overflow: hidden;}
.pushy {padding: 0px;}
.pushy-inner {width: 100%; height: 100%;}
.pushy-navigation {width: 100%; height: 100%;}
.pushy-navigation ul {display:  flex; flex-direction:  column; height: 100%; margin: 0px; padding: 0px; align-items: stretch;}
.pushy-navigation ul li {flex: 1;}
.pushy-navigation ul li a {border-bottom: 1px solid var(--white); text-transform: initial; transition: all 0.5s ease 0s; color: var(--white);font-family: "Fustat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 30px; font-size: 1.875em; line-height: 1.25; margin: 0px; display:  flex; align-items: center; justify-content: center; padding: 0px; background: var(--green); width: 100%; height: 100%; }
.pushy-navigation ul li a:hover {background: var(--dark-green);}



.pushy-link {transition: all 0.5s ease 0s; position: absolute; top: 0px; right: 0px; background: var(--white); z-index: 99999999; color: var(--black)}
.pushy-link:hover {background: var(--black-transparent); }
.pushy-link:hover a {color: var(--white)}



/*************************************** 
Header Bar 
***************************************/

.header-bar .row {display:  flex; align-items: center; text-align: center;}

.logo-wrapper a {background: #fff; display: block; padding: 20px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;}
.logo-wrapper a img {width: 220px;}
.nav-wrapper {text-align: right;}
.nav-wrapper ul {display: flex; align-items: center; justify-content: flex-end; list-style-type: none; margin: 0px; padding: 0px;}
.nav-wrapper ul li {margin: 0 10px;}
.nav-wrapper ul li:last-of-type {margin-right: 0px;}
.nav-wrapper ul li a {transition: all 0.5s ease 0s; color: var(--white); display: block; border-bottom: 1px solid transparent;}
.nav-wrapper ul li a:hover {color: var(--yellow); border-bottom: 1px solid var(--yellow);}
.nav-wrapper ul li:last-of-type a {display:  inline-block; transition: all 0.5s ease 0s; background: transparent; color: var(--white); border: 2px solid var(--white); border-radius: 30px; padding: 10px 25px; }
.nav-wrapper ul li:last-of-type a:hover {background: var(--white); border: 2px solid var(--white); color: var(--green)}
.nav-wrapper ul li:last-of-type a:after {font-family: 'FontAwesome'; content: "\f061"; font-size: 13px; margin-left: 10px;}



.social-wrapper {text-align: left;}
.social-wrapper a {transition: all 0.5s ease 0s; color: var(--white); margin-right: 10px;}
.social-wrapper a:hover {color: var(--yellow)}

/*************************************** 
Home  Page
***************************************/
.home-banner-wrapper {width: 100%; background: url("../img/tree-bg.png") var(--green); background-repeat: no-repeat; background-position: 5% bottom; background-size: contain;}
.home-banner-content {padding-top: 30px;}
.home-banner-content .row {display: flex; align-items: ;}
.home-banner-content-text {display: flex; align-items: flex-end; padding-bottom: 45px;}
.home-banner-content-text h1 {color: var(--white);} 
.home-banner-content-text h1 strong {color: var(--yellow)}
.home-banner-content-image {margin-bottom: -100px; border-bottom-left-radius: 70px; overflow: hidden; width: 100%; }
.home-banner-content-image img {width: 100%; height: 100%; object-fit: cover; object-position: center; display:  block;}


.about-wrapper {width: 100%; padding: 130px 0px 75px 0px;}
.about-wrapper .row {display:  flex; align-items: center;}
.about-text h2 {color: var(--yellow);}
.about-text p {color: var(--green); font-size: 24px; font-size: 1.5em; font-weight: 700;}

.who-are-we-for-wrapper {width: 100%; background: var(--green); padding: 100px 0px; }
.who-are-we-for-wrapper .row {display:  flex; align-items: center;}
.who-are-we-for-image-inner {width: 100%; height:  550px; border-radius: 20px; overflow: hidden;}
.who-are-we-for-image-inner img {width: 100%; height: 100%; object-fit: cover; object-position: center; display:  block;}
.who-are-we-for-text h2 {color: var(--white)}
.who-are-we-for-text h3 {color: var(--white)}
.who-are-we-for-text p {color: var(--white);}
.who-are-we-for-inner-text-box {margin-bottom: 20px;}
.who-are-we-for-inner-text-box {width: 100%; background: var(--white); border-radius: 30px; margin-top: 25px; padding: 20px;}
.who-are-we-for-inner-text-box ul {padding: 0px; list-style-type: none;}
.who-are-we-for-inner-text-box ul li {margin-bottom: 10px; padding-left: 25px; position: relative;  font-size: 20px;}
.who-are-we-for-inner-text-box ul li:before {font-family: 'FontAwesome'; content: "\f0a9"; font-size: 18px; color: var(--yellow); position: absolute; left: 0; top: 3px;}



.our-approach-wrapper {padding: 100px 0px;}
.our-approach-heading {text-align: center;}
.our-approach-heading p {font-size: 24px; font-size: 1.5em; color: var(--green); font-weight: 700;}
.our-approach-heading p strong {color: var(--yellow);}

.our-approach-output-items {margin-top: 25px; display:  flex; flex-wrap: wrap; justify-content: center;}
.our-approach-item {width: 49%; margin-right: 2%; margin-bottom: 20px; padding: 20px; border-radius: 20px; background: var(--red);}
.our-approach-item:nth-of-type(even) {margin-right: 0px;}
.our-approach-item h3 {color: var(--white)}
.our-approach-item p {color: var(--white)}


.pre-footer-wrapper {width: 100%; background: url("../img/tree-bg.png") var(--green); background-size:; background-position: center top; background-repeat: no-repeat; padding: 100px 0px; text-align: center;}
.pre-footer-wrapper h2 {color: var(--white)}






/***************************************
Inner Pages
***************************************/

.inner-banner-wrapper {width: 100%; background: url("../img/tree-bg.png") var(--green); background-repeat: no-repeat; background-position: center top;}
.inner-banner-content-text {padding: 75px 0px; text-align: center;}
.inner-banner-content-text h1 {color: var(--white)}
.inner-content-wrapper {padding: 75px 0px;}
.inner-content-wrapper h2 {color: var(--yellow); }
.inner-content-wrapper h3 {color: var(--green);
  font-size: 24px;
  font-size: 1.5em;
  font-weight: 700;}
.inner-content-wrapper ul {padding: 0px; list-style-type: none;}
.inner-content-wrapper ul li {margin-bottom: 10px; padding-left: 25px; position: relative;}
.inner-content-wrapper ul li:before {font-family: 'FontAwesome'; content: "\f0a9"; font-size: 16px; color: var(--yellow); position: absolute; left: 0; top: 3px;}

.daily-rythm li:nth-of-type(odd) {background: var(--light-grey); padding: 20px 20px 20px 45px; border-radius: 20px;}
.daily-rythm li:nth-of-type(even) {background: var(--light-green); padding: 20px 20px 20px 45px; border-radius: 20px;}
.daily-rythm li:before {font-family: 'FontAwesome'; content: "\f0a9"; font-size: 16px; color: var(--yellow); position: absolute; left: 20px !important; top: 20px !important;}

.contact-details {padding: 25px; background: var(--green)}
.contact-details h3 {color: var(--white)}
.contact-details a {color: var(--white);transition: all 0.5s ease 0s;}
.contact-details a:hover {color: var(--yellow);}
.contact-social {margin-top: 20px;}
.contact-social a {margin-right: 15px;}
.contact-social a i {color: var(--white); font-size: 20px;}



.send-wrapper {width: 100%; background: url("../img/tree-bg.png") var(--green); background-size:; background-position: center top; background-repeat: no-repeat; padding: 100px 0px;}
.send-wrapper h2 {color: var(--white)}
.send-wrapper p {color: var(--white)}



.team-member {display: flex; align-items: center; margin-bottom: 25px; background: var(--light-grey); padding: 25px; border-radius: 25px;}
.team-member-image {width: 20%; margin-right: 2%; height: 200px; border-radius: 20px; overflow: hidden;}
.team-member-image img {width: 100%; height: 100%; object-fit: cover;}
.team-member-text {width: 78%;}
.steering .team-member-text h3, .steering .team-member-text p strong {color: var(--red)}
.main .team-member-text p strong {color: var(--green)}



.contact-form {padding: 40px; background: var(--red); }
.contact-form form ul {margin: 0px; padding: 0px;}
.contact-form form ul li {margin-bottom: 20px; list-style-type: none !important; color: #fff; padding:0px;}
.contact-form form ul li:before {display: none;}
.contact-form form label {color: #fff; font-family: 'Instrument Sans', sans-serif;  font-size: 16px; font-size: 1em; line-height: 1.5;font-weight: 500; font-style: normal;}
.contact-form form input {width:  100%; padding: 15px; border-radius:  15px; border: 0px; margin-bottom: 10px;}
.contact-form form textarea {width:  100%; padding: 10px; height: 150px; border-radius:  15px; border: 0px;}

.contact-form form input[type=submit] {width:  initial; display:  inline-block; border:  0px; transition: all 0.5s ease 0s;  padding: 15px 15px; border-radius: 10px; background: var(--yellow); color: #fff;}
.contact-form form input[type=submit]:hover {background: #3d6f7f; color: #fff;}

.error {color: #fff;}

.success {color: #fff;}
/***************************************
Footer
***************************************/

.footer {width:100%; background: var(--dark-green);}
.footer-top {padding: 75px 0px;}
.footer-top h4 {color: var(--white)}
.footer-top ul {padding: 0px;}
.footer-top ul li {margin-bottom: 5px; list-style-type: none;}
.footer-top ul li a {transition: all 0.5s ease 0s; display: block; color: var(--white); }
.footer-top ul li a:hover {color: var(--yellow);}
.footer-logo img {width: 240px;}
.footer-contact a {display: inline-block; margin-bottom: 10px; color: var(--white)}
.footer-social a {margin-right:10px; margin-bottom:0px; color: var(--white)}
.footer-bottom {width:100%; padding:15px 0px; border-top: 1px solid var(--white);}
.footer-bottom p {margin-bottom:0px; color: var(--white)}
.footer-bottom p a {color: var(--white)}
.footer-credit {text-align:right;}

/***************************************
Media Queries
***************************************/



@media all and (max-width: 1100px) and (min-width: 0px) {


.three.columns.push_one.footer-logo {width:  100%; margin-left: 0px; margin-bottom: 25px;}

.three.columns.push_one.footer-contact {width: 33.33% !important; margin-left: 0px;}
.two.columns.footer-nav {width: 33.33% !important; margin-left: 0px;}
.two.columns.footer-legal {width: 33.33% !important;margin-left: 0px; }



}


@media all and (max-width: 1068px) and (min-width: 0px) {
  .home-banner-content-text h1 {font-size: 50px; font-size: 3.125em;}
}


@media all and (max-width: 1000px) and (min-width: 0px) {


.social-wrapper a {font-size:0px; }
.social-wrapper a i {font-size: 20px;}


}

@media all and (max-width: 900px) and (min-width: 0px) {

.five.columns.push_one.footer-copy {width:100%; text-align:center; margin-left: 0px; margin-bottom: 10px;}
.five.columns.footer-credit {width:100%; text-align:center; margin-left:0px;}


}


@media all and (max-width: 870px) and (min-width: 0px) {
.team-member {flex-direction: column;}
.team-member-image {width: 50%; margin-right: 2%; height: 300px; border-radius: 20px; overflow: hidden; margin-bottom: 20px;}
.team-member-text {width: 100%;}
}
@media all and (max-width: 800px) and (min-width: 0px) {

.home-banner-content .row {flex-direction: column; }
.six.columns.home-banner-content-text {width: 100%; text-align:center;}
.six.columns.home-banner-content-image-wrapper {width: 100%; }

.about-wrapper .row {flex-direction: column;}
.seven.columns.about-text {width:80%;}
.four.columns.push_one.about-images {width:80%; margin-left:0px;}

.who-are-we-for-wrapper .row {flex-direction: column-reverse;}
.five.columns.push_one.who-are-we-for-text {width: 80%; margin-left: 0px; margin-bottom: 25px;}
.six.columns.who-are-we-for-image {width: 80%; margin-bottom: 0px;}


}

@media all and (max-width: 785px) and (min-width: 0px) {

#primary {display: none;}
.nav-wrapper {text-align:right;}
.menu-btn {display: inline-block;}

.our-approach-item {width:100%; margin-right:0px;}

}

@media all and (max-width: 700px) and (min-width: 0px) {

.three.columns.push_one.footer-contact {width:100% !important; margin-bottom: 20px;}
.two.columns.footer-nav {width: 100% !important; margin-bottom: 20px;}
.two.columns.footer-legal {width:100% !important;}

}

@media all and (max-width: 650px) and (min-width: 0px) {
.logo-wrapper {flex-grow: 1; }
.logo-wrapper a img {width: 150px;}
.social-wrapper {flex-grow: 1; text-align: center;}
.nav-wrapper {flex-grow: 1; }

.team-member-image {width: 90%; margin-right: 2%; height: 300px; border-radius: 20px; overflow: hidden; margin-bottom: 20px;}

}

@media all and (max-width: 440px) and (min-width: 0px) {

.social-wrapper {display:  none;}

}