@import url("https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Oswald:wght@200..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
/* Ubuntu */
/* Oswald */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

nav {
  height: 20%;
}

.nd1 {
  display: flex;
  justify-content: space-between;
}

.nd1 h2 {
  font-family: "Oswald", sans-serif;
  font-size: 4em;
  color: black;
  margin: 5px;
}

.nd1 button {
  width: 10%;
  margin: 5px;
  border-radius: 12px;
  background-color: rgba(135, 109, 65, 0.504);
  border-style: none;
  font-size: 15px;
}

.nd1 button a {
  color: black;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  font-family: "Ubuntu";
  margin: 5px;
}

.nd2 {
  margin: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.nd2 ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.nd2 li {
  margin: 10px;
  font-size: 18px;
  list-style: none;
}

.nd2 li a {
  color: black;
  text-decoration: none;
  font-family: "Ubuntu";
  margin: 5px;
  padding: 5px;
  font-size: 116%;
}

.nd2 li a::after {
  content: "";
  display: block;
  background-color: #349bb2;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  transition: 0.5s all ease;
  margin: auto;
  margin-top: 2px;
}

.nd2 li a:hover::after {
  display: block;
  width: 100%;
}

.nd2 p {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 160%;
  height: 20%;
  width: 30%;
  color: black;
  font-weight: 700;
  margin: 10px;
  border-radius: 12px;
  font-family: "Ubuntu";
  overflow: hidden;
  margin-top: 4%;
}

.nd1 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.nd1 a {
  text-decoration: none;
  font-weight: 40px;
  font-family: "Oswald";
  font-size: 3em;
  color: black;
  margin: 20px;
}

.nd1 button {
  width: 10%;
  margin: 20px;
  border-radius: 12px;
  background-color: #44aff2;
  border-style: none;
  font-size: 15px;
}

.nd1 button a {
  color: white;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  font-family: "Ubuntu";
  margin: 5px;
}

.nd2 {
  margin: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.nd2 ul {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

.nd2 li {
  display: flex;
  flex-direction: column;
  font-size: 18px;
  list-style: none;
  width: 15%;
  text-align: center;
}

.nd2 li a {
  width: 100%;
  color: black;
  text-decoration: none;
  font-family: "Ubuntu";
}

.dropdown-content {
  width: 15.5%;
  display: none;
  flex-direction: column;
  justify-self: flex-end;
  align-items: center;
  position: absolute;
  height: 30%;
}

.dc1 {
  border-radius: 10px;
  background-color: #33333373;
  margin-top: 19%;
  display: flex;
  flex-direction: column;
  justify-self: center;
  align-items: center;
  backdrop-filter: blur(12px);
}

.nd2 li:hover .dropdown-content {
  display: flex;
}

.logo{
  width: 19%;
  padding: 1%
}

.showPopUp p{
  
  width: 100%;
  color: black;
  text-decoration: none;
  font-family: "Robo cond";
  font-size: 150%
}



/* Section 1 =========================================================================================================================================================== */
/* Delius */
@import url("https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Delius&display=swap");

.body {
  width: 100vw;
  background-color: white;
}

.sec1 {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-image: url(../images/background.jpg);
  object-fit: fill;
  background-position: center;
  background-size: cover;
}

.s1d1 {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s1d1 p {
  font-size: 4em;
  font-family: "Oswald";
  font-weight: 700;
  /* margin-bottom: 15%; */
  width: 49%;
  text-align: center;
  background-image: linear-gradient(
    to right top,
    #9cd6ff,
    #87c9fe,
    #75bcfd,
    #65aefb,
    #5a9ff8,
    #49a2fb,
    #33a6fd,
    #00a9ff,
    #00beff,
    #00d0fe,
    #00e0f2,
    #21efe2
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.s1d1 p::after {
  content: "Scroll Down";
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 25px;
  transition: 0.5s all ease;
  margin: auto;
  margin-top: 2px;
  font-size: 20px;
  color: black;
  letter-spacing: 3px;
  background-image: linear-gradient(
    to left,
    #051937,
    #042047,
    #042758,
    #042f69,
    #08367b
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* section2 ========================================================================================================================== */

.sec2 {
  background-color: #8db1cc;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.s2d1 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 65%;
}

.slideshow-container {
  width: 40%;
  display: flex;
  justify-content: center;
  scroll-behavior: smooth;
  overflow-x: scroll;
  white-space: nowrap;
  scrollbar-width: thin;
}

.slideshow-container::-webkit-scrollbar {
  height: 6px;
}

.slideshow-container::-webkit-scrollbar-thumb {
  background-color: #8888882f;
}

.slideshow {
  animation: scroll 10s linear infinite;
  display: flex;
  align-items: center;
}

@keyframes scroll {
  0%,
  14.28% {
    transform: translateX(0); /* Show the first image */
  }
  20%,
  34.28% {
    transform: translateX(-100%); /* Scroll to the second image */
  }
  40%,
  54.28% {
    transform: translateX(-200%); /* Scroll to the third image */
  }
  60%,
  74.28% {
    transform: translateX(-300%); /* Scroll to the fourth image */
  }
  80%,
  94.28% {
    transform: translateX(-400%); /* Scroll to the fifth image */
  }
  100% {
    transform: translateX(0); /* Loop back to the first image */
  }
}

.slideshow img {
  width: 100%;
}

.s2d1 h2 {
  width: 30%;
  font-size: 60px;
  display: flex;
  flex-direction: column;
  font-family: "Ubuntu";
  background-image: linear-gradient(
    to left bottom,
    #476c87,
    #40839f,
    #349bb2,
    #2ab3bf,
    #34cbc6
  );
  padding: 10px;
  font-weight: 500;
}

.s2d1 span::before {
  content: "";
  display: block;
  background-color: black;
  height: 2px;
  width: 28%;
  position: absolute;
  margin: 5px;
}

.s2d1 h2 span {
  font-size: 40px;
  font-weight: 500;
  font-family: "Arima";
}

.sec2 p {
  font-size: 1.5em;
  height: 30%;
  font-size: 24px;
  overflow: hidden;
  text-align: center;
  margin-inline: 10%;
  font-family: "Oswald";
  margin-bottom: 30px;
  font-weight: 300;
  letter-spacing: .5px;
}

/* section3 ========================================================================================================================== */

.sec3 {
  background-color: #8db1cc;
  height: 100vh;
}

.s3d1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 12%;
  background-color: #3333331e;
}

.s3d2d1 h2 {
  font-size: 36px;
  font-family: "Oswald";
  font-weight: 700;
  margin-left: 5%;
  letter-spacing: 2px;
}

.s3d1 h3 {
  font-size: 36px;
  font-family: "Ubuntu";
  font-weight: 700;
  margin-left: 5%;
}

.s3d1 p {
  font-size: 1.5em;
  font-family: "Oswald";
  margin-right: 5%;
}

.s3d2 {
  height: 88%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.s3d2d1 {
  max-width: 26%;
  max-height: 90%;
  min-height: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: #8888884a;
  border-radius: 12px;
  transition: 500ms ease-in-out;
}

.s3d2d1:hover {
  background-color: #88888883;
  box-shadow: 0px 2px 33px 1px #595959;
}

.s3d2d1d1 {
  min-width: 99%;
  min-height: 70%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.s3d2d1d1 img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 90%;
  margin: 12px;
  border-radius: 12px;
}

.s3d2d1d1 a {
  border: 1px solid #e0cc95;
  padding: 12px;
  text-decoration: none;
  color: #333;
  font-size: 20px;
  font-family: "Ubuntu";
  font-weight: 20px;
  background-color: rgb(207, 207, 207);
  border-radius: 12px;
  transition: 500ms ease;
}

.s3d2d1d1 a:hover {
  background-color: rgb(163, 163, 163);
  color: #474747;
}

.s3d2d1 p {
  text-align: center;
  font-size: 120%;
  font-family: "Oswald";
  padding: 8px;
  min-height: 185px;
  overflow: hidden;
  font-size: 2;
}

/*section4 ======================================================================================================================*/

.sec4 {
  background-color: #8db1cc;
  height: 41vh;
  border-top: 4px solid black;
  border-top-style: dashed;
}

.s4d2 {
  height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.s4d2d1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  gap: 3%;
}

.s4d2d1 img {
  width: 8%;
}

.s4d1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10vh;
  background-color: rgb(243, 243, 243);
}

.s4d2 h2 {
  font-size: 50px;
  font-family: "Oswald";
  font-weight: 700;
  margin-left: 5%;
  letter-spacing: 2px;
}

.s4d1 input[type="email"],
input[type="button"] {
  border: 1px solid #5f5f5fe9;
  width: 20%;
  height: 65%;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  outline: none;
}

.s4d1 input[type="button"] {
  width: 12%;
  text-align: center;
  background-color: #40839f;
  color: white;
  font-family: "Oswald";
  font-size: 20px;
  letter-spacing: 1px;
  transition: 500ms ease-in-out;
}

.s4d1 input[type="button"]:hover {
  letter-spacing: 4px;
  box-shadow: 0px 1px 45px 1px #595959;
}

.s4d1 input[type="email"] {
  color: black;
  background-color: #40839f44;
}

.s4d1 p {
  font-size: 23px;
  margin-right: 5%;
  font-family: "Ubuntu";
  font-weight: 400;
}

/*Footer ======================================================================================================================*/

footer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 100vw;
  background-color: #567792;
  height: 15vh;
}

.fd1 {
  margin-top: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 15%;
}

footer img {
  width: 35px;
}

footer ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 25%;
  margin-bottom: 10px;
}

footer ul li {
  list-style: none;
}

footer ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #333;
  font-family: "Oswald";
}

/* Climate Change ======================================================================================================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Delius&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
/* Roboto Condensed */

.ccSec1 {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgb(237, 237, 237);
}

.ccSec1d1 {
  height: 85%;
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ccSec1d1d1 {
  border: 1px solid #40839f8d;
  background-color: #40839f38;
  border-radius: 12px;
  margin: 10px;
  width: 15%;
  height: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  font-family: "Roboto Condensed";
}

.ccSec1d1d1 h2 {
  font-size: 15px;
  color: #306277;
  margin: 10px;
}

.ccSec1d1d1 p {
  display: flex;
  flex-direction: column;
  font-size: 290%;
  color: #18333e;
  margin: 15px;
  font-weight: 900;
  width: 85%;
  text-align: center;
}

.ccSec1d1d1 p span {
  font-size: 30px;
  width: 100%;
  color: rgba(158, 17, 17, 0.658);
}

.ccSec1d1d2 {
  width: 56%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
}

.ccSec1d1d2d1 p span {
  font-size: 45px;
  font-family: "Oswald";
  letter-spacing: 2px;
  margin: 0% 2%;
  color: #333;
  font-style: italic;
  text-align: center;
  line-height: 95%;
}

.ccSec1d1d3 {
  width: 20%;
  height: 88%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: url(../images/Climatechange/banner\ nect\ to\ paragraph.jpg);
  object-fit: cover;
  background-position: center;
  background-size: cover;
}

.ccSec1d1d3 h4 {
  color: rgb(226, 226, 226);
  margin: 7% 2%;
  padding: 1%;
  font-family: "Roboto Condensed";
  font-size: 110%;
}

.ccSec1d1d3 h4 span {
  font-size: 75%;
  letter-spacing: 1px;
  font-family: "Ubuntu";
  font-weight: 400;
}

.ccSec1d1d3 p {
  font-size: 73%;
  color: rgb(226, 226, 226);
  font-family: "Ubuntu";
  margin: 4%;
  padding: 3%;
  letter-spacing: 1px;
}

.ccSec1d1d2d1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.ccSec1d1d2d1 p {
  display: flex;
  font-family: "Roboto Condensed";
  width: 90%;
  margin: 1%;
  padding: 1%;
  color: #333;
  height: 100%;
  font-weight: 400;
  line-height: 150%;
  font-size: 1rem;
}

.ccSec1d2 {
  width: 80%;
  height: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ccSec1d2d1 {
  border: 1px solid rgb(58, 58, 58);
  background-color: rgba(133, 133, 133, 0.208);
  display: flex;
  justify-content: space-evenly;
  width: 60%;
  height: 100%;
  align-items: center;
  border-radius: 12px;
}

.ccSec1d2d1 img {
  object-fit: cover;
  width: 20%;
  height: 73%;
  border-radius: 50%;
}

.ccSec1d2d1d1 {
  width: 50%;
  height: 70%;
}

.ccSec1d2d1d1 p {
  font-size: 118%;
  color: #333;
  font-family: "Roboto Condensed";
  margin: 0% 2%;
  padding: 1%;
  font-family: "Ubuntu";
}

.ccSec1d2d1d1 p span {
  font-weight: 600;
  font-family: "Roboto Condensed";
}

/* GREEN HOUSE ================================================================================================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Arima:wght@100..700&family=Delius&family=Gowun+Dodum&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");
/* Gowun Dodum
 */

.ghsec1 {
  background-color: rgb(243, 243, 243);
}

.ghsec1d1 {
  display: flex;
  justify-content: space-evenly;
  width: 85%;
  margin: auto;
  height: 77vh;
  overflow: hidden;
}

.ghsec1d1d1 {
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
  width: 69%;
}

.ghsec1d1d1 h1 {
  font-size: 252%;
  color: #333;
  font-family: "Ubuntu";
  margin: 1%;
  text-align: center;
}

.ghsec1d1d1 p {
  font-family: "Oswald";
  font-size: 20px;
  line-height: 156%;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 1%;
}

.ghsec1d1d2 {
  border: 1px inset #5e5e5e;
  border-radius: 12px;
  background-color: #2ed58a32;

  display: flex;
  flex-direction: column;
  width: 30%;
  height: 88%;
  margin-top: 5%;
}

.ghsec1d1d2 h2 {
  font-size: 124%;
  color: #333;
  font-family: "Oswald";
  margin: 1%;
  text-align: center;
}

.ghsec1d1d2 ul {
  font-size: 96%;
  color: #333;
  font-family: "Delius";
  margin: 4%;
  padding: 1%;
  display: flex;
  flex-direction: column;
  height: 90%;
  justify-content: space-evenly;
}

.ghsec1d1d2 ul li {
  font-family: "Oswald";
  margin: 2%;
  padding: 1%;
  font-size: 112%;
  font-weight: 500;
}

.ghsec1d1d2 ul li span {
  font-weight: 600;
  font-size: 90%;
  font-family: "Arima";
  margin-top: 10px;
}

.ghsec1d1d2 ul li span::before {
  content: "";
  display: block;
  background-color: rgba(41, 41, 41, 0.562);
  height: 1px;
  margin-top: 8px;
}

/* GREEN HOUSE GASSES SECTION 2=================================================================================================================================================== */

.ghsec2 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 99vh;
  background-color: rgb(243, 243, 243);
}

.ghsec2d1 {
  display: flex;
  justify-content: space-evenly;
  height: 70%;
  width: 75%;
}

.ghsec2d1 img {
  margin: 2% 0%;
  height: 90%;
}

.ghsec2d1d1 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 30%;
}

.ghsec2d1d1d1 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: fit-content;
  border-bottom: 2px solid #2ed58a;
  background-color: #2ed58a39;
}

.ghsec2d1d1d1 h4 {
  font-family: "Oswald";
  word-spacing: 0%;
  font-size: 1.3em;
  color: #333;
  width: 100%;
  text-align: center;
  background-color: #2ed58a;
}

.ghsec2d1d1d1 ul {
  list-style: none;
  padding: 1%;
  width: 100%;
}

.ghsec2d1d1d1 ul li {
  margin: 2%;
  font-family: "Arima";
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.ghsec2 p {
  font-family: "oswald";
  font-weight: 300;
  width: 70%;
  margin-top: 1%;
  padding: 1%;
  word-break: keep-all;
  font-size: larger;
  color: #333;
  line-height: 1.8;
  letter-spacing: 1px;
  
}

/* Negative Impact=============================================================================================================================== */

.nisec1 {
  height: 98vh;
  width: 100vw;
}

.sec1vid {
  z-index: -1;
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
}

/* Negative Impact Sec2 ========================================================================================================================== */

.niSec2d1 {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 75%;
  width: 95%;
  margin: 10px;
}

.niSec2d1d1 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 95%;
  width: 40%;
  background-color: rgb(255 255 255 / 82%);
  border-radius: 12px;
}

.sec2vid {
  margin: 2%;
  width: 90%;
  height: 70%;
  aspect-ratio: 1/1;
}

.niSec2d1d1d1 h2 {
  font-family: "Oswald";
  font-size: 1.5em;
  color: #333;
  width: 100%;
  padding: 5px;
}

.niSec2d1d1d1 p {
  font-family: "Oswald";
  font-size: 1.2em;
  color: #333;
  width: 100%;
  padding: 5px;
}

.niSec2d1d1d1 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 30%;
  width: 90%;
}

.nisec2d1d2 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  justify-content: center;
  width: 45%;
  height: 100%;
  background-color: rgb(255 255 255 / 82%);
  border-radius: 12px;
}

.nisec2d1d2 ul {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 95%;
  justify-content: space-evenly;
  align-items: center;
}

.nisec2d1d2 h2 {
  font-family: "Ubuntu";
  font-size: 1.5em;
  color: #333;
  width: 100%;
  margin: 5%;
  text-align: center;
}

.nisec2d1d2 ul li {
  font-family: "Arima";
  font-size: 1rem;
  color: black;
  width: 95%;
}

/* Manufacturing Page =================================================================================================================================================================== */

.manDiv1 {
  margin-top: 8%;
  height: 50%;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.7),
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.7)
    ),
    url("../images/NegativeImpact/banner.jpg");
  background-position: center;
  background-size: cover;
  object-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: left;
}

