/* Example CSS file */
:root {
  /* green */
  --green-900: #113f39;
  --green-800: #195e56;
  --green-700: #227e72;
  --green-600: #2a9d8f;
  --green-500: #55b1a5;
  --green-400: #7fc4bc;
  --green-300: #aad8d2;
  --green-200: #d4ebe9;
  --green-100: #e9f5f3;

  /* amber */

  --amber-900: #5e3a03;
  --amber-800: #8c5605;
  --amber-700: #bb7306;
  --amber-600: #ea9008;
  --amber-500: #eea639;
  --amber-400: #f2bc6b;
  --amber-300: #f7d39c;
  --amber-200: #fbe9ce;
  --amber-100: #fdf4e6;

  /* neutral */

  --neutral-900: #1a1a1a;
  --neutral-800: #272727;
  --neutral-700: #343434;
  --neutral-600: #414141;
  --neutral-500: #676767;
  --neutral-400: #8d8d8d;
  --neutral-300: #b3b3b3;
  --neutral-200: #d9d9d9;
  --neutral-100: #ededed;

  /* mustard */

  --mustard-900: #3c3000;
  --mustard-800: #5a4800;
  --mustard-700: #786000;
  --mustard-600: #967800;
  --mustard-500: #ab930f;
  --mustard-400: #c0ae4b;
  --mustard-300: #d5c987;
  --mustard-200: #eae4c3;
  --mustard-100: #f5f2e1;

  /* white */

  --white-900: #ffffff;
  --white-800: #f2f1ee;

  /* fonts */

  --font-serif: "lora", serif;
  --font-sans: "DM Sans", sans-serif;

  --text-heading: var(--green-900);
  --text-body: var(--neutral-900);
  --text-body-light: var(--white-800);

  /* surface colors */

  --body-color: var(--white-900);
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
}

.ui-dialog {
  z-index: 30000 !important;
}

.nowrap {
  white-space: nowrap;
}

.w50 {
  width: 50%;
}

.w100 {
  width: 100%;
}

.m10 {
  margin: 10px;
}

.menu {
  display: none;
}

.d-flex {
  order: 3;
}

.menu {
  cursor: pointer;
}

.hidden {
  display: none;
}

.home svg.icon,
.contact svg.icon,
.accountability svg.icon {
  fill: #f2f1ee;
}

.onework svg.icon,
.onestory svg.icon,
.our-work svg.icon,
.impact svg.icon,
.stories svg.icon,
.media svg.icon,
.about-us svg.icon {
  fill: var(--neutral-900);
}

ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 24px;

  margin: 0 auto;
  height: 27px;

  flex: none;
  order: 1;
  flex-grow: 0;

  color: var(--white-800);
  font-family: var(--font-sans);
}

ul li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 24px;
  margin: 0 auto;
  font-family: var(--font-sans);
  font-size: 16px;
}
.home ul li a,
.accountability ul li a,
.contact ul li a {
  color: var(--text-body-light);
}
.about-us ul li a,
.one-story ul li a,
.our-work ul li a,
.impact ul li a {
  color: var(--text-body);
}

h1 {
  font-family: var(--font-serif);
  font-size: 80px;
  margin: 0;
  line-height: 80px;
  font-weight: 400;
}
h2 {
  font-family: var(--font-serif);
  font-size: 58px;
  line-height: 64px;
  margin: 0;
  font-weight: 400;
}

.video-heading h2 {
  color: var(--green-900);
  flex: none;
}

.heading-left h2 {
  color: var(--green-900);
}
.card h2 {
  color: var(--amber-600);
}

h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 44px;
}
h4 {
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 34px;
}

.vertical-card h4 {
  color: var(--green-900);
}
.ncard-content h4 {
  color: var(--green-900);
  margin: 10px 0;
}

a {
  text-decoration: none;
}
.quick-links a,
.contact-content a {
  color: var(--white-800);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}
h5 {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}
.logos h5 {
  color: var(--green-900);
  text-transform: uppercase;
  text-align: center;
}
footer h5 {
  color: var(--amber-400);
}
p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-bottom: 16px;
}

