/* Optional: make text smaller on small devices for better layout */
@media (max-width: 600px) {
  p {
    font-size: 0.89rem;
    line-height: 1.5;
    padding: 0 0.5rem;
  }
}
/* Responsive adjustments for tablets and smaller screens */
@media (max-width: 1024px) {
  header {
    width: 90%;
  }

  #header-top {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: space-around;
  }

  #section-about,
  #section-projects,
  #section-certificates,
  #section-resume,
  #section-connect {
    width: 95%;
    flex-direction: column;
    align-items: center;
  }

  .profile-photo {
    text-align: center;
  }

  .about-description {
    text-align: center;
  }

  .flex-outputs {
    flex-direction: column;
    align-items: center;
  }

  .project2-outputs {
    width: 90%;
  }

  iframe {
    width: 100% !important;
  }
}

@media screen and (max-width: 600px) {
  .notebook-pattern {
    padding: 1rem;
    border-radius: 12px;
  }

  /* Header: Make icons stack or scroll */
  header {
    width: 100%;
    top: 0.5rem;
  }

  #header-top {
    width: 95%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
  }

  #about,
  #projects,
  #connect,
  #resume,
  #certificates {
    width: 2.2rem;
    height: 2.2rem;
  }

  .logo {
    width: 1.2rem;
    height: 1.2rem;
  }

  /* About Section: Stack vertically */
  #section-about {
    flex-direction: column;
    width: 100%;
    padding: 1rem;
  }

  .profile-photo {
    margin: 0 auto;
  }

  #profilephoto {
    width: 10rem;
  }

  .about-description {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  h2 {
    font-size: 1.2rem;
  }

  p {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Project Sections */
  #section-projects {
    width: 100%;
    padding: 1rem;
  }

  #project-1,
  #project-2 {
    margin: 0;
  }

  iframe#moviepedia-embeded {
    min-height: 20rem;
    width: 100%;
  }

  .flex-outputs {
    flex-direction: column;
    gap: 0.7rem;
  }

  .project2-outputs {
    width: 100%;
    max-width: 100%;
  }

  /* Certifications */
  #section-certificates {
    width: 100%;
    padding: 1rem;
  }

  .cert-grid {
    grid-template-columns: 1fr;
  }

  /* Resume Section */
  #section-resume {
    width: 100%;
  }

  #resume-embeded {
    width: 100%;
    min-height: 20rem;
  }

  .download-btn {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }

  .download-icon {
    width: 1rem;
    height: 1rem;
  }

  /* Connect Section */
  #section-connect {
    width: 100%;
    padding: 1rem;
  }

  #contact-form input,
  #contact-form textarea {
    width: 95%;
    margin-bottom: 0.8rem;
    font-size: 1rem;
  }

  #contact-form button {
    width: 100%;
    padding: 0.6rem;
    font-size: 1rem;
  }
}