@media (max-width: 999px) {
  body {
    font-size: 90%;
  }

  .about-us {
    padding: 20px;
  }

  .about-us h1 {
    font-size: 2em;
  }

  .about-us p {
    font-size: 1.1em;
  }

  .column h2 {
    font-size: 1.8em;
  }

  .column p {
    font-size: 1em;
  }

  .services-container {
    flex-direction: column;
    align-items: center;
  }

  .service {
    max-width: 100%;
    margin-bottom: var(--spacing-sm);
  }

  .dashboard-container,
  .transaction-history,
  .quick-links {
    padding: 15px;
    margin: 0;
    flex-direction: column;
  }

  .quick-links .links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .quick-links .btn {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }

  .transaction-table th,
  .transaction-table td {
    font-size: 14px;
    padding: 8px;
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .modal {
    width: 90%;
    margin: 0 auto;
    top: 50%;
  }

  .modal-content {
    padding: 25px;
  }

  .animated-balance h2,
  .animated-balance p {
    text-align: center;
  }

  .loan-column {
    flex: 1 1 100%;
    max-width: 100%;
    height: 150px;
  }

  .loan-detail-content {
    padding: 15px;
    font-size: 0.9em;
  }

  .slider-container input[type="range"] {
    width: 80%;
  }

  .login-support-container {
    flex-direction: column;
    align-items: center;
  }

  .login-box,
  .support-box {
    max-width: 100%;
    margin-bottom: var(--spacing-sm);
  }

  .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .login-btn {
    width: 100%;
    text-align: center;
  }

  .hero h1,
  .hero h2 {
    font-size: 2em;
  }

  .hero p {
    font-size: 1em;
  }

  .contacts-page {
    padding: 30px 15px;
  }

  .contacts-page h2 {
    font-size: 2em;
  }

  .social-links {
    flex-direction: row;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .social-links .icon {
    width: 40px;
    height: 40px;
  }

  .mission > div:first-child,
  .values > div:first-child,
  .history > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }

  .mission img,
  .values img,
  .history img {
    max-height: 250px !important;
    object-fit: cover;
    width: 100%;
    border-radius: var(--radius-md);
  }

  .mission .learn-more-btn,
  .values .learn-more-btn,
  .history .learn-more-btn {
    margin-top: 16px;
    align-self: flex-start;
  }

  .features-grid,
  .industry-grid,
  .overview-container {
    justify-content: center;
  }

  .feature-card,
  .industry-card,
  .overview-item {
    flex: 0 1 100%;
    max-width: 450px;
    margin: 0 auto;
  }

  .calculator-inputs,
  .calculator-result {
    flex: 0 1 100%;
    max-width: 520px;
  }

  .section-row {
    flex-direction: column;
  }

  .section-image img {
    max-width: 100%;
  }

  .contact-layout {
    flex-direction: column;
  }

  .feedback-form {
    max-width: 100%;
  }

  .hamburger {
    display: inline-flex;
  }

  .desktop-menu {
    display: none;
  }

  .mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--gradient-main);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }

  .mobile-menu.active {
    display: block;
  }
}

@media (min-width: 1000px) {
  .mobile-menu {
    display: none !important;
  }

  .hamburger {
    display: none !important;
  }

  .desktop-menu {
    display: flex;
  }
}

@media (max-width: 480px) {
  .fraud-modal {
    padding: 20px;
    font-size: 0.95em;
  }

  .fraud-modal-content button {
    width: 100%;
    font-size: 1em;
  }

  .hero {
    padding: 30px 15px;
  }

  .services,
  .features,
  .cta,
  .about-us {
    padding: 30px 15px;
  }

  .btn {
    padding: 10px 20px;
    font-size: 0.95em;
  }

  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px;
  }

  .loan-column {
    height: 120px;
  }

  .mission img,
  .values img,
  .history img {
    max-height: 200px !important;
  }
}

@media (max-width: 999px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 40px 20px;
  }

  .hero h1,
  .hero h2 {
    font-size: 1.8em;
  }
}