/* add a hover effect to the banner image to scale it a bit when you hover over */

.manDiv1 h1 {
  font-family: "Oswald";
  font-size: 2.5em;
  color: black;
  margin-left: 2%;
  width: 37%;
}

.Mansec2 {
  height: 50vh;
}

.manSec3 {
  height: 50vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.manSec3d1 {
  width: 50%;
  height: 80%;
  font-size: 124%;
  font-family: "Roboto Condensed";
  line-height: 1.4;
  word-spacing: 3px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.manSec3 img {
  width: 37%;
}


/* manSec1   Manufacturing page Section 1 MAIN BIG ONE  =========================================================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Public+Sans:ital,wght@0,100..900;1,100..900&display=swap");

/* Public Sans
 */

.manSec1 {
  display: flex;
  justify-content: space-evenly;
  height: 99vh;
}

.manSec1d1,
.manSec1d3 {
  min-width: 22%;
  max-width: 22%;
}

.manSec1d1 h2,
.manSec1d3 h2 {
  font-family: "Oswald";
  padding: 1%;
  margin: 2%;
  font-size: 15px;
  background-color: #e0cc95;
  color: #705c27;
  width: 30%;
  text-align: center;
  border-radius: 5px;
  letter-spacing: 1px;
}

.manSec1d1,
.manSec1d3 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.manSec1d1d1,
.manSec1d3d1 {
  display: flex;
  flex-direction: column;
}

.manSec1d1d1::after,
.manSec1d3d1::after {
  content: "";
  display: block;
  align-self: center;
  width: 90%;
  height: 1px;
  background-color: #e0b94e;
}

.manSec1d1d1 h3,
.manSec1d3d1 h3 {
  font-family: "Roboto Condensed";
  padding: 2%;
  margin: 1%;
}

.manSec1d1d1 h3,
.manSec1d3d1 h3,
.manSec1d2d1 h3 {
  font-family: "Oswald";
  padding: 2%;
  margin: 1%;
  color: #907019;
  border-radius: 5px;
  letter-spacing: 1px;
  font-size: 18px;
  font-weight: 500;
}

.manSec1d2d1 h3{
  margin: 0;
  padding: 0;
  padding-inline: 2%;
}

.manSec1d1d1 p,
.manSec1d3d1 p {
  font-family: "Roboto Condensed";
  padding: 2%;
  margin: 1%;
  font-weight: 600;
  font-size: 135%;
  color: #353535;
  line-height: 139%;
}

.manSec1d1d1 p span,
.manSec1d3d1 p span,
.manSec1d2d1 p span {
  font-size: 57%;
  color: #676767;
  letter-spacing: 1px;
  padding: 2%;
}

.manSec1d2d1 p span {
  font-size: 70%;
  padding: 0%;
}

.manSec1d1d1 img {
  width: 94%;
  margin: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 5px;
}

.manSec1d2 {
  width: 120%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.manSec1d2d1 h2 {
  width: 90%;
  padding-inline: 1%;
  font-family: "Oswald";
  font-size: 200%;
  color: #333;
  letter-spacing: 1px;
  font-weight: 400;
}

.manSec1d2d1 p{
  width: 90%;
  padding: 1%;
  font-family: "Roboto Condensed";
  font-size: 100%;
  color: #333;
  line-height: 1.5;
}

.manSec1d2 img {
  width: 95%;
  height: 55%;
  object-fit: cover;
  margin: 1%;
  border-radius: 5px;
}

/* Use of electracity ======================================================================================================================================================================================================= */
 

.uoeDiv1 {
  margin-top: 8%;
  height: 50%;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.7),
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.7)
    ),
    url("../images/NegativeImpact/uoe2.jpg");
  background-position: center;
  background-size: cover;
  object-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: left;
}