.ncard-content p {
  color: var(--neutral-900);
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
.card p {
  color: var(--neutral-900);
  text-align: center;
}

.body-bold {
  color: var(--text-body);
  font-weight: 700;
}

.body-bold-white {
  color: var(--text-body-light);
  font-weight: 700;
}

.home header {
  /* min-height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-image: url("/site/templates/images/home-cover.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.logo {
  width: 96px;
  height: 37px;
}
.logo img {
  width: 100%;
  height: 100%;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 74px;

  display: flex;
  align-items: center;
  padding: 16px 38px;

  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(2px);
  z-index: 1000;
  box-sizing: border-box;
}

.eyebrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 16px;
}

.hero-content .eyebrow {
  width: 370px;
  height: 24px;
}
.b-heading .eyebrow {
  width: 101;
  height: 9;
  color: var(--white-800);
}

.hero-content .description {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22px;
  color: var(--white-800);
}

.btn-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 16px;
}

.btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 13px 20px;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 22px;
  width: auto;
  height: 44px;
  border-radius: 64px;
}
.btn.orange {
  background: var(--amber-600);
  border-radius: 64px;
  color: var(--white-800);
}
.btn.orange:hover {
  background-color: var(--amber-800);
}
.btn.transparent {
  border: 1px solid var(--amber-500);

  color: var(--amber-500);
}

.btn.emptyb {
  width: 262px;
  height: 11px;
  color: var(--white-800);
}
.btn.white {
  border: 1px solid var(--green-900);
  color: var(--green-900);
  width: 237px;
}
.btn.green {
  border: 1px solid var(--white-800);
  color: var(--white-800);
  width: 228px;
  height: 44px;
}
.herobtn {
  width: 152px;
  height: 42px;

  flex: none;
  order: 2;
  flex-grow: 0;
}
.herocbtn {
  width: 193px;
  height: 44px;
}
.btn.emptyblack {
  width: 127px;
  height: 11px;
  color: var(--green-900);
  padding: 0;
  margin: 27px 0;
}
.contact-content .btn {
  width: 231px;
  height: 44px;
}

.add-story-btn {
  color: var(--amber-100);
  background-color: var(--text-heading);
  width: 200px;
  position: fixed;
  top: 200px;
  right: 30px;
  z-index: 9999;
  padding: 12px 20px;
}

.concern-btn {
  width: 173px !important;
}

.orange-text {
  color: var(--amber-600) !important;
}
.light-orange-text {
  color: var(--amber-500) !important;
}

input {
  border: none;
  padding: 10px;
  border-radius: 50px;
  width: 100%;
}

input:focus,
textarea:focus {
  outline: none;
}

/*------------------------------------------ home ---------------------------------------------*/

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 165px 40px;
  gap: 48px;
  isolation: isolate;
  margin-top: 53px;
  width: 825px;
  color: white;
}

.stats {
  background-color: var(--white-800);
  display: flex;
  flex-direction: column;
  padding: 80px 40px;
  gap: 48px;
}
.stats-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.stats-heading .heading-left {
  width: auto;
}

.heading-left .eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.our {
  width: 94px;
  height: 9px;
}

.wave {
  width: 24px;
  height: 24px;
}

.cards-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 32px;
  gap: 10px;

  width: 23%;
  height: 172px;

  background-color: var(--white-900);

  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.07);
  border-radius: 12px;
}

.vertical-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  gap: 8px;
  width: 100%;
  height: 242px;

  background: var(--white-900);

  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  color: var(--green-900);

  flex: 0 0 25%;
}

.born {
  background-color: var(--green-900);
  color: var(--white-800);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 80px 40px;
}
.born-container {
  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 32px;

  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
  z-index: 0;
}
.w-500 {
  width: 500px;
}
.born-text {
  width: 557px;
}
.born-title img {
  margin-left: 209px;
}

.led {
  color: var(--amber-600);
  display: flex;
  flex-direction: column;
}
.nowrap {
  white-space: nowrap;
}
.line {
  width: 200px;
}
.line img {
  width: 100%;
}
.born-photo {
  width: 551px;
}
.born-photo img {
  width: 100%;
}

/*--------- areas -----------*/

.areas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 80px 40px;
  gap: 64px;
  background-color: var(--white-800);
}

.areas-heading {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-end;
}

.areas-text {
  width: 320px;
}

.cards-section-area {
  gap: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
}

/*------------------ quote ----------------- */

.quote {
  background-color: var(--green-900);
  color: var(--white-800);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0px;
  gap: 24px;
  padding: 80px 40px;
}

.title-quote {
  display: flex;
  flex-direction: column;
  gap: 46px;
}

.picture-quote {
  width: 553px;
}
.picture-quote img {
  width: 100%;
}
.subtitle {
  display: flex;
  align-items: center;
  gap: 16px;
}
.subtitle img {
  width: 24px;
  height: 24px;
}

.logos {
  background-color: var(--mustard-200);
  display: flex;
  flex-direction: column;
  padding: 80px 40px;
  gap: 48px;
}
.cards-logos {
  display: flex;
  justify-content: space-between;
}
.cards-logos .card-logo {
  background-color: var(--white-800);
  width: 180px;
  height: 80px;
}
.field {
  background-color: var(--white-800);
}

.field .news-card {
  flex: 1 1 300px;
}

.news-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ncard-picture {
  width: 100%;
  background-color: var(--neutral-200);
}
.ncard-picture img {
  width: 100%;
}
.field-content .news-card.a .ncard-picture {
  height: 275px;
}
.field-content .news-card.b .ncard-picture {
  /* width: 437px; */
  height: 535px;
  background-color: var(--neutral-200);
}
.field-content .news-card.c .ncard-picture {
  /*  width: 437px; */
  height: 275px;
  background-color: var(--neutral-200);
}
.programme-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.programme-title p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 10px;
  margin: 0;
  height: 26px;

  background: #d4ebe9;
  border-radius: 64px;
}
.fr-sb .programme-title p {
  padding: 19px 16px;
  width: auto;
}
.field {
  display: flex;
  flex-direction: column;
  padding: 80px 40px;
  gap: 56px;
}
.field-content {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.field-content .news-card {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.field-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
}
.ncard-content {
  display: flex;
  flex-direction: column;
  align-items: end;
}

/*----- footer home ---------*/

footer {
  background-color: var(--green-900);
  color: var(--white-800);
  display: flex;
  flex-direction: column;
  padding: 100px 40px 24px;
}

.content-footer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0px;
  gap: 24px;
}

