.firstPanel {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #213721;
  justify-content: space-evenly;
  padding-top: 200px;
  padding-bottom: 200px;
  margin-bottom: 0px;
}

.firstPanel img {
  margin-right: 40px;

}

.firstText {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 96px;
  color: #F1FCDC;
  margin-left: 50px;
}

.firstText b {
  color: #FBFEF7;
}

.aboutUsPanel {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 50px;
  color: #FBFEF7;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("../../assets/aboutUsPanel.png");
  overflow: visible;
  width: 100%;
  margin-top: 0px;
  background-size: cover;
  justify-content: space-between;
  padding-bottom: 20px;
}

.appearFromBelow {
  display: flex;
  animation: fromBelow ease-in 5s;
}

@keyframes fromBelow {
  0% {
    transform: translateX(100px);
  }

  100% {
    transform: translateX(0px);
  }
}

.aboutUsPanel h2 {
  font-size: 75px;
}

.aboutUsPanel p {
  margin-left: 30%;
  margin-right: 30%;
}

.aboutUsPanel button {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  color: black;
  background-color: #FBFEF7;
  border: none;
  border-radius: 9px;
  width: 247px;
  height: 84px;
  margin-left: 61px;
  margin-right: 61px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
}


.aboutUsPanel h2 {
  font-size: 75px;
}

.aboutUsPanel p {
  margin-left: 30%;
  margin-right: 30%;
}

.visionPanel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding-top: 200px;
  padding-bottom: 200px;
  margin-bottom: 0px;
}

.visionPanel center {
  font-size: 40px;
  width: 80%;
}

.visionPanel img {
  margin-right: 40px;

}


.vision {
  align-self: flex-start;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vision h2 {

  font-size: 75px;
}

.vision span {
  background-color: #E3F0AF;
}


.plant {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: #213721;
  gap: 34px;
  padding-top: 34px;
  padding-bottom: 34px;
}

.plant h2 {
  font-size: 75px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #F1FCDC;

}

#treeBar {
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
  gap: 34px;
  overflow-x: auto;
  max-width: 100%;
  padding-top: 100px;
  overscroll-behavior-x: contain;
}

#treeBar::-webkit-scrollbar {
  width: 20px;
}

.displayBar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 400px;
  width: 400px;
  height: 630px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.7);
  border-radius: 11px;
  background-color: #FCFBDD;
  padding: 0px 0px 15px 0px;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  column-gap: 2px;
  gap: 21px;
  margin-bottom: 50px;
 
  margin-left: 30px;
}

.displayBar:hover {
  animation: moveUp 0.6s ease-in-out;
  animation-fill-mode: forwards;
}
.displayBar h2 {
  font-size: 40px;
  color: black;
  margin: 0px 0px 0px 0px;
}

.viewMore {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  min-width: 400px;
  width: 400px;
  height: 630px;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.7);
  border-radius: 11px;
  background-color: #FCFBDD;
  padding: 0px 0px 15px 0px;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  column-gap: 2px;
  gap: 21px;
  margin-bottom: 50px;

}

.viewMore img {
  display: block;
  margin-right: 0;
  margin-left: 0;
  margin-top: 144px;
  margin-bottom: 89px;
  border-radius: 11px 11px 0px 0px;
}

.viewMore a {
  text-decoration: unset;
}

.viewMore h2 {
  margin-top: 0;
  margin-bottom: 144px;
  font-size: 40px;
  font-weight: 600;
  color: #3B520C;
}

.displayBar center {
  font-size: 15px;
  width: 283px;
  height: 154px;
  margin: 0px 0px 0px 0px;
}

.displayBar .displayButtons {
  display: flex;
  margin: 0px 0px 0px 0px;
}

.displayBar .displayButtons button {
  margin-right: 21px;
  margin-left: 21px;
  margin-bottom: 0px;
  width: 105px;
  height: 45px;
  background-color: #BBD28A;
  border-radius: 4px;
  cursor: pointer;
}

.carousel {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#carouselItem {
  margin-right: 100px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: bold;
  font-size: 75px;
  display: flex;
  flex-direction: column;
  align-items: first baseline;

}


#carouselItem .visibleCarouselItem p:hover::after {
  content: "";
  height: 22px;
  background-color: #BECD9D;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
  float: left;
  animation: increaseWidth 0.5s;
  animation-fill-mode: forwards;
}

#carouselItem a {
  color: black;
  text-decoration: unset;
}

#carouselItem a:hover {
  color: black;
}

@keyframes increaseWidth {

  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }

}

.carouselImages {
  display: flex;
  flex-direction: column;
}

.carousel .carouselImages img {
  transform: rotate(20deg) translateY(-300px);
  border: 10px solid #BBD28A;
  border-radius: 67px;
  z-index: -2;
}

.carousel .carouselImages .visibleCarouselImage {
  transform: rotate(0deg);
  border: 10px solid #BBD28A;
  border-radius: 67px;
  z-index: -1;
  margin-top: 144px;
}

.donateToOrg {
  display: flex;
  align-items: center;
  gap: 55px;
  background-color: #213721;
  justify-content: space-evenly;
  padding-top: 100px;
  padding-bottom: 100px;
  margin-bottom: 0px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  color: black;
}

.donateTagline {
  margin-left: 89px;
}

.donateToOrg h1 {
  font-style: regular;
  font-weight: 400;
  font-size: 85px;
  color: #FBFEF7;
}

.donateToOrg h1 font {
  font-family: "Modern Antiqua", serif;
  font-weight: 800;
  font-style: regular;
  font-size: 85px;

}


.donateToOrg h2 {
  color: #BECD9D;
  font-size: 48px;
  font-weight: 400;
}


.donationForm {
  border-radius: 5px;
  background-color: #FCFBDD;
  width: 329px;
  height: 300px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  margin-right: 89px;
  gap: 21px;
}

.donationForm form {
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: center;
  margin-top: 8px;
}

.donationForm #amount {
  border-radius: 15px;
  width: 292px;
  height: 44px;
  border: 1px solid black;
  appearance: none;
  background-color: #FCFBDD;
  -moz-appearance: none;
  -webkit-appearance: none;
}

.donationForm #terms {
  font-size: 12px;
}


.donationForm .donationButtons {
  display: flex;
  gap: 21px;
  font-size: 15px;
}

.donationForm .donationButtons button {
  width: 134px;
  height: 44px;
  background-color: #FCFBDD;
  border: 1px solid black;
  border-radius: 42px;

}

.donationForm .donationButtons button:focus {
  background-color: #BECD9D;
}

.donationForm button {
  background-color: #BECD9D;
  border: 1px solid black;
  width: 106px;
  height: 44px;
  border-radius: 15px;
}

.donationForm button:focus {
  background-color: #213721;
}

.newsletter {
  display: flex;
  gap: 233px;
  width: 100%;
  height: 433px;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  align-content: space-around;
  justify-content: center;

}

.newsletter .getInTouch {
  font-size: 70px;
  line-height: 146%;
}

.newsletter .sub h2 {
  font-size: 70px;
  line-height: 146%;

}

.newsletter .sub {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.newsletter .sub .emailInput {
  display: flex;
  align-items: center;
  justify-content: baseline;

}

.newsletter .sub .emailInput .email {
  width: 307px;
  height: 44px;
  border: 1px solid black;
  border-radius: 15px;
}


.newsletter h2 {
  font-weight: 400;
  font-size: 70px;
}

body {
  z-index: 5;
  margin: 0;
  padding: 0;
  background-color: #FBFEF7;
}