html {
  height: 100%;
  font-family: "figtree";
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  justify-content: center;
  font-family: "Figtree", sans-serif;
  background-color: rgb(237, 255, 255);
}

.header {
  background-color: #141828;
  height: 150px;
  width: 100%;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 100px;
}

.PELogo {
  width: 150px;
  margin-bottom: -10px;
}

.STILogo {
  width: 100px;
}

.toplogos {
  justify-content: center;
  align-items: center;
  padding-top: 5px;
}

.header nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 10px;
  gap: 50px;
  text-decoration: none;
}

.header nav a {
  text-decoration: none;
  color: #ffffff;
}

.header-icons {
  color: #ffffff;
  font-size: 30px;
  align-content: center;
  margin-left: 20px;
}

.header-icons:hover {
  color: #ffffff;
  font-size: 30px;
  align-content: center;
  margin-left: 20px;
  cursor: pointer;
}

.applybutton {
  background-color: #cc4a9b;
  width: 300px;
  padding: 20px;
  border-radius: 30px;
  color: #ffffff;
  font-size: 14px;
}

.buttonicons {
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 10px;
  border: 0px;
}

.applybutton:hover {
  background-color: #e175b8;
  width: 300px;
  padding: 20px;
  border-radius: 30px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
}

.hero {
  background: linear-gradient(205deg, #151929 68%, rgba(59, 191, 232, 1) 100%);
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-words {
  font-size: 60px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  width: 900px;
  margin-top: -20px;
}

.Aboutus {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-color: rgb(209, 225, 225);
}
.our-story {
  padding: 50px;
  width: 500px;
  font-size: 17px;
  line-height: 25px;
}

section div h1 {
  color: #151929;
  font-size: 30px;
}

.our-story-image {
  width: 659px;
}

.strategy {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.strat-card {
  background-color: #e5fafc;
  padding: 40px;

  width: 550px;
  font-size: 17px;
}

.our-goals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  flex: 1;
}

.our-goals i {
  font-size: 50px;
  color: #cc4a9b;
}

.goals-pic {
  background-image: url(Images/Cancer\ Team.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0px;
  height: 250px;
}

.strat-card-goals {
  flex-wrap: wrap;
  flex-direction: row;
  padding-bottom: -20px;
  padding-left: 150px;
  padding-right: 150px;
  padding-top: 70px;
  padding-bottom: 70px;
  font-size: 17px;
  color: white;
  background: linear-gradient(205deg, #151929 68%, rgba(59, 191, 232, 1) 100%);
  column-count: 2;
}

.strategy div i {
  font-size: 50px;
  color: #cc4a9b;
}

.partners {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 40px;
  gap: 120px;
  background-color: #ffffff;
  flex-wrap: wrap;
}

.real-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.partners img {
  width: 150px;
}

.end-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #ffffff;
  background-color: aqua;
  background: linear-gradient(
    205deg,
    rgba(204, 74, 155, 1) 19%,
    rgba(59, 191, 232, 1) 100%
  );
}

.join-us {
  padding: 40px;
  font-size: 30px;
  width: 400px;
}

.end-note img {
  width: 570px;
}

.footer {
  justify-content: center;
  background-color: #151929;
  display: flex;
  color: #ffffff;
  padding-bottom: 10px;
  font-weight: 200px;
}

@media (max-width: 700px) {
  .header {
    display: flex;
    gap: 70px;
  }

  .PELogo {
    width: 100px;
  }

  .STILogo {
    width: 65px;
  }

  .header nav {
    display: none;
  }

  .applybutton {
    background-color: #cc4a9b;
    width: 150px;
    padding: 10px;
    border-radius: 30px;
    color: #ffffff;
    font-size: 10px;
  }

  .applybutton:hover {
    background-color: #e175b8;
    width: 150px;
    padding: 10px;
    border-radius: 30px;
    color: #ffffff;
    font-size: 10px;
    cursor: pointer;
  }

  .strat-card-goals {
    flex-wrap: wrap;
    flex-direction: row;
    padding: 50px;
    font-size: 17px;
    text-align: justify;
    color: white;
    background: linear-gradient(
      205deg,
      #151929 68%,
      rgba(59, 191, 232, 1) 100%
    );
    column-count: 1;
  }

  .real-partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    flex-direction: column;
    gap: 20px;
  }

  .end-note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: #ffffff;
    background-color: aqua;
    background: linear-gradient(
      205deg,
      rgba(204, 74, 155, 1) 19%,
      rgba(59, 191, 232, 1) 100%
    );
    gap: -90px;
  }

  .footer {
    text-align: center;
    justify-content: center;
    background-color: #151929;
    display: flex;
    color: #ffffff;
    padding-bottom: 10px;
    font-weight: 100px;
  }

  .end-note img {
    width: 570px;
    margin-bottom: -120px;
  }
}