@media screen and (min-width: 821px) and (max-width: 1100px) and (max-height: 604px){
  .main-content {
    width: 85vw;
    height: 85vh;
    margin: auto;
    margin-top: 4.25%;
    position: relative;
    overflow: hidden;
  }
  #hero-svg {
    position: absolute;
    top: 25%;
    width: 50%;
    height: 50%;
  }
  #hero-cta h1 {
    font-size: 55px;
    margin-top: 15px;
  }
  #hero-cta p{
    position: absolute;
    width: 85%;
    left: 3.5%;
    bottom: 5%;
  }
  #hero-cta .cta-btn {
    position: absolute;
    bottom: 2.5%;
    left: 22.5%;
  }

  .systems-info, .social-info, .web-info{
    width: 70%;
  }
  .systems-para2 h3{
    left: -17%;
  }
  .systems-para4 h3{
    left: -14%;
  }
  #system-svgs{
    position: absolute;
    width: 35%;
    height: 75%;
    left: 65%;
    top: 20%;
  }
  #system-svgs .gears {
    height: 450px;
  }
  .twitter-lines {
    position: absolute;
    right: -3%;
    bottom: -5%;
    width: 350px;
  }
  .facebook-lines {
    position: absolute;
    left: 55%;
    top: 15%;
    width: 350px;
  }
  .pinterest-lines {
    position: absolute;
    right: -14.5%;
    top: 20%;
    width: 400px;
  }
  #web-svgs{
    width: 100%;
    left: 62.5%;
    top: 10%;
  }
  .web-build {
    width: 350px;
  }
  .buttons {
    bottom: 0;
  }

  #about-para-bg{
    left: -10%;
    top: -12.5%;
  }
  #about-paragraph-section h3 {
    bottom: 41.5%;
    left: 1.25%;
  }
  #abt-section p {
    width: 40%;
    top: 45%;
    left: 10%;
  }
  #our1 {
    top: -15%;
    right: 45%;
  }
  #story {
    right: -23%;
    top: 35%;
  }
  .philosophy-info{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 75%;
    height: 100%;
  }
  #philosophy h1, #mission h1{
    font-size: 116px;
  }
  #our2 {
    right: -21%;
    opacity: 0;
  }
  #phresh {
    right: -21%;
    top: 24%;
    opacity: 0;
  }
  #philosophy-h1 {
    right: -21%;
    top: 50.5%;
    opacity: 0;
  }
  .philosophy-paras{
    width: 80%;
  }
  .philosophy-paras h1{
    top: -5%;
    opacity: 0.5;
  }
  #phil-para2 h1{
    top: -5%;
  }
  #phil-para1{
    top: -8%;
    left: 0%;
  }
  #phil-para1 h3{
    bottom: -15%;
    left: -4.5%;
  }
  #phil-para2{
    top: -4%;
    left: 0%;
  }
  #phil-para2 h3{
    bottom: 10%;
    left: -3.5%;
  }
  #phil-para3{
    bottom: 6%;
    left: 0;
  }
  #phil-para3 h3{
    bottom: 20%;
    left: -1%;
  }
  #phil-para1 p{
    top: 37%;
    left: -6.5%;
  }
  #phil-para2 p{
    top: 25%;
    left: -6%;
  }
  #phil-para3 p{
    top: 25%;
    left: -6%;
  }

  #the-h1 {
    left: -30%;
    top: 10%;
    opacity: 0;
  }
  #mynt-h1 {
    right: -57.5%;
    top: 40%;
    opacity: 0;
  }
  #mission-h1 {
    left: -54%;
    top: 65%;
    opacity: 0;
  }
  .mission-paras {
    position: absolute;
    width: 45%;
    height: 26%;
    opacity: 0;
  }
  #mission-para1 {
    top: 12.5%;
    right: -78%;
  }
  #mission-para1 p{
    bottom: 13.5%;
  }
  #mission-para2 {
    bottom: 36%;
    left: -70%;
    height: 26%;
  }
  #mission-para2 p{
    bottom: 1%;
  }
  #mission-para3 {
    bottom: 10%;
    right: -75%;
    height: 21%;
  }
  #mission-para3 h3{
    top: 5%;
  }
  #mission-para3 hr{
    top: 25%;
  }
  .mission-paras hr{
    width: 70px;
    left: 5%;
    top: 17%;
  }
  .phases {
    position: absolute;
    width: 30%;
    height: 25%;
    text-align: center;
  }
  #phase1{
    left: 8%;
    top: 2.5%;
  }
  #phase2{
    left: 62%;
    top: 30%;
  }
  #phase3{
    bottom: 10%;
    left: 8%;
  }
  .phases img {
    width: 100%;
    height: 100%;
  }
  .phases h3{
    display: none;
  }
  .evolution-info{
    position: absolute;
    width: 55%;
    text-align: center;
  }
  #e-i1{
    top: 11%;
    left: 42%;
    height: 24.5%;
  }
  #e-i2{
    bottom: 39%;
    left: 5%;
    height: 23.5%;
  }
  #e-i3{
    bottom: 16%;
    left: 40%;
    height: 20%;
  }
}
@media screen and (max-height: 604px){
    /* Nav Area */
    /* Alt Nav */
    #alt-nav{
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      text-align: center;
      background: #FFF;
      clip-path: inset(0.25% 0.25% 100% 100%);
      -webkit-clip-path: inset(0.25% 0.25% 100% 100%);
      transition: 0.35s ease-in-out;
      z-index: 111;
    }
    #alt-nav.open {
      clip-path: inset(0% 0% 0% 0%);
      -webkit-clip-path: inset(0% 0% 0% 0%);
    }
    .alt-nav-hamburger{
      border: 2.75px solid;
      border-radius: 5px;
      position: absolute;
      width: 3%;
      height: 5%;
      right: 2%;
      top: 2.5%;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      z-index: 112;
    }
    #topbun, #burger, #bottombun {
      height: 13.5%;
      border: 0.5px solid;
      background-color: black;
    }
    .alt-nav-icon{
      display: block;
      width: 7%;
      height: 10%;
      position: absolute;
      top: 0.25%;
      left: 1%;
      z-index: 112;
    }
    .alt-nav-leaf{
      width: 55px;
      height: 55px;
    }
    #alt-navbar {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      width: 100%;
      height: 75%;
    }
    #alt-navbar li {
      font-size: 22px;
      font-weight: 600;
    }
    #alt-navbar li a{
      text-decoration: none;
    }
    #alt-nav a{
      color: #4CF5E1;
    }
    .alt-nav-btn{
      display: block;
      margin: auto;
      width: 20%;
      height: 5%;
      border-color: #4CF5E1; 
    }
    .altFB {
      position: absolute;
      bottom: 0%;
      left: 46%;
      height: 100px;
      width: 100px;
    }
    #nav-area {
      display: none;
    }

  #main-footer{
    display: none;
  }
  #alt-footer{
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #ccffeb;
      opacity: 0.985;
      text-align: center;
      clip-path: inset(93% 0% 0% 95%);
      -webkit-clip-path: inset(93% 0% 0% 95%);
      transition: 0.35s ease-in-out;
      z-index: 110;
  }
  #alt-footer.open {
    clip-path: inset(0% 0% 0% 0%);
    -webkit-clip-path: inset(0% 0% 0% 0%);
  }
  .alt-footer-content {
    color: var(--base-color);
  }
  .alt-copy{
    position: absolute;
    width: 100%;
    top: 65%;
  }
  .alt-bottom-line{
    margin-top: 125px;
  }
  .alt-bottom-line p {
    font-size: 18px;
    margin-top: 50px;
  }
  .alt-foot-open{
    border-radius: 50px;
    border: 3px solid;
    position: absolute;
    width: 3.15%;
    height: 5.75%;
    right: 1%;
    bottom: 0.5%;
  }
  .alt-foot-open.hide{
    display: none;
  }
  .alt-foot-open h3 {
    font-size: 24px;
  }
  .alt-foot-close {
    position: absolute;
    width: 3.5%;
    height: 4.5%;
    right: 0.75%;
    bottom: 0.75%;
  }
  .alt-foot-close hr{
    display: none;
  }
  .alt-foot-close hr.show{
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20%;
    background-color: #4CF5E1;
    border: none;
  }
  .x-f-1{
    transform: rotate(45deg);
  }
  .x-f-2{
    transform: rotate(-45deg);
  }
}