/* ====================== About Us =================== */

#main__about {
  font-size: .8em;
}

#about__hero {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  row-gap: var(--SPACING-MEDIUM);

  position: relative;
  z-index: -1;

  background-color: aliceblue;
}

#about__heading-container {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  margin: auto;

}

#about__hero h1 {
  font-size: var(--FS-LARGEST);
  text-align: center;

}

#about__hero-img {
  position: -webkit-sticky;
  position: sticky;
  top: 23vh;
  left: 0;

  max-height: 70vh;
  width: auto;
  max-width: 100%;

  border-radius: 5%;
  border: .25em solid gold;
}

#about-us {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  row-gap: var(--SPACING-LARGE);
  -moz-column-gap: var(--SPACING-LARGE);
      column-gap: var(--SPACING-LARGE);

  width: 100%;
  min-height: 80vh;
  position: relative;
  z-index: 2;

  padding: var(--SPACING-LARGER) var(--SPACING-MEDIUM) 10vh;
  background: linear-gradient(to left, #6facdd, lightblue, aquamarine, lightskyblue);
}

#about-us__info {
  padding: 0 var(--SPACING-MEDIUM) var(--SPACING-MEDIUM);
}

#main__about h2,
#main__about h3 {
  margin: var(--SPACING-MEDIUM) 0 var(--SPACING-SMALL);
  font-style: italic;
}

#main__about h2 {
  margin-top: 0;
  font-size: var(--FS-LARGER);
}

#main__about h3 {
  font-size: var(--FS-LARGE);
}

#main__about p {
  margin: var(--SPACING-SMALL) 0;
  font-size: var(--FS-MEDIUM);
}

#main__about li {
  margin: var(--SPACING-SMALL) 0 0 2em;
  font-size: var(--FS-MEDIUM);
}

#about-us img {
  width: 100%;
  height: auto;

  margin-bottom: var(--SPACING-MEDIUM);
}

#about__operations {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  row-gap: var(--SPACING-LARGE);

  width: 100%;
  min-height: 80vh;
  padding: var(--SPACING-LARGE) var(--SPACING-SMALL) 10vh;

  background: linear-gradient(to right, #e5b951, goldenrod, coral, lightgoldenrodyellow);
}

#about__operations img {
  width: 100%;
  max-width: 400px;
  height: auto;
  max-height: 70vh;

  border: .25em solid brown;
}

#about__founders {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  row-gap: var(--SPACING-LARGE);

  width: 100%;
  min-height: 80vh;

  padding: var(--SPACING-LARGE) var(--SPACING-MEDIUM) 10vh;
  background: linear-gradient(lightgreen, #94bf4e, olive, yellowgreen);
  color: white;
}


#about__founders--img-container {
  width: 100%;
  max-width: 400px;

  overflow: hidden;
}

#about__founders--img-container p {
  font-size: var(--FS);
  color: brown;
}

#about__founders img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 12.5%;
}

#about__founders-information {
  overflow: hidden;
}

#sticky-container {
  position: relative;
}


#about__connect {
  position: -webkit-sticky;
  position: sticky;
  top: 20vh;
  left: 0;

  min-height: 75vh;
  padding-bottom: 10vh;

  background: linear-gradient(peachpuff, lightblue, lightgoldenrodyellow, skyblue);
  color: brown;
}

.about__connect--section {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--SPACING-MEDIUM);
}

#about__connect--socials a {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  -moz-column-gap: var(--SPACING-SMALL);
        column-gap: var(--SPACING-SMALL);

  transition: 0.5s;
}

#about__connect--socials a:is(:hover, :focus) {
  color: aquamarine;
  background-color: brown;
}

#about__connect--socials a:active {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

#about__connect--explore a {
  width: 90%;
  max-width: 250px;

  padding: var(--SPACING-SMALL);
  text-align: center;

  background-color: goldenrod;
  color: blue;
  border-radius: 2em;
  transition: 0.5s;
}

#about__connect--explore a:is(:hover, :focus) {
  background-color: gold;
}

#about__connect--explore a:active {
  -webkit-filter: brightness(1.3);
          filter: brightness(1.3);
}

#about__transparent-section {
  position: relative;
  z-index: -1000;
}


/* ========== RESPONSIVE DESIGN ========== */

@media only screen and (min-width: 768px) {

  #about-us,
  #about__operations {
    flex-direction: row;
    align-items: flex-start;
  }

  #about-us__info,
  #about__operations-information,
  #about__founders-information {
    width: 60%;
    padding: var(--SPACING-MEDIUM) 0 80vh;
  }

  #about-us img,
  #about__operations img {
    width: 40%;
    position: -webkit-sticky;
    position: sticky;
    top: 25vh;
  }

  #about__founders {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    -moz-column-gap: var(--SPACING-MEDIUM);
          column-gap: var(--SPACING-MEDIUM);
  }

  #about__founders > h2 {
    display: none;
  }

  #about__founders--img-container {
    width: 40%;
    position: -webkit-sticky;
    position: sticky;
    top: 20vh;
  }

  #about__founders-information > h2 {
    display: block;
  }

  #about__connect--content {
    display: flex;
  }

  .about__connect--section {
    width: 50%;
  }

}

@media only screen and (min-width: 992px) {

  #main__about {
    font-size: var(--FS);
  }

  #about__hero {
    flex-direction: row;
    flex-wrap: wrap;
  }

  #about__heading-container {
    width: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 20vh;
  }
}

@media only screen and (min-width: 1200px) {
  #about__hero img {
    margin-right: var(--SPACING-LARGE);
  }
}