/* Responsive helper stylesheet shared across pages */

/* Make images fluid by default */
img { max-width: 100%; height: auto; display: block; }

/* Contact info styles */
.contact-info-text { font-size: 0.95em; color: var(--text-muted); margin-bottom: 30px; }

/* Avatar gradient styles */
.avatar-gradient-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.avatar-gradient-2 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.avatar-gradient-3 { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.logo-img { max-height: 56px; width: auto; }
.partner-logo { max-width: 120px; height: auto; }
.hero-visual img { max-width: 100%; height: auto; }

/* Nav toggle button (hidden on desktop) */
.nav-toggle { display: none; background: none; border: none; color: var(--primary, #0066ff); font-size: 1.4rem; cursor: pointer; }

/* Layout adjustments for tablet and smaller */
@media (max-width: 900px) {
  .header .container { align-items: center; }
  .nav { display: none; position: absolute; top: 72px; right: 16px; background: rgba(0,0,0,0.9); padding: 18px; border-radius: 8px; flex-direction: column; gap: 10px; z-index: 999; min-width: 200px; }
  .nav a { display: block; color: white; padding: 8px 0; }
  .nav.active { display: flex; }
  .nav-toggle { display: inline-flex; align-items: center; gap: 8px; }

  /* Header spacing */
  .header { padding: 14px 0; }
  .logo-text { display: none; }

  /* Hero stacks vertically */
  .hero .container { flex-direction: column-reverse; align-items: stretch; gap: 24px; }
  .hero-text, .hero-visual { width: 100%; }

  /* Grids stack to fewer columns */
  .services-grid, .testimonials-grid, .partners-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-gap: 18px; }

  /* Contact layout */
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Smaller partner logos */
  .partner-logo { max-width: 90px; }
}

/* Mobile tweaks */
@media (max-width: 480px) {
  :root { font-size: 14px; }
  .logo-img { max-height: 44px; }
  .hero h2 { font-size: 1.4rem; }
  .btn { padding: 10px 12px; font-size: 0.95rem; }
  .partner-logo { max-width: 72px; }
  .testimonial-card .avatar { width: 48px; height: 48px; }
  .nav { right: 10px; top: 64px; min-width: 160px; padding: 14px; }
}