.box-column-responsive {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
}

.quick-links,
.contact-content,
.nl-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 24px;
}
footer button {
  background-color: var(--green-900);
  color: var(--amber-600);
  width: 231px !important;

  border: 2px solid var(--amber-600);
}
footer input {
  width: 231px;
  height: 44px;
  border-radius: 64px;
  padding: 10px;
}

.content-footer .a {
  width: 36%;
}

.content-footer .c,
.content-footer .d {
  width: 25%;
}

.fcard .contact-content {
  width: 100%;
}

.fcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 40px;
}
.social-media {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 16px;

  width: 176px;
  height: 32px;
}
.icon-sm {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 50%;

  border: 1px solid var(--white-800);
}
.footer-footer {
  margin-top: 100px;
}

.footer-footer > p:nth-child(1) {
  color: var(--neutral-300);
}

/*--------------------------------------------  ABOUT ---------------------------------*/

/*--------- header ------------*/
.about-us header {
  display: flex;
  flex-direction: column;
  padding: 0px 40px 100px;
  gap: 108px;
  background-color: var(--mustard-200);
}
.description-about {
  display: flex;
  justify-content: space-between;
  padding: 101px 40px;
}

.description-about .foto {
  width: 400px;
}
.description-about .foto img {
  width: 100%;
}
.description-about .text {
  display: flex;
}
.description-about .text1,
.description-about .text2 {
  width: 320px;
}
.about-header-content {
  margin-top: 119px;
}

.about-header-content .title-section-about {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-header-content .title-section-about h1 {
  text-align: center;
}

/*--------- peer ----------*/
.peer {
  padding: 80px 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: var(--amber-900);
  color: var(--white-800);
  align-items: center;
}
.title-peer {
  display: flex;
  flex-direction: column;
  width: 550px;
}

.picture-peer {
  width: 500px;
}
.picture-peer img {
  width: 100%;
}
/*-------  theory  ---------*/
.theory {
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--green-900);
}
.theory p {
  color: var(--neutral-900);
}
.header-theory {
  width: 550px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}
.picture-theory {
  width: max(calc(100% - (100vh * 0.1)), 300px);
}
.picture-theory img {
  width: 100%;
}
/*-------- years ---------*/

.years {
  padding: 120px 60px;
  background-color: var(--green-900);
  color: var(--white-800);
}

.years .heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 100px;
}

.years .title h2 {
  margin-bottom: 20px;
}

.years .title p {
  max-width: 700px;
  margin: 0 auto;
}

.years .years-content {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

.years .description {
  flex: 0 0 35%;
  position: sticky;
  top: 101px;
  margin-top: 200px;
}

.years .tl {
  display: grid;
  grid-template-columns: 80px 30px 1fr;
  gap: 20px;
  margin-bottom: 50px;
  align-items: start;
}

.years .tl .tl-left h5 {
  margin: 0;
}

.years .tl .tl-right p {
  width: 400px;
}

.years .line_vertical {
  width: 1px;
}
.years .line_vertical img {
  display: block;
  width: 100%;
  height: auto;
}

/*---------- city -----------*/

.photo-city {
  width: 100%;
}
.photo-city img {
  width: 100%;
  height: auto;
  display: block;
}

/*--------- the team ---------*/

.team {
  padding: 80px 40px;
  color: var(--green-900);
  background-color: var(--white-800);
}

.team-title {
  text-align: center;
  padding: 100px;
}

.team-members {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.team .member {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.team .name {
  text-align: center;
}

.team .avatar {
  width: 203px;
  height: 203px;
}

.team .avatar img {
  border-radius: 50%;
  width: 100%;
}

/*------------------------------------------------ STORIES --------------------------------------------------*/

.stories {
  background-color: var(--white-800);
}

.title-stories {
  padding: 200px 27px;
}

.stories ul li a,
.onestory ul li a {
  color: var(--neutral-900);
}

.bgw800 {
  background-color: var(--white-800);
}

.stories .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, 437px);
  gap: 20px;
  justify-content: center;
}

/*--------- one storie -----------*/
.onestory,
.one-story-content {
  background-color: var(--white-800);
}
.one-story-content {
  padding: 120px 16px 0 16px;
}

.title-one-story {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 16px;
  padding-bottom: 50px;
}

.one-story-content h2 {
  color: var(--text-heading);
}

.onestory nav {
  justify-content: space-between;
}


.ones-button {
  border: none;
  background-color: var(--white-800);
  display: flex;
  align-items: inherit;
  gap: 10px;
  width: 150px;
  height: 50px;
}

.ones-button:hover {
  cursor: pointer;
}

.fr-sb {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
}

.title-one-story .fr-sb .programme-title {
  gap: 20px;
}

.fr-sb button p {
  color: var(--text-heading);
}
.title-one-story a {
  width: 200px;
  color: var(--text-heading);
}
.one-storybtn {
  padding: 0 0 0 4px;
  justify-content: start;
}


.description-one-story {
  display: flex;
  flex-direction: column;
  gap: 30px;
}


.text-one-story p {
  margin-left: 13%;
  width: 48%;
}

.photo-onestory {
  aspect-ratio: 16 / 9; 
  overflow: hidden;
}


.photo-onestory img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------ share -------*/


.share {
  width: 20px;
}
.share img {
  width: 100%;
}

.share-section {
  display: flex;
  flex-direction: column;
}

#share-url {
  margin: 12px 0 20px;
  padding: 12px 16px;

  border: 1px solid #d9d9d9;
  border-radius: 8px;

  background-color: #f8f8f8;

  word-break: break-word;
}

