/* Larger screens */
@media (min-width: 1024px) {
  .btn-primary:hover {
    background-color: #f3f4f6;
  }

  /* Outline Button */
  .btn-outline {
    background-color: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
  }
}
@media (min-width: 768px) {
  .tools {
    top: -8rem;
  }
  .hero-content {
    max-width: 90%;
  }
  .hero-content h1 {
    font-size: 3rem; /* md:text-5xl equivalent */
    margin-bottom: 0.5rem;
  }
  .hero-content p {
    font-size: 1.25rem;
  }
  .hero,
  .hero-section {
    /*     background-attachment: fixed; */
    background-size: cover;
    padding: 9rem 1rem;
    min-height: 45vh;
  }

  #mobile-menu-button {
    display: none;
  }
  #nav {
    display: flex;
  }

  .hero {
    background-image: url("/assets/design-images/hero.png");

    .hero-overlay {
      display: none;
    }

    .hero-content {
      margin: 0;
      width: 60%;
    }
    .hero-content h1 {
      font-size: 3rem; /* md:text-5xl equivalent */
      margin-bottom: 0.5rem;
      letter-spacing: 2px;
      color: black;
    }
    .hero-content p {
      font-size: 1.25rem;
      font-weight: 300;
      color: black;
    }
  }
}
/* Middium screens */
@media (min-width: 768px) and (max-width: 1023px) {
  #mobile-menu-button {
    display: block;
  }
  #nav {
    display: none;
  }
  .tools {
    top: -8rem;
  }
  .hero-content {
    max-width: 90%;
  }
  .hero-content h1 {
    font-size: 3rem; /* md:text-5xl equivalent */
    margin-bottom: 0.5rem;
  }
  .hero-content p {
    font-size: 1.25rem;
  }
  .hero,
  .hero-section {
    background-attachment: fixed;
    background-size: cover;
    padding: 9rem 1rem;
    min-height: 40vh;
  }

  .hero {
    background-image: url("/assets/design-images/hero_md.png");
    background-size: 100% 100%;

    .hero-overlay {
      display: flex;
    }

    .hero-content {
      margin: 0;
      max-width: 100%;
      width: 100%;
      margin: 0px;
      margin-left: 0px;
    }

    .hero-content h1 {
      font-size: 2.5rem; /* md:text-5xl equivalent */
      margin-bottom: 0.5rem;
      letter-spacing: 2px;
      color: white;

      span {
        color: #099e4c;
      }
    }
    .hero-content p {
      font-size: 1.1rem;
      font-weight: 300;
      color: white;
    }
  }
}

@media (max-width: 768px) {
  .faq-question {
    font-size: 0.8rem;
  }

  .faq-answer {
    p {
      font-size: 0.765rem;
    }
  }
}
@media (max-width: 768px) {
  /* Notice Board */
  .board-wrapper {
    width: 100%;
    gap: 2rem;
    grid-template-columns: 1fr;
  }

  .notice-card {
    width: 95%;
    padding: 15px;
  }
  .stack-indicator {
    width: 98%;
  }
  .stack-indicator.third {
    width: 100%;
  }

  .board-img-outer {
    position: relative;
    width: 80%;
    height: fit-content;
    margin-top: 10px;
  }
}