@media (max-width: 600px) {
  :root {
    --spacing-md: 0.75em;
    --spacing-sm: 0.375em;
  }

  header h1 {
    font-size: 1.5rem;
  }

  .input-group {
    max-width: 300px;
    height: 40px;
  }

  .input-group input {
    font-size: 0.9rem;
  }

  .result-section {
    padding: var(--spacing-sm);
  }

  main {
    padding-top: 160px;
    padding-bottom: 100px;
  }

  .search-section {
    top: 60px;
    padding: 20px 10px;
    height: 12vh;
  }

  .toggle-card {
    padding: 1.5rem;
    min-height: 180px;
  }

  .toggle-card .card-title {
    top: 1.5rem;
    left: 1.5rem;
    font-size: 1.25rem;
  }

  .toggle-card .card-description {
    top: 5rem;
    left: 1.5rem;
    right: 1.5rem;
    font-size: 0.9rem;
  }

  .toggle-card .read-more-btn {
    bottom: 1.5rem;
    padding: 0.6rem 3rem;
    font-size: 0.8rem;
  }

  .about-content span {
    font-size: 0.6rem;
    margin: 5px auto;
    font-weight: 800;
  }

  .main-footer {
    padding: 0.75rem;
  }

  .footer-text {
    font-size: 0.8rem;
  }

  .social-icon {
    width: 18px;
    height: 18px;
  }

  .back-btn {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  .back-icon {
    width: 16px;
    height: 16px;
  }

  .main-nav {
    width: 250px;
    left: -250px;
  }

  .main-nav.active {
    transform: translateX(250px);
  }

  .nav-content {
    padding: 1.5rem;
  }

  .about-section,
  .feedback-section {
    padding: 1rem;
    margin: 1rem;
  }

  .dua-actions {
    gap: 1rem;
    padding: 0.5rem;
    justify-content: center;
}

.action-btn {
    flex: 0 0 36px; /* Slightly smaller on mobile */
    height: 36px;
}

.action-btn img {
    width: 20px;
    height: 20px;
}
}


@media (max-width: 400px) {
  .dua-actions {
      gap: 4rem;
  }

  .action-btn {
      flex: 0 0 32px; /* Even smaller on very small screens */
      height: 32px;
  }

  .action-btn img {
      width: 18px;
      height: 18px;
  }
}

@media (max-width: 768px) {
  .download-steps {
    padding: 1.5rem;
    gap: 2rem;
  }

  .download-step {
    width: 320px;
  }

  .step-icon {
    height: 240px;
  }
}

/* Print styles */
@media print {
  body {
    background: none;
    color: #000;
  }

  .search-section {
    display: none;
  }

  .result-section {
    box-shadow: none;
    border: 1px solid #000;
  }
}