@media (min-width: 200px) and (max-width: 499px) {
    #navbar {
      flex-direction: column;
      align-items: center;
    }
    #contact {
      flex-direction: column;
    }
  }
  @media (min-width: 500px) and (max-width: 899px) {
    .container {
      width: 90%;
    }
    #navbar {
      flex-direction: column;
      align-items: center;
    }
    .showcase-content h2 {
      font-size: 2.4rem;
    }
    .showcase-content p {
      font-size: 1.1rem;
    }
    #what .items {
      flex-direction: column;
    }
    #who {
      flex-direction: column;
    }
    #who > * {
      flex: none;
    }
    .who-bg {
      height: 300px;
    }
    #contact {
      flex-direction: column;
    }
    .map iframe,
    .map {
      min-height: 300px;
    }
     
  }
  @media (min-width: 900px) and (max-width: 1199px) {
    .container {
      width: 90%;
    }
  }