@media (max-width: 900px) {
  .header {
    height: auto;
    padding: 20px 24px;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .header-nav {
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px;
  }

  .hero {
    padding: 180px 24px 80px;
  }

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

  .news-item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 560px) {
  .section {
    padding: 72px 20px;
  }

  .hero h1 {
    font-size: 42px;
  }

  .hero-text {
    font-size: 15px;
  }

  .btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .sub-hero {
    padding: 160px 24px 72px;
  }

  .two-column {
    grid-template-columns: 1fr;
    gap: 24px;
  }

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

  .philosophy-box {
    padding: 32px;
  }

  .profile-table th,
  .profile-table td {
    display: block;
    width: 100%;
  }

  .profile-table th {
    padding-bottom: 8px;
  }

  .profile-table td {
    padding-top: 8px;
  }
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .contact-form {
    padding: 30px 22px;
  }
}