/* ================= Responsive ================= */
@media (max-width: 768px) {
  /* Navbar */
  nav {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 20px;
  }

  nav h1 {
    font-size: 28px;
    margin: 10px 0;
  }

  nav .nav-menu {
    display: none; /* default sembunyi */
    flex-direction: column;
    width: 100%;
    background: #155084;
    padding: 10px 0;
  }

  nav .nav-menu.active {
    display: flex;
  }

  nav .nav-item {
    margin: 10px 0;
    text-align: center;
  }

  /* Tombol hamburger */
  .hamburger {
    display: block;
    cursor: pointer;
    margin-right: 20px;
  }
  .hamburger div {
    width: 25px;
    height: 3px;
    background: #fff;
    margin: 5px 0;
  }

  /* About */
  #home {
    flex-direction: column;
    text-align: center;
  }
  #home .container {
    max-width: 100%;
    text-align: center;
    align-items: center;
  }
  #home h1, #home h2, #home p {
    text-align: center;
  }
  aside {
    width: 100%;
    margin-bottom: 20px;
  }
  #pp {
    width: 250px;
    height: 250px;
  }

  /* Skills */
  .skills-grid {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .skill-card {
    width: 90%;
    max-width: 300px;
  }

  /* Contact */
  .contact-container {
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
  }
  .map-container{}
  .contact-form {
    max-width: 80%0%;
    aspect-ratio: auto;
    width: 90%;
    margin-right: 20px;
  }
}


/* School */

@media (max-width: 768px) {
    .school-container {
      margin-bottom: 50px;
    }
    .school-grid {
        flex-direction: column; 
        align-items: center;
    }

    .school-icon img {
        width: 80%; 
        max-width: 300px;
    }
}