@media screen and (min-width: 821px) and (max-width: 1100px) and (min-height: 667px){
  .alt-nav-hamburger{
    display: none;
   }
   .alt-nav-icon{
     display: none;
   }
  .main-content {
    width: 85vw;
    height: 80vh;
    margin: auto;
    margin-top: 0.5%;
    position: relative;
    overflow: hidden;
  }
  #hero-svg {
    position: absolute;
    width: 100%;
    top: 35%;
    height: 50%;
  }
  #hero-cta{
    width: 100%;
    height: 100%;
    top: 5%;
    left: 0;
    text-align: center;
  }
  #hero-cta p{
    position: absolute;
    width: 75%;
    left: 12.5%;
    font-size: 22px;
    top: 20%;
  }
  #hero-cta .cta-btn {
    position: absolute;
    bottom: 15%;
  }

  .systems-info, .social-info, .web-info{
    margin-top: 50px;
    width: 100%;
  }
  #system-svgs{
    position: absolute;
    left: 32.5%;
    top: 45%;
  }
  .twitter-lines {
    position: absolute;
    right: 26%;
    bottom: 20%;
    width: 400px;
    height: 300px;
  }
  .facebook-lines {
    position: absolute;
    left: -2.5%;
    top: 40%;
    width: 300px;
    height: 300px;
  }
  .pinterest-lines {
    position: absolute;
    right: -2.5%;
    top: 40%;
    width: 300px;
    height: 300px;
  }
  #web-svgs{
    width: 100%;
    left: 15%;
    top: 40%;
  }
  .buttons {
    bottom: 10%;
  }

  #about-para-bg{
    left: -15%;
    top: 7.5%;
    width: 750px;
  }
  #about-paragraph-section h3 {
    bottom: 44%;
    left: 5%;
  }
  #abt-section p {
    font-size: 18px;
    width: 65%;
    top: 50%;
    left: 15%;
  }
  #our1 {
    top: 21.25%;
    right: 62.5%;
  }
  #story {
    right: -25.5%;
    top: 30%;
  }

 .philosophy-info{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 90%;
    height: 100%;
  }


  #philosophy-h1 {
    right: -20%;
  }
  .philosophy-paras h2{
    top: -17%;
    opacity: 0.5;
  } 
  .philosophy-paras p{
    position: relative;
    float: left;
    width: 70%;
    font-size: 18px;
  }

  #phil-para1 p{
    margin-left: 105px;
    top: 50%;
    left: -6.25%;
  }
  #phil-para2 h2{
    top: -35%;
  }
  #phil-para2 p{
    top: 35%;
    left: 12.5%;
  }
  #phil-para3 h2{
    top: -35%;
  }
  #phil-para3 p{
    left: 12.5%;
  }
  #phil-para3 h3{
    bottom: 37%;
    left: -1.75%;
  }
  #phil-para1 h3{
    bottom: -12.5%;
    left: -4.5%;
  }
  #phil-para2 h3{
    bottom: 0%;
    left: -4%;
  }

  #the-h1 {
    left: -30%;
    top: 2.5%;
    opacity: 0;
  }
  #mynt-h1 {
    right: -55%;
    top: 27.5%;
    opacity: 0;
  }
  #mission-h1 {
    left: -50%;
    top: 58%;
    opacity: 0;
  }
  #mission-para1{
    right: -80%;
  }
  #mission-para1 p{
    bottom: 10%;
  }
  #mission-para2 {
    bottom: 41%;
    left: -65%;
  }
  #mission-para2 p{
    bottom: -1.5%;
  }
  #mission-para3 {
    right: -70%;
    bottom: 7.5%;
  }
  #mission-para3 p{
    bottom: 20%;
  }
  #mission-para3 hr{
    top: 18.5%;
  }
  .mission-paras p{
    font-size: 18px;
  }

  .phases {
    position: absolute;
    width: 33%;
    height: 20%;
    text-align: center;
  }
  #phase1{
    left: 8%;
  }
  #phase2{
    left: 58%;
    top: 30%;
  }
  #phase3{
    left: 8.5%;
    bottom: 21.5%;
  }
  .phases img {
    width: 100%;
    height: 100%;
  }
  .phases h3{
    display: none;
  }
  .evolution-info{
    position: absolute;
    width: 45%;
    text-align: center;
  }
  #e-i1{
    top: 11%;
    left: 45%;
    height: 24.5%;
  }
  #e-i2{
    bottom: 39%;
    left: 10%;
    height: 23.5%;
  }
  #e-i3{
    bottom: 16%;
    left: 45%;
    height: 20%;
  }

  .responsive-info{
    margin-top: 225px;
  }
  #lg-site, #md-site, #sm-site{
    bottom: 25%;
  }
}