:root {
  --bottle: #004643;
  --sage: #ccdad9;
  --salmon: #fb6d69;
  --gum: #fd9996;
  --truewhite: #ffffff;
  --textblack: #101010;
}

article img:hover {
  transform: scale(1.5);
  transition: transform 0.3s ease-in-out;
}

/*GENERAL*/
h2 {
  margin-bottom: 20px;
}

h3 {
  margin-top: 0;
}

h4 {
  color: var(--bottle);
}

#Figma a {
  text-decoration: none;
}

article a {
  color: var(--bottle);
}

li {
  margin-bottom: 10px;
}

/*Side navigation*/

.sideNav {
  position: fixed;
  z-index: 1;
  right: 0;
  overflow-x: hidden;
  /*change position*/
  transition: top 0.5s ease; /* Added transition property */
  /*top: calc(45vh + 120px);*/
  top: 100vh;
  /*flex box*/
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 5px;
}

.sideNav a {
  color: var(--bottle);
  font-family: "Alata", sans-serif;
  font-size: 16px;
  text-decoration: none;
  padding: 0 20px;
}

.sideNav a.active {
  color: var(--truewhite);
}

.sideNav a:not(.active) {
  color: var(--bottle);
}

.sideNav a:hover {
  color: var(--salmon);
}

/*Layout options*/

.textImg {
  display: flex;
  flex-direction: row;
  gap: 20px;
  object-fit: contain;
}

.content {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

article img {
  width: 25vw;
  height: auto;
  object-fit: contain;
}

.Twopics,
.Threepics {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
  margin-top: 50px;
}

.Twopics img {
  width: 33vw;
  height: auto;
}

.Threepics img {
  height: 20vw;
  width: auto;
}

#gifs img {
  border-radius: 16px;
  outline: 5px solid black;
}

.imgColumn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
}

#flow img {
  width: 40vw;
}

/*SECTIONS*/
/*Banner*/
#banner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 20px;
  padding: 0 12vw;
  padding-top: 120px;
}

#banner-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*tcc*/

.banner-tcc {
  color: var(--truewhite);
  background-color: #0c727d;
  padding-right: 0 !important;
}

.banner-tcc p {
  color: var(--truewhite);
}

#title-tcc {
  text-shadow: none;
  font-family: "Poppins", sans-serif;
  text-transform: capitalize;
}

/*ecobites*/

.banner-eco {
  color: var(--textblack);
  background-color: var(--truewhite);
}

.banner-eco p {
  font-family: "Poppins", sans-serif;
  color: var(--textblack);
}

#title-eco {
  text-shadow: none;
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  text-transform: capitalize;
  color: var(--textblack);
  margin-top: 10vh;
}

.banner-eco h4 {
  font-family: "Poppins", sans-serif;
  font-weight: normal;
  color: var(--textblack);
  font-size: 20px;
  margin: 0;
}

#scraps {
  width: fit-content;
}

/*Smukfest*/
.banner-smuk {
  color: var(--truewhite);
  background-color: #27573d;
  height: 47vh !important;
  padding-top: 170px !important;
  position: relative;
}

.banner-smuk p {
  color: var(--truewhite);
  font-family: "Lato", sans-serif;
  /*text-transform: uppercase;*/
  line-height: 160%; /* 19.2px */
  letter-spacing: 1.44px;
}

#title-smuk {
  text-shadow: none;
  font-family: "Lato", sans-serif;
  text-transform: uppercase;
  font-size: 4vw;
  letter-spacing: 5.76px;
}

#smukwave {
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100vw;
}

#smuklogo {
  height: 100%;
  width: auto;
}

/*Mobilize Me*/
.banner-mm {
  color: black;
  background-color: #6b7191;
  height: 47vh !important;
  padding-top: 170px !important;
  position: relative;
}

.banner-mm p {
  color: var(--truewhite);
  font-family: "DM Sans", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#title-mm {
  text-shadow: none;
  font-family: "DM Sans", sans-serif;
  font-size: 4vw;
  letter-spacing: normal;
  text-transform: capitalize;
}

#mm-old-solution img {
  width: auto;
  height: 19vw;
}

#mm-design-system img {
  height: auto;
  width: 23vw;
}

#mm-sketch-main {
  height: auto;
  width: 50%;
}

#onboarding .Threepics {
  margin: 0;
}

#onboarding h5 {
  margin-top: 30px;
  margin-bottom: 10px;
}

/*Overview*/
#overview h4 {
  color: var(--salmon);
}

.infoPoints {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.infoPoints h5,
.infoPoints p {
  margin: 0;
  max-width: 400px;
}

.category {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#client {
  background-color: var(--sage);
}

#problem {
  background-color: var(--bottle);
}

#problem p,
#problem h3,
#problem ul {
  color: var(--truewhite);
}

/*background change*/
#discover,
#develop {
  background-color: var(--sage);
}

/*hmw*/

#hmw img {
  /*max-width: 500px;*/
  width: 30vw;
}

#goals {
  margin-bottom: 25px;
}

/*Low-fi*/

#lowFi {
  margin-top: 50px;
}

#lowFi .Threepics {
  margin: 0;
}

/*Testing*/

#testing p {
  max-width: 500px;
}

/*ECOBITES*/
/*Features*/

#features {
  width: 40vw;
  background-color: var(--truewhite);
}

/*Low-fi*/

#low-fi-ecobites img {
  height: auto;
  width: 20vw;
}

@media only screen and (max-width: 900px) {
  .sideNav {
    display: none;
  }

  #banner {
    flex-direction: column;
    padding: 0;
    padding-top: 70px;
  }

  #banner-text {
    padding: 50px 20px;
  }

  #overview {
    padding-top: 20px;
  }

  .textImg {
    flex-direction: column;
  }

  article img,
  .Twopics img,
  #hmw img,
  .Threepics img {
    width: 85vw;
    height: auto;
  }

  iframe {
    width: 90vw;
  }

  /*banners*/
  #title-eco {
    margin-top: 0;
  }
}

/*PERSONAL PROJECTS*/

/*3D animation*/
.banner-3da {
  color: black;
  background-color: var(--sage);
  height: 47vh !important;
  padding-top: 170px !important;
  position: relative;
}

.banner-3da p {
  color: var(--bottle);
  /*font-family: "DM Sans", sans-serif;*/
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#title-3da {
  text-shadow: none;
  color: var(--bottle);
  /*font-family: "DM Sans", sans-serif;*/
  font-size: 4vw;
  letter-spacing: normal;
  text-transform: capitalize;
}

/*Motion Graphics*/
.banner-mg {
  color: black;
  background-color: #465bff;
  height: auto !important;
  padding: 12vw !important;
  padding-top: 170px !important;
  position: relative;
}

.banner-mg p {
  color: var(--truewhite);
  font-family: "Orbitron", sans-serif;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#title-mg {
  text-shadow: none;
  color: var(--truewhite);
  font-family: "Climate Crisis", sans-serif;
  font-weight: 400;
  font-size: 4vw;
  letter-spacing: normal;
  text-transform: capitalize;
}

@media only screen and (min-width: 900px) {
  #banner {
    height: 55vh;
  }
}