.share-dialog {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;


  z-index: 40000;
  background-color: var(--white-900);
  box-shadow: 0px 2px 20px 0px #00000012;
  padding: 39px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;

}

.hidden-story {
  opacity: 0;


  visibility: hidden;
  pointer-events: none;
}

#close-dialog {
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
}

#close-dialog:hover {
  cursor: pointer;
}

.share-options {
  display:flex;
  gap: 10px;
}

.box-url {
  display: flex;
  align-items: center;
  gap: 10px;
}
#copy-link {
  border: none;
  width: 163px;
}

#copy-link:hover {
  cursor: pointer;
} 


/*----------- video-home -------------------*/

.video-section {
  background-color: var(--mustard-200);
  padding: 80px 40px 0px;
}

.video-heading {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.video-wrapper {
  position: relative;
  margin: 80px 80px 0px;
  padding-bottom: 60px;
}

.video-wrapper video {
  width: 100%;
  display: block;
}

.play-btn {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--white-800);
}

/*------------------------------------- Our work ----------------------------------------------*/

.our-work {
  background-color: var(--mustard-200);
  color: var(--text-heading);
}
.our-work .title-section {
  width: 900px;
}
.our-work-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 149px 0 149px 30px;
  gap: 25px;
}

.our-work-main {
  padding-left: 30px;
  display: flex;
  flex-direction: column;
}

.our-work-card {
  width: 668px;
  margin-bottom: 40px;
}
.icon-line {
  width: 668px;
  height: 1px;
  margin-bottom: 20px;
}

.our-work header h1,
.our-work header h5 {
  color: var(--text-heading);
}
.our-work-card h3,
.our-work-card p,
.our-work-card a {
  color: var(--text-heading);
}

.our-work-card p {
  margin-top: 10px;
}
.ow-btn {
  padding: 0;
  justify-content: start;
  margin-top: 16px;
}

/*----------  one work -----------------*/

.onework {
  background: var(--mustard-200);
}

.title-one-work {
  padding: 194px 91px 0px;
  display: flex;
  flex-direction: column;
  color: var(--text-heading);
}

.one-workbtn {
  width: 200px;
  justify-content: start;
  padding-left: 10px;
  color: var(--text-heading);
}
.arrow_back {
  width: 17px;
}
.arrow-btn {
  display: flex;
  align-items: center;
  width: 300px;
}

