/* Responsive Styles */
@media (max-width: 768px) {
  .content-grid {
      grid-template-columns: 1fr;
  }

  .welcome-content {
      grid-template-columns: 1fr;
  }

  .image-placeholder {
      height: 250px;
  }

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

  .section-title h2 {
      font-size: 28px;
  }

  .info-cards-grid {
      grid-template-columns: 1fr;
  }

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

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

  .photo-grid {
      grid-template-columns: repeat(2, 1fr);
  }

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

  .info-card-header h3 {
      font-size: var(--spacing-md);
  }

  .header-content {
      flex-direction: column;
      text-align: center;
  }

  .header-officials {
      text-align: center;
      margin-top: var(--spacing-md);
  }

  .nav-menu {
      flex-direction: column;
      width: 100%;
  }

  .announcement-label {
      font-size: var(--font-sm);
      padding: 6px 12px;
      margin-right: var(--spacing-sm);
  }

  .announcement-text {
      font-size: 13px;
  }

  .hero h2 {
      font-size: 28px;
  }

  .hero {
      min-height: 400px;
      padding: 60px var(--spacing-md);
  }

  .hero-container {
      grid-template-columns: 1fr;
  }

  .hero-sidebar {
      flex-direction: row;
      gap: var(--spacing-md);
  }

  .qr-section {
      flex: 1;
  }

  .qr-section h3 {
      font-size: var(--font-md);
  }

  .qr-code {
      width: 100px;
      height: 100px;
      font-size: 40px;
  }

  .hero-content {
      padding: var(--spacing-lg);
  }

  .hero h2 {
      font-size: var(--font-xl);
  }

  .hero p {
      font-size: var(--font-base);
  }

  .welcome-text h2 {
      font-size: var(--font-xl);
  }

  /* Mobile Submenu Styles */
  .submenu {
      position: static;
      display: none;
      background: var(--secondary-blue);
      min-width: auto;
      box-shadow: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
  }

  .nav-menu li.submenu-open > .submenu {
      display: flex;
      max-height: 1000px;
  }

  .submenu li a {
      padding: 10px 20px 10px 40px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-size: 13px;
  }

  .submenu li a:hover {
      padding-left: 45px;
      background: var(--secondary-orange);
  }
}