/*----------- FLEX CLASSES -----------*/
.row-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
}
.row-wrapper:first-child {
  justify-content: flex-start;
}
.row-wrapper:last-child {
  justify-content: flex-end;
}
.column-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.center-wrapper {
  justify-content: center;
  flex-grow: 2;
}
.inner-center-wrapper {
  display: flex;
  justify-content: space-around;
  flex: 1;
  flex-shrink: 2;
}
.empty-wrapper {
  flex-grow: 1;
}
/*----------- NAV BAR appearance logic based on device -----------*/
@media (max-width: 600px) {
  .hide-on-mobile {
    display: none !important;
  }
}
@media only screen and (min-width: 600px) {
  .hide-on-desktop {
    display: none;
  }
}
/*----------- Mobile Devices with a max width of 600px -----------*/
@media (max-width: 600px) {
  /*----------- GENERAL CLASSES - max width 600px devices -----------*/
  h1 {
    color: #172d4fff;
    font-size: 1.8rem;
  }
  h2 {
    font-size: 1.3rem;
    margin: auto;
  }
  h3{
    font-size: 1rem;
    margin: auto;
  }
  h4 {
    font-size: .8rem;
    color: rgb(0, 0, 0);
    margin: auto;
  }
  button {
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    position: static;
    padding: 10px 16px;
    font-size: 1.1rem;
    width: 90vw;
    max-width: 320px;
    display: block;
  }
  li {
    font-size: 1rem;
  }
  .spaced {
    margin: 2vh 0;
  }
  .main-content {
    padding-bottom: 12vh;
  }
  .content {
    max-width: 97vw;
    padding: 1vh 1vw;
    margin: 1vh 1vw;
  }
  .content-blue-bg {
    font-size: .8rem;
    background: rgba(23, 45, 79, 0.5);
    padding: 1vh 3vw;
    margin: 3vh auto;
    max-width: 93vw;
  }
  .social-logo {
    width: 8vw;
  }
  .logo-container {
    margin: auto;
  } 
  .empty-wrapper {
    flex-grow: 0;
  }
  /*----------- NAVIGATION BAR - max width 600px devices -----------*/
  nav {
    width: 98vw;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 3vw;
    background: transparent !important;
    box-shadow: none;
  }
  nav a {
    margin: 0.5rem 0;
    font-size: 1rem;
  }
  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 98vw;
    min-height: 36px;
    background: #172d4fff;
    border-radius: 12px;
    margin-bottom: 6px;
    box-sizing: border-box;
  }
  .nav-logo {
    height: 5vh;
    object-fit: contain;
    display: block;
    margin: .5rem 2rem .5rem -.5rem;
  }
  .nav-logo-right {
    width: 50vw;
    object-fit: contain;
    display: block;
    margin: .5rem 1rem;
  }
  .nav-links {
    align-items: center;
    width: 98vw;
    min-height: 120px;
    gap: 0.5rem;
    margin: 0 auto;
    background: rgba(23, 45, 79, 0.0);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(44,62,80,0.12);
  }
  .nav-links a {
    margin: 0.5rem 0;
    font-size: 1.1rem;
    width: 98vw;
    text-align: center;
  }
  #menu-toggle {
    color: #f2efeaff;
    font-size: 1.5rem;
    margin: .5rem 0 .5rem 1rem;
    cursor: pointer;
    background: none;
    border: none;
    width: auto;
    display: block;
  }
  /*----------- FOOTER - max width 600px devices -----------*/
  footer {
    width: 95vw;
  }
  footer p {
    font-size: .8rem;
    margin: auto;
  }
  /*----------- INDEX PAGE - max width 600px devices -----------*/
  .logo {
    max-width: 45vw;
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    display: block;
    height: auto;
  }
  .logo-full {
    max-width: 90vw;
    margin-top: 0;
    margin-bottom: 5vh;
    margin-left: auto;
    margin-right: auto;
    padding: 1vh 2vw;
    background: rgba(255,255,255,0.5);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(44,62,80,0.10);
  }
  .home-paragraph {
    width: 95vw;
  }
  .cta-btn {
    margin-top: 10vh;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    position: static;
    padding: 10px 16px;
    font-size: 1.1rem;
    width: 90vw;
    max-width: 320px;
    display: block;
  }
  /*----------- ABOUT PAGE - max width 600px devices -----------*/
  .grid-container {
      margin-top: 1vh;
  }
  .grid-item h2, .grid-item h4, .grid-item h3 {
    margin: .3vh;
  }
  .item-4 {
    grid-column: 1 / span 2;
  }
  .grid-item p {
    font-size: 1rem;
  }
  .p-about {
    font-size: 1rem;
}
    /*----------- CONTACT PAGE - max width 600px devices -----------*/
  .contact-us {
    width: 95vw;
  }
  /*----------- PROJECTS PAGE - max width 600px devices -----------*/
  .projects-list {
    flex-direction: column;
    gap: 16px;
  }
  .project-card {
    max-width: 98vw;
    min-width: 0;
    width: 98vw;
    box-sizing: border-box;
    padding: 0.7rem 1.2rem;
    margin: 8px auto 8px auto;
    background: #f2efeaff;
    color: #172d4fff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(44,62,80,0.12);
  }
  .project-title, .project-desc, .project-link {
    color: #172d4fff;
  }
  .under-construction {
    width: 95vw;
    height: 65vh;
  }
  /*----------- SUBMISSION PAGE - max width 600px devices -----------*/
  .redirect {
    width: 95vw;
    height: 70vh;
  }
}