@media screen and (max-width: 1200px) {
  #desktop-nav {
      display: none; /* Hide desktop nav */
  }

  #hamburger-nav {
      display: flex; /* Show hamburger nav */
      background-color: #561C24; 
      justify-content: space-between;
      align-items: center;
      padding: 10px;
      position: fixed; 
      width: 100%; 
      z-index: 1000; 
  }

  #hamburger-nav .logo {
      color: #F0F1F0; 
  }
}

  /* Mobile responsiveness for profile in homepage */
@media (max-width: 720px) {
  /* Hide desktop layout on mobile */
  #desktop-layout {
    display: none;
  }

  /* Show mobile layout */
  #mobile-layout {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 20px 20px 20px 20px;
    font-family: Arial, sans-serif;
    background-color: #F0F1F0;
  }

  .mobile-mateo,
  .mobile-salvador {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .mobile-mateo {
    margin-top: 80px; 
    flex-direction: column-reverse; 
  }

  .mobile-salvador {
    flex-direction: column; 
  }
}

/* Profile in desktop*/
@media (min-width: 721px) {
  /* Show desktop layout and hide mobile layout on larger screens */
  #desktop-layout {
  display: flex;
  }

  #mobile-layout {
  display: none;
  }
}

@media (min-width: 721px) {
  body .quiz-page {
      margin-top: 5% !important;
  }
}

@media (max-width: 768px) {
    .about-container {
      flex-wrap: wrap;
      margin-top: 20%;
      width: 100vw;
    }

    .team-member {
      margin: 5% 0% !important;
      width: 70% !important;
    }

    .team-container {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      flex-wrap: wrap !important;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }

    #mateo-container, #salvador-container {
       margin: 0;
    }

    .about-logo {
        display: none; 
    }

    #about-title {
        font-size: 3rem; 
    }

    .info {
      display: none !important;
    }
}


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

  .portfolio-container {
      display: flex;
      padding: 2%;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      margin-top: 40%;
      margin-right: 0;
      background-color: #F0F1F0;
  }

  .title {
      width: 80%;
      margin: 10% auto;
  }

  .skills, .educational-background {
      width: 90%;
      padding: 10px;
      margin: 10px 0;
      text-align: left; 
  }

  .skills h2 {
      font-size: 2rem;
      margin-bottom: 10px;
  }

  .skills p {
      font-size: 1rem;
  }

  .educational-background {
      text-align: center;
  }
}