@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar a {
    margin: 10px 0;
  }

  .mission-achievements {
    flex-direction: column;
    width: 100%;
  }

  .mission,
  .achievements {
    flex: none;
    width: 100%;
  }

  .mission-content {
    flex-direction: column;
    background: rgba(
      0,
      0,
      0,
      0.85
    ); /* Semi-transparent black background for visibility */
    padding: 20px; /* Add padding for better spacing */
    border-radius: 10px; /* Optional: round corners for better look */
    margin: 10px; /* Add margin to prevent touching edges */
  }

  .mission-content img {
    width: 100%; /* Make image full width on mobile */
    height: auto;
    margin-bottom: 20px; /* Space below image */
  }

  .mission-text h1 {
    font-size: 2rem; /* Reduce font size for mobile */
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align to start */
  }

  .mission-text p:nth-child(1) {
    font-size: 1.5rem; /* Adjust size for "DIFFERENCE" */
    margin-left: 0; /* Remove left margin on mobile */
    margin-top: 10px; /* Add top margin */
  }

  .mission-text p:nth-child(3) {
    font-size: 1rem; /* Reduce paragraph font size */
    line-height: 1.5; /* Improve readability */
    max-width: 100%; /* Ensure it fits */
    text-align: left; /* Left-align text */
  }

  .hero-section {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .heading {
    font-size: 560%;
  }

  .main-title {
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .main-title span {
    font-size: 140% !important;
  }

  .main-logo {
    position: absolute;
    width: 200% !important;
    height: auto;
  }

  .paper-strip {
    width: 140% !important;
    height: auto;
  }

  .about {
    position: absolute;
    top: 0;
    z-index: -1;
  }

  .about img {
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 999;
  }

  .mission {
    position: relative;
  }

  .mission-text p:nth-child(3) {
    max-width: 90%;
  }

  .mission-achievements img:last-child {
    position: absolute;
    top: 0;
  }

  .achievements {
    position: relative;
    flex-direction: column;
    align-items: center;
  }

  .achievements h1 {
    position: relative;
    top: 0;
    align-items: center;
    font-size: 400%;
    margin: 0;
  }
}