/* ===== Mobile / tablet responsive overrides (shared by all pages) ===== */
html { -webkit-text-size-adjust: 100%; }
img, video, iframe { max-width: 100%; }

.nav-toggle { display: none; }

@media (max-width: 992px) {
  .footer, footer { padding-left: 30px !important; padding-right: 30px !important; }
  .impact-section { padding-top: 120px !important; padding-bottom: 120px !important; }
}

@media (max-width: 768px) {
  body { overflow-x: hidden; }

  /* ---------- Header ---------- */
  header { padding: 20px 15px !important; }
  header h1 { font-size: 1.5rem !important; line-height: 1.25; }
  header p { font-size: 0.85rem !important; line-height: 1.4; }
  .logo-left, header img.logo-left {
    position: static !important; display: block;
    width: 70px !important; margin: 0 auto 10px;
  }

  /* ---------- Navigation (hamburger) ---------- */
  nav { flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch; position: relative; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: #ffd700 !important; color: #000 !important;
    border: none; border-radius: 0 !important; padding: 14px 20px !important;
    font-size: 1.05rem !important; font-weight: bold; cursor: pointer; text-align: left;
  }
  .nav-toggle .bars { font-size: 1.5rem; line-height: 1; }
  nav.js-nav a { display: none !important; }
  nav.js-nav.open a { display: block !important; }
  nav a {
    padding: 14px 20px !important; text-align: left;
    border-top: 1px solid rgba(0,0,0,0.25);
  }

  /* ---------- Generic typography / spacing ---------- */
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem !important; }
  p, li { font-size: 15px; }
  .section, section, .contact-section, .form-container {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  .section { padding-top: 50px !important; padding-bottom: 50px !important; }
  .contact-section { padding: 25px 16px !important; margin: 25px 10px !important; }
  .form-container { padding: 18px !important; }
  section { padding-top: 40px; padding-bottom: 40px; }

  /* ---------- Home page ---------- */
  .impact-section { padding: 50px 12px !important; }
  .impact-section1 { padding: 30px 12px !important; }
  .overlay { padding: 25px 18px !important; display: block !important; }
  .overlay1 { padding: 20px 14px !important; width: 100% !important; flex-direction: column !important; }
  .split-container { gap: 20px !important; flex-direction: column; }
  .split-box { flex: 1 1 100% !important; padding: 20px !important; }
  .team-heading { font-size: 1.7rem !important; }
  .team-container { padding: 20px 5px !important; gap: 15px !important; }
  .team-member { width: calc(50% - 10px) !important; padding: 14px 8px !important; }
  .team-member img { width: 80px !important; height: 80px !important; }
  .team-member h3 { font-size: 14px !important; }
  .team-member p { font-size: 12px !important; }
  .impact-grid { gap: 15px !important; }
  .card { min-width: 0 !important; max-width: 100% !important; }
  .row.g-1 > [class*="col-"] { margin-left: 0 !important; margin-bottom: 15px; padding: 0 15px; }

  /* ---------- About Us ---------- */
  .modern-hero, .section-box { padding: 35px 16px !important; }
  .hero-container { gap: 25px !important; flex-direction: column; text-align: center; }
  .hero-text, .hero-image { flex: 1 1 100% !important; }
  .hero-text h1 { font-size: 2rem !important; }
  .hero-text p { font-size: 16px !important; }
  .section-box h2 { font-size: 1.5rem !important; }
  .info-tab, .feature { flex: 1 1 100% !important; }
  .split-text, .impact-text { flex: 1 1 100% !important; }
  .split-box img { max-width: 100% !important; }
  .carousel img { width: 240px !important; height: 160px !important; }
  .values-container { gap: 25px !important; }
  .value-item { width: 130px !important; }
  .value-item img { width: 110px !important; height: 110px !important; }
  .yellow { font-size: 26px !important; }
  .values-section h2 { font-size: 1.5rem !important; }
  .ceo-image-wrapper { flex: 1 1 100% !important; }
  .ceo-spin-image { width: 140px !important; height: 140px !important; }
  .ceo-message { padding: 15px !important; }

  /* ---------- Services / Careers / Clients ---------- */
  .services-container { padding: 30px 14px !important; gap: 18px !important; }
  .service-card { width: 100% !important; max-width: 420px; }
  .job-section h2 { font-size: 1.6rem !important; }
  .job-box, .job-card { width: 100% !important; max-width: 420px; }
  .job-listings { gap: 18px !important; }
  .job-modal-content { padding: 22px 16px !important; max-height: 90vh; overflow-y: auto; }
  .clients-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .client-logo { max-width: 100% !important; }
  .testimonial-slider { max-width: 100% !important; }
  .testimonial { min-width: 0 !important; }
  .grb-banner { padding: 40px 16px !important; }
  .grb-heading { font-size: 1.6rem !important; }
  .grb-stats-container { flex-direction: column !important; gap: 10px !important; padding: 15px !important; }
  .grb-stat-box { min-width: 0 !important; width: 100% !important; border-right: none !important; }

  /* ---------- Contact ---------- */
  .row:not([class*="g-"]):not(.justify-content-center) { flex-direction: column !important; gap: 15px !important; }
  .contact-info { flex-direction: column; }
  .contact-box { flex: 1 1 100% !important; margin: 8px 0 !important; }
  .captcha-group { flex-wrap: wrap; }
  .map, iframe.map { height: 240px !important; }
  input, select, textarea, button { max-width: 100%; font-size: 16px; } /* 16px stops iOS zoom */
  .testimonial-card { min-width: 0 !important; }
  .whatsapp-chat { bottom: 15px !important; right: 15px !important; transform: scale(0.9); }

  /* ---------- Experience ---------- */
  .hero-experience { padding: 50px 16px !important; }
  .hero-experience h1 { font-size: 1.8rem !important; }
  .card-section { grid-template-columns: 1fr !important; padding: 20px 14px !important; }
  .gallery { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .stats-section { padding: 35px 12px !important; gap: 12px; }
  .stat-box { width: 45% !important; }
  .culture-video, .cta-section { padding: 35px 16px !important; }
  .culture-video iframe { height: 200px !important; }

  /* ---------- Success stories / Blogs ---------- */
  .story-content { flex-direction: column !important; text-align: center; }
  .story-content img { width: 90px !important; margin: 0 auto 10px; }
  .swiper-slide { max-width: 92% !important; }
  .highlight-box { padding: 18px 14px !important; }
  .hero-section { padding: 45px 16px !important; }
  .hero-section h1 { font-size: 1.7rem !important; }
  .blog-grid { grid-template-columns: 1fr !important; padding: 30px 14px !important; }
  .impact-section h2 { font-size: 1.6rem !important; }

  /* ---------- Stats row (Website.html) ---------- */
  .stats { flex-direction: column !important; gap: 20px !important; }

  /* ---------- Footer ---------- */
  .footer, footer { padding: 30px 18px !important; }
  .footer-container { flex-direction: column; gap: 5px; }
  .footer-column { min-width: 0 !important; width: 100%; flex: 1 1 100% !important; }
  .footer-column h3 { font-size: 17px !important; margin-bottom: 12px !important; }
  .social-block { margin-top: 10px; }
  .employee-btn { display: inline-block; font-size: 14px !important; }

  /* ---------- Floating buttons / modals ---------- */
  .scroll-top { bottom: 15px !important; right: 15px !important; font-size: 18px !important; padding: 8px 13px !important; }
  .toggle-darkmode { top: auto !important; bottom: 15px !important; left: 15px !important; right: auto !important; padding: 8px 12px !important; font-size: 13px !important; }
  .modal-content { width: 94% !important; padding: 20px 14px !important; max-height: 90vh; }
  #privacyModal { width: 100%; }
  .container { padding-left: 14px !important; padding-right: 14px !important; }
  table { display: block; overflow-x: auto; }
}

@media (max-width: 400px) {
  header h1 { font-size: 1.3rem !important; }
  .team-member { width: 100% !important; max-width: 260px; }
  .stat-box { width: 100% !important; }
}