.uoeDiv1 h1{
    font-family: "Oswald";
    font-size: 2.5em;
    color: black;
    margin-left: 2%;
    width: 37%;
}

/* SERVER FARMS
======================================================================================================================================================================================================= */

.sfDiv1 {
  margin-top: 8%;
  height: 50%;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 5.7),
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0) 70%,
      rgba(0, 0, 0, 0.7)
    ),
    url("../images/NegativeImpact/sf2-min.jpg");
  background-position: center;
  background-size: cover;
  object-position: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: left;
}

.sfDiv1 h1{
    font-family: "Oswald";
    font-size: 3.5em;
    color: black;
    margin-left: 2%;
    width: 37%;
}

/* Modelling Climate Site==================================================================================================================== */

.manSec3d1 h1{
  font-family: "Oswald";
  font-size: 3.5rem;
  color: black;
  background-image: linear-gradient(to right top, #9cd6ff, #87c9fe, #75bcfd, #65aefb, #5a9ff8, #49a2fb, #33a6fd, #00a9ff, #00beff, #00d0fe, #00e0f2, #21efe2);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}


/* Popup============================================================================================================================= */

.popup {
  display: none;
  position: absolute;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 400vh;
  overflow: auto;
  background-color: rgb(52 52 52 / 67%);
  backdrop-filter: blur(8px);
}

.popup-Content{ 
  border-radius: 12px;
  background-color: #44aff273;
  margin: 16% auto;
  display: block;
  align-items: center;
  justify-self: center;
  width: 40%;
  height: 15%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.popup-Content img{
  height: 50px;
}

.pop-up-email{
  font-family: "Roboto Condensed";
  font-size: 1.5em;
  color: white;
  padding: 5px;
  border-radius: 5px;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 10px;
  height: 35%;
  align-items: center;
  width: 70%;
}

.pop-up-email input[type="text"],[type="email"]{ 
  width: 90%;
  padding: 5px;
  border: 1px solid white;
  border-radius: 5px;
  letter-spacing: 1px;
} 

.pop-up-email button{
  background-color: rgb(238, 238, 238);
  color: black;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5px 15px;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: "Ubuntu";
  transition: 0.3s ease-in-out;
}

.pop-up-email button:hover, .close-btn:hover{
  background-color: #b0b0b0;
}

.close-btn{
  width: 40%;
  height: 25px;
  border-radius: 5px;
  font-family: "Roboto condensed";
  transition: 0.3s ease-in-out;
}

.popup-Content h2{
  font-family: "Oswald";
  font-size: 2em;
  color: white;
  letter-spacing: 5px;
}

.popup-Content p{
  font-family: "Arima";
  font-size: 1.2em;
  color: white;
  letter-spacing: 1px;
}


/* Low Power Processors============================================================================================================= */