.description-one-work {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.text-one-work {
  display: flex;
  flex-direction: column;
  width: 436px;
}
.infos-one-work {
  display: flex;
  flex-direction: column;
}

.one-work-content h5 {
  color: var(--neutral-400);
}

/*-------------------------------------------- Impact ------------------------------------------*/

.impact {
  background-color: var(--mustard-200);
}

.impact-header-content {
  height: 569px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 100px;
}
.impact-header-content h1,
.impact-header-content h5 {
  color: var(--text-heading);
}

.picture-section {
  width: 100%;
}

.nepal-people-photo {
  width: auto;
}

.nepal-people-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.title-section p {
  width: 550px;
  text-align: center;
  margin: 50px auto;
  color: var(--text-body);
}
/*------ in-numbers section --------*/
.in-numbers {
  background-color: var(--green-900);
  padding-top: 100px;
  padding-left: 50px;
  height: 400vh;
}

.in-numbers h5,
.in-numbers-heading h5,
.in-numbers-heading h2 {
  color: var(--white-800);
}

.in-numbers .in-numbers-wrap p {
  color: var(--text-body-light);
}

.sticky-element {
  position: sticky;
  top: 100px;
  height: calc(100vh - 100px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  overflow: hidden;
}

.heading-left {
  width: 550px;
}

.reach,
.economic,
.people {
  position: absolute;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.visible {
  opacity: 1;
  transform: translateY(0);
}

.hidden {
  opacity: 0;
  transform: translateY(32px);
}

/* .reach {
  opacity: 1;
  transform: translateY(0);
}

.economic,
.people {
  opacity: 0;
  transform: translateY(32px);
} */

.reach h5,
.economic h5,
.people h5 {
  width: 627px;
  flex-shrink: 1;
}

.static-cards {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  padding-right: 40px;
}

.static-card {
  width: 235px;
  min-height: 180px;
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.static-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.static-card:last-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.static-card h2,
.static-card p {
  margin: 0;
  text-align: center;
}

.in-numbers-wrap {
  padding-bottom: 245px;
}

.static-card h2,
.static-card p {
  margin-left: 35px;
  margin-right: 35px;
}

/*----- beyond section -----------*/
.beyond-content {
  background-color: var(--white-800);
  padding: 80px 40px;
}

.cards-beyond {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 30px;
  background-color: var(--white-800);
}

.cards-beyond .news-card {
  flex: 0 1 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cards-beyond .news-card.a .ncard-picture,
.cards-beyond .news-card.c .ncard-picture {
  height: 240px;
}

.beyond-content .news-card.b .ncard-picture {
  height: 535px;
}

.beyond-content h2,
.beyond-content h5 {
  color: var(--text-heading);
}

.header-central {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 20px;
}

.header-central p {
  margin: 35px auto;
  width: 550px;
}

.impact-footer {
  color: var(--text-body-light);
  background: var(--green-800);
  height: auto;
  padding: 100px;
}

.vector-footer {
  width: 253px;
  height: auto;
  position: relative;
  left: 79%;
}

.vector-footer img {
  width: 100%;
}

.vector-footer p {
  position: absolute;
  top: 43px;
  left: 30px;
  width: 83%;
}

/*---------------------------------------- accountability -----------------------------------*/

.accountability header {
  background-color: var(--green-900);
  color: var(--text-body-light);
  padding: 150px 36px;
}

.accountability header .header-central h1 {
  margin-bottom: 117px;
}

.accountability header p {
  width: 24.7%;
}

.galerie-account {
  display: flex;
  width: 50%;
  justify-content: space-between;
}

.header-central {
  display: flex;
  flex-direction: column;
}

.header-account {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.photo-s {
  width: 31%;
}
.photo-s img {
  width: 100%;
}
.photo-l {
  width: 65%;
}
.photo-l img {
  width: 100%;
}

/*this is the second p of text in line-legal*/
div.line-legal:nth-child(1) > div:nth-child(2) > p:nth-child(2),
div.line-legal:nth-child(2) > div:nth-child(2) > p:nth-child(2),
div.line-legal:nth-child(3) > div:nth-child(2) > p:nth-child(2) {
  line-height: 7px;
  margin-bottom: 23px;
}

/*-------second section legal-----------*/

.legal {
  display: flex;
  flex-direction: row;
  gap: 15%;
  padding: 100px 36px;
  background-color: var(--white-800);
}

.legal h4,
.legal h3 {
  color: var(--text-heading);
}

.legal h3 {
  height: 69px;
}

.legal h4 {
  margin-bottom: 24px;
}

.line-legal {
  display: flex;
}

.line-legal .icon {
  width: 29px;
}
.line-legal .icon img {
  width: 100%;
}
.line-legal .text p {
  color: var(--text-body);
}

.horizontal-cards {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: flex-start;
  padding: 0px;
  gap: 10px;
}

.executive {
  margin-top: 35px;
}

.legal .horizontal-card {
  width: 228px;
  padding: 25px 23px 14px;
}

.legal .horizontal-card p {
  line-height: 4px;
}

.legal .horizontal-card .small {
  line-height: 4px;
}

.horizontal-card {
  display: flex;
  background-color: var(--white-900);
  align-items: center;
  padding: 10px 23px;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: nowrap;

  box-shadow: 0px 2px 20px 0px #00000012;
  border-radius: 12px;

  height: 80px;
  box-sizing: border-box;
}

.horizontal-card .icon {
  width: 40px;
}

.horizontal-card .icon img {
  width: 100%;
}

.column-right,
.column-left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.horizontal-cards .small {
  color: var(--neutral-400);
}

/*---- financial ----*/

.financial {
  background-color: var(--green-900);
  color: var(--text-body-light);
  display: flex;
  flex-direction: column;

  align-items: flex-start;
  padding: 80px 40px;
  gap: 100px;
}

.header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 48px;

  width: 550px; /*38% of 1440px*/
  margin-bottom: 100px;
}

.financial-content {
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.financial-content .small {
  color: var(--neutral-400);
}

.financial .column-left,
.financial .column-right {
  /* Container */

  /* Auto layout */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 24px;

  width: 437px;
  height: 377px;
}

.horizontal-card .icon.pdf {
  width: 48px;
}
.horizontal-card .icon.pdf img {
  width: 100%;
}
.horizontal-card .icon.download {
  width: 24px;
}
.horizontal-card .icon.download img {
  width: 100%;
}

/*------ policies  ---------*/

.policies {
  background: var(--mustard-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 40px;
  gap: 64px;
}

.policies h2 {
  color: var(--text-heading);
}

.policies .header-central p {
  color: var(--text-body);
}

.policies h4 {
  color: var(--text-heading);
  font-weight: 600;
}

.content-policies {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 80px 40px;
  gap: 30px;

  width: 100%;
  align-items: flex-end;
  justify-content: end;
}

.horizontal-card {
  display: flex;
  width: 437px;
}

.card-left {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.text-card {
  display: flex;
  flex-direction: column;
}
.text-card .small {
  color: var(--neutral-400);
  line-height: 4px;
}

/*---- concern ----*/

.concern {
  background: var(--amber-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 40px;
  gap: 32px;
}

.concern .header-central h2,
.concern .header-central p {
  color: var(--text-body-light);
}

/*------------------------------ contact ------------------------------------*/

.contact {
  background-color: var(--green-900);
}

.contact header {
  background-color: var(--green-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 200px 40px 80px;
  gap: 48px;
  color: var(--text-body-light);
}

.content-contact {
  width: 100%;
  padding: 100px;
}

.contact header .header-central p {
  width: 76%;
}

.contact-icons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.icon-container {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.icon-container p {
  color: var(--text-body-light);
  font-family: var(--font-sans);
}

.icon-container a {
  color: var(--text-body-light);
  font-family: var(--font-sans);
}

.divider {
  width: 100%;
  margin-bottom: 52px;
}
.divider img {
  width: 100%;
  height: 1px;
}

/*---- form ------*/

.required {
  display: flex;
  justify-content: space-between;
  width: 100%;
  justify-content: space-between;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
}

.required button {
  border: none;
}

.contact-form {
  display: flex;
  justify-content: center;
}

form {
  width: 50%;
  display: flex;
  flex-direction: column;
}

.row-form {
  display: flex;
  justify-content: center;
}

.contact-form label {
  display: flex;
  align-items: flex-start;
}

.contact-form input,
textarea {
  background-color: var(--green-800);
  color: var(--neutral-300);
  border: none;
}

textarea {
  padding: 10px 32px 64px 10px;
  border-radius: 10px;
}

.row-form button {
  width: 25%;
}

.required p {
  color: var(--text-body-light);
}

.icon-error img {
  padding-bottom: 7px;
  padding-right: 1px;
}

/*---------------------------       responsive    ---------------------------*/

@media (max-width: 1400px) {
  form {
    width: 70%;
  }
}

@media (max-width: 1314px) {
  /*---- home ------*/
  .vertical-card {
    padding: 9px;
    gap: 5px;
    height: auto;
  }

  /*---- contact -------*/

  form {
    width: 70%;
  }
}

@media (max-width: 1222px) {
  /* ------- about -------*/

  .description-about {
    padding: 74px 0px;
  }

  /*------ footer ------*/
  .contact-content .btn {
    width: 210px;
    padding: 13px 10px;
  }

  .content-footer {
    gap: 4px;
  }

  footer button {
    width: 210px !important;
  }
  footer input {
    width: 210px !important;
  }
}

@media (max-width: 1172px) {
  /*---- stats cards  home ------*/

  .cards-section {
    gap: 18px;
  }

  .card {
    padding: 29px 12px;
  }
}

@media (max-width: 1151px) {
  /*----- impact -----*/

  .reach, .economic, .people {
    display: flex;
    flex-direction: column;
   
  }
  .reach h5, .economic h5, .people h5 {
    width: auto;
    margin-bottom: 22px;
  }
}

@media (max-width: 1138px) {
  /*----- about --------*/
  .description-about .foto {
    width: 45%;
  }

  .description-about .text {
    flex-direction: column;
    align-items: center;
  }
  .description-about .text {
    width: 50%;
  }
  .description-about .text1,
  .description-about .text2 {
    width: 100%;
  }

  .peer {
    padding: 80px 32px;
    align-items: flex-start;
  }
  .heading-peer {
    width: 50%;
  }

  .title-peer {
    width: 100%;
  }

  .picture-peer {
    width: 45%;
  }
}

@media (max-width: 1019px) {
  /*---- about --------*/

  .years .tl {
    gap: 0;
    grid-template-columns: 55px 22px 1fr;
    gap: 8px;
  }
  .years .tl .tl-right p {
    width: 350px;
  }

  /*----- nav ----------*/

  nav {
    padding: 14px 10px;
  }

  nav ul {
    gap: 14px;
  }

  /*------- contact -------*/

  form {
    width: 100%;
  }

  .required button {
    width: 50%;
  }
}

@media (max-width: 997px) {

  /*---- impact -----*/
  .static-card {
    width: 200px;
  }
}

@media (max-width: 974px) {
  /*----- accountability ------*/

  .legal {
    flex-direction: column;
  }

  .legal .container-right {
    margin-left: calc(50% - (974px - 100vw) * 0.4);
  }

  .policies {
    padding: 20px 10px;
  }

  .content-policies {
    padding: 20px 1px;
    justify-content: start;
    gap: 17px;
  }

  .content-policies .horizontal-card {
    width: 270px;
    padding: 9px 19px 0px 7px;
    gap: 20px;
  }

  .header-central p {
    margin: 0 auto;
    width: auto;
  }

  /*------ born home --------*/
  .born-container {
    width: 45%;
  }
  .born-text {
    width: 100%;
  }

  .born-photo {
    width: 45%;
  }

  /*----- video home ----------*/
  .video-section {
    padding: 10px;
  }

  .video-wrapper {
    padding: 0;
    margin: 20px;
  }

  .play-btn {
    transform: translate(-50%, -45%);
    font-size: 2rem;
  }

  /*----- accountability ---------*/

  .financial {
    padding: 20px;
  }

  .financial-content {
    gap: 10px;
  }

  .financial-content .horizontal-card {
    width: 250px;
    padding: 12px 9px 0px 9px;
  }

  .financial .column-left,
  .financial .column-right {
    width: 100%;
  }

  /*----- content contact -------*/

  .contact header {
    padding: 200px 20px 40px;
  }

  .content-contact {
    padding: 100px 50px;
  }
}

@media (max-width: 900px) {
  h1 {
    font-size: 64px;
    line-height: 80px;
  }

  h2 {
    font-size: 48px;
    line-height: 52px;
  }

  h3 {
    font-size: 30px;
    line-height: 42px;
  }

  h4 {
    font-size: 22px;
    line-height: 30px;
  }

  /*-------- nav ------*/

  .herobtn {
    margin-left: 500px;
  }

  nav {
    justify-content: space-between;
  }

  ul {
    padding-left: 25px;
    gap: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
    gap: 2rem;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    z-index: 10000;
  }

  .home ul,
  .accountability ul,
  .contact ul {
    background-color: var(--green-900);
    color: var(--text-body-light);
  }

  .our-work ul,
  .impact ul,
  .stories ul,
  .media ul,
  .about-us {
    background-color: var(--white-800);
    color: var(--text-heading);
  }

  ul.active {
    transform: translateY(0);
  }

  .menu {
    order: 3;
    display: block;
    z-index: 40000000;
  }

  .d-flex {
    order: 3;
    display: flex;
    gap: 20px;
    align-items: center;
  }

  /*---- home ------*/
  .w-500 {
    width: 100%;
  }
  .stats,
  .born {
    padding: 80px 17px;
  }

  .stats-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .born-title img {
    margin-left: 146px;
  }

  .cards-section-area {
    grid-template-columns: repeat(2, 1fr);
  }

  .areas-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .areas-text {
    width: 80%;
  }

  .field-content .news-card.b .ncard-picture, .field-content .news-card.a .ncard-picture, .field-content .news-card.c .ncard-picture {
    height: 300px;
  }

  .quote {
    padding: 60px 16px;
  }

  .picture-quote {
    width: 40%;
  }

  .title-quote {
    width: 50%;
 /*    justify-content: space-between; */
    height: 550px;
  }

  .cards-logos {
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
  }

  /*----- footer ----*/

  .content-footer {
    flex-direction: column;
  }

  .box-column-responsive {
    justify-content: space-between;
    margin-top: 52px;
  }

  .content-footer .a {
    width: auto;
    margin-right: 30%;
  }

  .content-footer .b,
  .content-footer .c,
  .content-footer .d {
    width: auto;
    margin: 0 10px;
  }

  .content-footer .b {
    margin-right: 100px;
  }

  /*----- accountability ------*/

  .header-account {
    flex-direction: column;
  }

  .accountability header p {
    width: clamp(50%, calc(50% + (900px - 100vw) * 2), 100%);
    margin-bottom: 46px;
  }

  .galerie-account {
    width: 100%;
    justify-content: end;
    gap: 20px;
  }

  .photo-s,
  .photo-l {
    flex-shrink: 0;
  }

  .photo-s {
    width: 213px;
  }

  .photo-l {
    width: 385px;
  }
}
@media (max-width: 862px) {

  .static-card {
    width: 196px;
  }

}

@media (max-width: 834px) {
  /*------ footer ----*/
  .field-header {
    flex-direction: column;
    align-items: start;
    gap: 44px;
  }

  .field-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .field-content {
    flex-wrap: wrap;
  }

  /*----- accountability -------*/
  .legal {
    flex-direction: column;
    padding: 50px 20px;
  }

  .legal .container-right {
    margin-left: calc(35% - (834px - 100vw) * 0.4);
    margin-top: 47px;
  }

  .legal .container-right h3 {
    display: flex;
    justify-content: end;
    padding-right: 20px;
  }
  /*------ our work ------*/
  .our-work .title-section {
    width: auto;
  }

  .our-work-main {
    padding: 20px;
  }
  .icon-line {
    width: auto;
  }
  .our-work-card {
    width: auto;
  }

  /*---- impact ----*/
  .static-card {
    width: 170px;
  }

  /*----- nav -----*/

  .herobtn {
    margin-left: 450px;
  }

  /*---- one story ----- */

  .share-dialog {
    padding: 32px;
  }
}

@media (max-width: 770px) {
  /*-----  home ---------*/
.hero-content {
  padding: 40px 20px;
  width: auto;
}
  .hero-content .btn-section {
    flex-direction: column;
  }
  
  .card {
    padding: 25px 4px;
    gap: 2px;
  }

  /*------- contact icons -------*/
  .contact-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /*----- impact -----*/

  .static-card {
    width: 155px;
  }

    /*----- nav -----*/

    .herobtn {
      margin-left: 350px;
    }

    /*----- one story ----*/

    .share-dialog {
      padding: 32px 10px;
    }


}

@media (max-width: 710px) {

    /*---- footer -----*/

    .content-footer .b {
      margin-right: 22px;
    }
  /*------- cards home ---------*/

  .cards-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

  }



  .in-numbers {
    padding-left: 10px;
    padding-top: 10px;
  }

  .heading-left {
    width: auto;
  }
  .static-cards {
    gap: 20px;
  }

 

  .visible {
    transform: translateY(-161px);
  }

  .card {
    width: 100%;
    height: 172px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  /* ------ footer -----*/
  .b {
    margin-right: 50px;
  }

  /*----- about us ---------*/
  .team-members {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 696px) {

  /*---- impact -----*/
  .static-card {
    width: 138px;
  }
}

@media (max-width: 682px) {
  .galerie-account {
    justify-content: center;
  }
  .galerie-account .photo-s {
    display: none;
  }
  .galerie-account .photo-l {
    width: 100%;
  }

 

}



@media (max-width: 648px) {
  /*---------- home  ----------*/
  .born-photo {
    width: 39%;
  }

  .quote {
    flex-direction: column;
  }
  .title-quote {
    width: auto;
    height: auto;
    }
  .picture-quote {
    width: auto;
  }
  
  /*--- footer ----*/
  footer {
    padding: 100px 19px 24px;
  }
  .content-footer .b, .content-footer .c, .content-footer .d {
    margin: 0 5px;
  }

  /*----- impact -------*/
     /*----- impact ----*/
     .static-cards {
      display: grid;
    grid-template-columns: repeat(2,1fr);
  }

  .static-card {
    width: auto;
  }

  

  .static-card:nth-child(2)::after{
    content: "";
  position: absolute;
  right: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  }

  /*------ nav ------*/
  .herobtn {
    margin-left: 250px;
  }
 }

@media (max-width: 566px) {

  .header-left {
    width: auto;
  }
  .cards-logos .card-logo {
    width:100px;
  }

  .box-column-responsive {
    flex-direction: column;
    gap: 50px;
  }

  .content-footer .a {
     margin-right: 0;
  }
  /*----- accountability -------*/

  .members,
  .executive {
    width: 100%;
  }

  .content-policies,
  .financial-content,
  .container-right,
  .members .horizontal-cards,
  .executive .horizontal-cards {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0;
    width: 100%;
  }

  .horizontal-cards {
    gap: 24px;
  }

  .horizontal-cards .column-left .horizontal-card,
  .horizontal-cards .column-right .horizontal-card {
    justify-content: start;
  }

  .content-policies .column-right,
  .content-policies .column-left,
  .horizontal-cards .column-left,
  .horizontal-cards .column-right {
    width: 100%;
  }

  .column-left .horizontal-card,
  .column-right .horizontal-card {
    width: 100%;
  }

  .policies,
  .financial,
  .legal {
    padding: 40px 10px;
  }

  .legal .container-right {
    margin-left: 0;
  }
/*------ nav ------*/
.herobtn {
  margin-left: 155px;
}
   
}

@media (max-width: 486px) {
  h1 {
    font-size: 44px;
  }

  h2 {
    font-size: 36px;
  }

  h3 {
    font-size: 28px;
  }

  h4 {
    font-size: 22px;
  }

  h5 {
    font-size: 14px;
  }

  .contact-form {
    padding: 0 0 30px 0;
    justify-content: start;
  }

  form {
    width: 90%;
  }

  .row-form,
  .required {
    flex-direction: column;
  }

  .w50,
  .required button {
    width: 100%;
  }

  .content-contact {
    padding: 0 10px;
  }

  .icon-container {
    gap: 7px;
  }
  /*----- contact ---------*/

  .contact header {
    padding: 97px 20px;
  }

  /*---- home ----*/
  .cards-section .card {
    height: 122px;
  }

  .cards-section {
    gap: 10px;
  }

  .area {
    padding: 80px 20px;
  }
   .cards-section-area {
    display: flex;
    flex-direction: column;
  }
  .areas-text {
    width: auto;
  }

  /*----- stories ------*/
  .stories .container {
    grid-template-columns: repeat(auto-fit, 300px);
  }

  .photo-onestory {
    aspect-ratio: 4 / 5;
  }

  .ones-button {
    width: 120px;
  }

  .title-one-story .fr-sb .programme-title {
    gap: 13px;
  }

  #share-dialog {
    display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 50px;
}
.box-url {
  display: flex;
  flex-direction: column;
}

  /*------ nav ------*/
.herobtn {
  margin-left: 10px;
}

}


@media (max-width: 344px) {
  /*------ nav ------*/
  .herobtn {
    margin-left: 4px;
  }
/*----- story ------*/
  .title-one-story .fr-sb .programme-title {
    gap: 5px;
  }

  .programme-title {
    justify-content: start;
  }

}