/* ==========================================================================
   عين الرافدين | Ain Al-Rafidain - Responsive Design Styles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Large Desktop Screens (> 1400px)
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
  .hero-content {
    max-width: 900px;
  }
}

/* --------------------------------------------------------------------------
   2. Tablets & Small Laptops (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .desktop-nav,
  .header-actions .btn {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .intro-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .intro-visual-side {
    order: -1;
  }

  .intro-image-main {
    height: 400px;
  }

  .intro-floating-badge {
    bottom: -15px;
    right: 15px;
  }

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

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

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

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

  .quality-split-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .quality-visual-wrapper {
    order: -1;
  }

  .quality-image-main {
    height: 380px;
  }

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

/* --------------------------------------------------------------------------
   3. Mobile Devices & Small Tablets (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  :root {
    --header-height: 74px;
    --header-height-scrolled: 64px;
  }

  .hero-slider-section {
    min-height: 660px;
  }

  .hero-title {
    font-size: 2.15rem;
  }

  .hero-desc {
    font-size: 1rem;
    margin-bottom: var(--spacing-lg);
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-bottom: 60px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .slider-indicators {
    display: none;
  }

  .hero-controls-inner {
    justify-content: center;
  }

  .intro-highlights {
    grid-template-columns: 1fr;
  }

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

  .why-us-grid {
    grid-template-columns: 1fr;
  }

  .process-steps-grid {
    grid-template-columns: 1fr;
  }

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

  .form-grid .form-full-width {
    grid-column: span 1;
  }

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

  .footer-bottom-row {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .cta-title {
    font-size: 1.85rem;
  }

  .cta-actions-row {
    flex-direction: column;
    width: 100%;
  }

  .cta-actions-row .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   4. Small Mobile Phones (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .brand-title {
    font-size: 1.15rem;
  }

  .brand-subtitle {
    font-size: 0.65rem;
  }

  .brand-symbol {
    width: 38px;
    height: 38px;
  }

  .intro-image-main {
    height: 300px;
  }

  .intro-floating-badge {
    position: static;
    max-width: 100%;
    margin-top: var(--spacing-md);
  }

  .project-media-wrapper {
    height: 240px;
  }

  .quality-image-main {
    height: 280px;
  }

  .modal-dialog {
    max-height: 95vh;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-md);
  }
}