/*
 * =========================================================
 *  AGL — COMPLETE MOBILE RESPONSIVE
 *  All breakpoints: 1024px / 768px / 600px / 480px / 380px
 * =========================================================
 */

/* ==========================================================
   1. TRUCK LOADER
========================================================== */
#page-loader {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #0B1F3A !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
#page-loader .loader { width: 200px !important; height: 110px !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: visible !important; transform: none !important; }
#page-loader .truckWrapper { width: 200px !important; height: 100px !important; overflow-x: hidden !important; position: relative !important; }
#page-loader .truckBody { width: 130px !important; }
#page-loader .trucksvg { width: 130px !important; height: auto !important; max-width: 130px !important; }
#page-loader .truckTires { width: 130px !important; }
#page-loader .tiresvg { width: 24px !important; height: 24px !important; max-width: 24px !important; }
#page-loader .lampPost { height: 90px !important; max-height: 90px !important; }
#page-loader .road { width: 100% !important; }
#page-loader .loader-text { color: #C9A14A !important; font-size: 0.85rem !important; font-weight: 600 !important; letter-spacing: 3px !important; text-transform: uppercase !important; margin-top: 18px !important; }

@media (max-width: 768px) {
  #page-loader .loader { width: 160px !important; height: 90px !important; }
  #page-loader .truckWrapper { width: 160px !important; height: 80px !important; }
  #page-loader .truckBody { width: 100px !important; }
  #page-loader .trucksvg { width: 100px !important; max-width: 100px !important; }
  #page-loader .truckTires { width: 100px !important; }
  #page-loader .tiresvg { width: 20px !important; height: 20px !important; }
  #page-loader .lampPost { height: 70px !important; }
  #page-loader .loader-text { font-size: 0.72rem !important; margin-top: 14px !important; }
}
@media (max-width: 480px) {
  #page-loader .loader { width: 140px !important; height: 75px !important; }
  #page-loader .truckWrapper { width: 140px !important; height: 70px !important; }
  #page-loader .truckBody { width: 88px !important; }
  #page-loader .trucksvg { width: 88px !important; max-width: 88px !important; }
  #page-loader .truckTires { width: 88px !important; }
  #page-loader .tiresvg { width: 16px !important; height: 16px !important; }
  #page-loader .lampPost { height: 55px !important; }
  #page-loader .loader-text { font-size: 0.65rem !important; margin-top: 10px !important; letter-spacing: 2px !important; }
}


/* Hide mobile-only nav elements on desktop */
.nav-header,
.nav-close-btn,
.mobile-menu-toggle,
.menu-overlay { display: none; }

/* ==========================================================
   2. HEADER & NAVIGATION — mobile only (≤1024px)
========================================================== */
@media (max-width: 1024px) {

  /* Header bar */
  .header,
  .header.scrolled {
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 16px !important;
    border-radius: 0 !important;
    position: fixed !important;
    z-index: 900 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1) !important;
  }

  /* Hamburger button */
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #0B1F3A, #1e3a5f) !important;
    color: #C9A14A !important;
    border: 2px solid #C9A14A !important;
    font-size: 1.3rem !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
  }
  .mobile-menu-toggle:active { transform: scale(0.92) !important; }

  .cssbuttons-io-button { display: none !important; }

  /* ---- Overlay covers only the area OUTSIDE the sidebar ---- */
  .menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: min(78vw, 310px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 992;
  }
  .menu-overlay.active { display: block; }

  /* ---- Sidebar panel ---- */
  .main-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateX(-105%) !important;
    width: 78vw !important;
    max-width: 310px !important;
    height: 100vh !important;
    background: linear-gradient(160deg, #0B1F3A 0%, #0d2647 60%, #0a1c35 100%) !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 995 !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
  }
  .main-nav.active { transform: translateX(0) !important; }

  /* ---- Nav header (brand + X close button) ---- */
  .nav-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px 16px !important;
    border-bottom: 1px solid rgba(201,161,74,0.25) !important;
    background: rgba(0,0,0,0.2) !important;
    flex-shrink: 0 !important;
  }

  .nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .nav-brand-icon {
    width: 34px !important;
    height: 34px !important;
    background: linear-gradient(135deg, #C9A14A, #e8b85a) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0B1F3A !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
  }
  .nav-brand-text {
    color: #fff !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
  }

  /* X Close button inside nav */
  .nav-close-btn {
    width: 36px !important;
    height: 36px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1.5px solid rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
  }
  .nav-close-btn:active {
    background: rgba(201,161,74,0.3) !important;
    border-color: #C9A14A !important;
    color: #C9A14A !important;
    transform: scale(0.9) !important;
  }

  /* ---- Nav list ---- */
  .main-nav .nav-list {
    flex-direction: column !important;
    gap: 2px !important;
    padding: 12px 12px 30px !important;
    margin: 0 !important;
    list-style: none !important;
    flex: 1 !important;
  }

  .main-nav .nav-list > li {
    margin: 0 !important;
    border-bottom: none !important;
  }

  /* Each nav link row */
  .main-nav .nav-link {
    color: rgba(255,255,255,0.88) !important;
    font-size: 0.98rem !important;
    font-weight: 600 !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 10px !important;
    margin: 2px 0 !important;
    transition: background 0.2s, color 0.2s, padding-left 0.2s !important;
    text-decoration: none !important;
  }
  .main-nav .nav-link:hover,
  .main-nav .nav-link.active {
    background: rgba(201,161,74,0.15) !important;
    color: #C9A14A !important;
    padding-left: 18px !important;
  }
  .main-nav .nav-link::after { display: none !important; }

  /* Chevron icon rotation when dropdown active */
  .main-nav .dropdown.active > .nav-link .fa-chevron-down {
    transform: rotate(180deg) !important;
    color: #C9A14A !important;
  }
  .main-nav .nav-link .fa-chevron-down {
    transition: transform 0.25s ease !important;
    font-size: 0.75rem !important;
    opacity: 0.7 !important;
  }

  /* ---- Dropdown submenu ---- */
  .main-nav .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    background: rgba(255,255,255,0.04) !important;
    border-radius: 8px !important;
    padding: 4px 0 4px 12px !important;
    display: none !important;
    margin: 2px 0 6px !important;
    border-left: 2px solid rgba(201,161,74,0.4) !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
  }
  .main-nav .dropdown.active .dropdown-menu {
    display: block !important;
    max-height: 300px !important;
  }

  .main-nav .dropdown-menu a {
    color: rgba(255,255,255,0.65) !important;
    padding: 9px 14px !important;
    font-size: 0.875rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 7px !important;
    transition: all 0.18s ease !important;
    text-decoration: none !important;
  }
  .main-nav .dropdown-menu a::before {
    content: "›" !important;
    color: #C9A14A !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }
  .main-nav .dropdown-menu a:hover,
  .main-nav .dropdown-menu a:active {
    color: #C9A14A !important;
    background: rgba(201,161,74,0.1) !important;
    padding-left: 18px !important;
  }

  /* Logo */
  .site-logo { height: 42px !important; }
  .logo-text { font-size: 1rem !important; }
}

@media (max-width: 600px) {
  .header, .header.scrolled { padding: 8px 12px !important; }
  .site-logo { height: 36px !important; }
  .logo-text { font-size: 0.85rem !important; max-width: 120px !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
}


/* ==========================================================
   3. HERO SECTION
========================================================== */
@media (max-width: 1024px) {
  .hero { height: auto !important; min-height: 100vh !important; padding-bottom: 40px !important; }
  .hero > .container { height: auto !important; min-height: auto !important; padding-top: 100px !important; }
  .hero-content { max-width: 100% !important; width: 100% !important; }
  .hero-content h1 { font-size: 2.2rem !important; }
}
@media (max-width: 768px) {
  .hero > .container { padding-top: 90px !important; }
  .hero-content h1 { font-size: 1.8rem !important; line-height: 1.25 !important; margin-bottom: 14px !important; }
  .hero-content p { font-size: 0.95rem !important; margin-bottom: 18px !important; line-height: 1.6 !important; }
  .hero-btns { flex-direction: column !important; gap: 10px !important; width: 100% !important; }
  .hero-btns .btn { width: 100% !important; text-align: center !important; padding: 13px 20px !important; font-size: 0.9rem !important; }
  .hero-features { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 20px !important; width: 100% !important; }
  .hero-feature { flex: 1 1 calc(33.33% - 8px) !important; min-width: 85px !important; padding: 8px 6px !important; flex-direction: column !important; text-align: center !important; gap: 4px !important; border-radius: 8px !important; }
  .hero-feature i { font-size: 1.1rem !important; }
  .hero-feature span { font-size: 0.6rem !important; letter-spacing: 0 !important; }
}
@media (max-width: 480px) {
  .hero-content h1 { font-size: 1.55rem !important; }
  .hero-feature { min-width: 75px !important; padding: 6px 4px !important; }
  .hero-feature i { font-size: 1rem !important; }
  .hero-feature span { font-size: 0.55rem !important; }
}


/* ==========================================================
   4. HERO STATS GRID
========================================================== */
@media (max-width: 1024px) {
  .hero-stats { margin-top: 30px !important; }
  .hero-stats .stats-grid { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding: 14px 16px !important; }
}
@media (max-width: 768px) {
  .hero-stats { margin-top: 20px !important; }
  .hero-stats .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; padding: 12px 14px !important; border-radius: 10px !important; }
  .stat-number { font-size: 1.3rem !important; }
  .stat-label { font-size: 0.58rem !important; }
}
@media (max-width: 480px) {
  .hero-stats .stats-grid { padding: 10px !important; gap: 6px !important; }
  .stat-number { font-size: 1.15rem !important; }
}


/* ==========================================================
   5. STATS STRIP (15+, 500+, 2000+, 100%)
========================================================== */
@media (max-width: 768px) {
  .stats-strip { padding: 25px 0 !important; }
  .stats-strip-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 10px !important; }
  .stats-strip-item .stat-num { font-size: 2rem !important; }
  .stats-strip-item .stat-lbl { font-size: 0.72rem !important; }
}
@media (max-width: 480px) {
  .stats-strip { padding: 20px 0 !important; }
  .stats-strip-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 8px !important; }
  .stats-strip-item .stat-num { font-size: 1.7rem !important; }
  .stats-strip-item .stat-lbl { font-size: 0.65rem !important; }
}


/* ==========================================================
   6. TYPOGRAPHY & SPACING
========================================================== */
@media (max-width: 768px) {
  h1 { font-size: 1.9rem !important; }
  h2 { font-size: 1.55rem !important; }
  h3 { font-size: 1.15rem !important; }
  .container { padding: 0 16px !important; }
  .py-5 { padding: 30px 0 !important; }
  section { padding: 30px 0 !important; }
  .stats-section { display: none !important; }
  .btn { padding: 11px 22px !important; font-size: 0.9rem !important; }
  .section-label { flex-wrap: wrap !important; justify-content: center !important; }
}
@media (max-width: 480px) {
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.35rem !important; }
  .container { padding: 0 12px !important; }
  .py-5 { padding: 35px 0 !important; }
  section { padding: 35px 0 !important; }
}


/* ==========================================================
   7. ABOUT SECTION
========================================================== */
@media (max-width: 768px) {
  .about-preview { flex-direction: column !important; gap: 25px !important; }
  .about-img { width: 100% !important; flex: none !important; }
  .about-img::before { display: none !important; }
  .about-img img { width: 100% !important; border-radius: 10px !important; }
  .about-text { width: 100% !important; flex: none !important; }
  .about-features { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}
@media (max-width: 480px) {
  .about-features { grid-template-columns: 1fr !important; gap: 10px !important; }
}


/* ==========================================================
   8. TEAM SECTION (About page)
========================================================== */
@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
  .team-photo-wrapper { height: 320px !important; background: #f8f9fa !important; }
  .team-photo { object-fit: contain !important; object-position: center top !important; }
  .team-photo-placeholder { height: 320px !important; }
}
@media (max-width: 600px) {
  .team-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .team-card { flex-direction: column !important; }
  .team-photo-wrapper { width: 100% !important; height: 280px !important; border-radius: 12px 12px 0 0 !important; background: #f8f9fa !important; }
  .team-photo { width: 100% !important; height: 280px !important; object-fit: contain !important; object-position: center top !important; }
  .team-photo-placeholder { width: 100% !important; height: 280px !important; border-radius: 12px 12px 0 0 !important; font-size: 2.5rem !important; }
  .team-info { padding: 18px 16px !important; }
  .team-info h3 { font-size: 1.1rem !important; }
  .team-role { font-size: 0.8rem !important; }
  .team-bio { font-size: 0.85rem !important; line-height: 1.6 !important; }
}


/* ==========================================================
   9. CERTIFICATIONS GRID (About page)
========================================================== */
@media (max-width: 900px) {
  .cert-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 480px) {
  .cert-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .cert-card { padding: 20px 16px !important; }
  .cert-icon { width: 56px !important; height: 56px !important; font-size: 1.4rem !important; margin: 0 auto 12px !important; }
}


/* ==========================================================
   10. TIMELINE (About page)
========================================================== */
@media (max-width: 768px) {
  .timeline::before { left: 18px !important; }
  .timeline-item,
  .timeline-item:nth-child(odd) { flex-direction: column !important; padding-left: 48px !important; }
  .timeline-item:nth-child(odd) .timeline-content { margin-right: 0 !important; text-align: left !important; }
  .timeline-item:nth-child(even) .timeline-content { margin-left: 0 !important; }
  .timeline-content { width: 100% !important; margin: 0 !important; }
  .timeline-dot { left: 18px !important; top: 4px !important; }
  .timeline-year-badge { left: 38px !important; top: 0 !important; transform: none !important; font-size: 0.65rem !important; }
  .timeline-content h4 { font-size: 1rem !important; }
  .timeline-content p { font-size: 0.85rem !important; }
}


/* ==========================================================
   11. SERVICES GRID
========================================================== */
@media (max-width: 1024px) {
  .services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .service-card { min-height: auto !important; padding: 24px 18px !important; }
  .service-card h3 { font-size: 1.1rem !important; }
  .service-icon-circle { width: 65px !important; height: 65px !important; font-size: 1.6rem !important; margin-bottom: 18px !important; }
  .services-footer-row { grid-template-columns: 1fr !important; gap: 16px !important; }
  .service-btn-modern { width: 100% !important; justify-content: center !important; }
}


/* ==========================================================
   12. INDUSTRIES GRID
========================================================== */
@media (max-width: 1024px) {
  .industries-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
}
@media (max-width: 600px) {
  .industries-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .industry-card { min-height: 200px !important; }
}


/* ==========================================================
   13. WHY CHOOSE / FEATURES
========================================================== */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .why-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .about-features { grid-template-columns: 1fr !important; }
  .bg-subtle-gradient .about-preview { flex-direction: column !important; gap: 30px !important; }
  .bg-subtle-gradient .about-img,
  .bg-subtle-gradient .about-text { flex: none !important; width: 100% !important; }
}
@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .why-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .why-card { padding: 16px 14px !important; }
  .feature-item { gap: 14px !important; }
  .feature-icon { width: 48px !important; height: 48px !important; font-size: 1.2rem !important; }
}


/* ==========================================================
   14. PROCESS STEPS
========================================================== */
@media (max-width: 768px) {
  .process-steps { flex-direction: column !important; gap: 20px !important; }
  .process-steps::before { display: none !important; }
  .step { width: 100% !important; min-width: auto !important; margin-bottom: 0 !important; }
  .step-number { width: 60px !important; height: 60px !important; font-size: 1.2rem !important; }
}


/* ==========================================================
   15. PAGE HEADER (inner pages banner)
========================================================== */
@media (max-width: 1024px) {
  .page-header { padding: 120px 0 40px !important; }
  .page-header h1 { font-size: 2rem !important; }
}
@media (max-width: 768px) {
  .page-header { padding: 100px 0 35px !important; }
  .page-header h1 { font-size: 1.7rem !important; }
  .breadcrumb { font-size: 0.85rem !important; flex-wrap: wrap !important; }
}
@media (max-width: 480px) {
  .page-header { padding: 90px 0 28px !important; }
  .page-header h1 { font-size: 1.4rem !important; }
}


/* ==========================================================
   16. BLOG PAGE
========================================================== */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}
@media (max-width: 600px) {
  .blog-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .blog-card-img { height: 200px !important; }
  .blog-card-body { padding: 18px 16px !important; }
  .blog-card-title { font-size: 1rem !important; }
  .blog-card-excerpt { font-size: 0.85rem !important; }
  .blog-tag { font-size: 0.65rem !important; padding: 3px 8px !important; }
}


/* ==========================================================
   17. CAREERS PAGE
========================================================== */
@media (max-width: 768px) {
  .job-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 18px 16px !important;
  }
  .job-card-left { width: 100% !important; }
  .job-title { font-size: 1rem !important; }
  .job-tags { flex-wrap: wrap !important; gap: 6px !important; }
  .job-tag { font-size: 0.7rem !important; padding: 3px 8px !important; }
  .job-apply-btn { width: 100% !important; text-align: center !important; justify-content: center !important; }

  .perks-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  .perk-card { padding: 20px 14px !important; }
  .perk-icon { width: 52px !important; height: 52px !important; font-size: 1.3rem !important; }
  .perk-card h4 { font-size: 0.95rem !important; }
}
@media (max-width: 480px) {
  .perks-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .job-card { padding: 14px 12px !important; }
}


/* ==========================================================
   18. INFRASTRUCTURE PAGE
========================================================== */
@media (max-width: 1024px) {
  .infra-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 600px) {
  .infra-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .infra-card { padding: 20px 16px !important; }
  .infra-icon { width: 54px !important; height: 54px !important; font-size: 1.4rem !important; }
  .infra-card h4 { font-size: 1rem !important; }
  .infra-card p { font-size: 0.85rem !important; }
}


/* ==========================================================
   19. SAFETY PAGE
========================================================== */
@media (max-width: 1024px) {
  .safety-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
}
@media (max-width: 600px) {
  .safety-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .safety-card { padding: 20px 16px !important; }
  .safety-icon { width: 54px !important; height: 54px !important; font-size: 1.4rem !important; }
  .safety-card h4 { font-size: 1rem !important; }
}

/* ==========================================================
   20. SERVICES PAGE (enhanced)
========================================================== */
@media (max-width: 1024px) {
  .service-detail-block { grid-template-columns: 1fr !important; gap: 30px !important; padding: 50px 0 !important; direction: ltr !important; }
  .service-detail-block.reverse { direction: ltr !important; }
  .service-detail-img img { height: 280px !important; }
  .why-agl-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .services-stats-banner .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
  .process-steps { flex-direction: column !important; gap: 24px !important; }
  .process-steps::before { display: none !important; }
  .process-step { text-align: left !important; display: flex !important; align-items: flex-start !important; gap: 16px !important; }
  .process-step .step-circle { width: 50px !important; height: 50px !important; flex-shrink: 0 !important; margin: 0 !important; font-size: 1.1rem !important; }
}
@media (max-width: 600px) {
  .service-detail-block { padding: 36px 0 !important; gap: 24px !important; }
  .service-detail-img img { height: 220px !important; }
  .service-detail-content h2 { font-size: 1.4rem !important; }
  .service-detail-content .service-number { font-size: 2.8rem !important; }
  .service-features-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .why-agl-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .why-agl-card { padding: 22px 18px !important; }
  .services-stats-banner .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .services-stats-banner .stat-item .stat-num { font-size: 1.8rem !important; }
  .service-badge { font-size: 0.75rem !important; padding: 6px 14px !important; }
}


/* ==========================================================
   20. CONTACT PAGE
========================================================== */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 25px !important; }
  .contact-form { padding: 22px 16px !important; }
  .form-row { flex-direction: column !important; gap: 0 !important; }
  .contact-map iframe { height: 250px !important; }
}


/* ==========================================================
   21. PROJECTS / CASE STUDIES
========================================================== */
@media (max-width: 768px) {
  .case-study { flex-direction: column !important; }
  .case-img img { min-height: 200px !important; max-height: 280px !important; }
  .case-content { padding: 22px 18px !important; }
  .case-content h3 { font-size: 1.25rem !important; }
  .challenge-solution { grid-template-columns: 1fr !important; }
}


/* ==========================================================
   22. FOOTER
========================================================== */
@media (max-width: 768px) {
  .footer { padding-top: 30px !important; text-align: center !important; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .footer-col { display: flex !important; flex-direction: column !important; align-items: center !important; }
  .footer-site-logo { height: 45px !important; margin: 0 auto 10px !important; }
  .footer-desc { font-size: 0.8rem !important; margin: 10px 0 !important; }
  .footer h4 { font-size: 0.9rem !important; margin-bottom: 10px !important; padding-bottom: 5px !important; }
  .footer h4::after { left: 50% !important; transform: translateX(-50%) !important; }
  .footer ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; width: 100% !important; margin-bottom: 10px !important; }
  .footer ul li { margin-bottom: 0 !important; }
  .footer ul li a { font-size: 0.8rem !important; display: block !important; padding: 5px !important; }
  .social-links { justify-content: center !important; display: flex !important; gap: 10px !important; margin-bottom: 15px !important; }
  .social-links a { margin-right: 0 !important; width: 32px !important; height: 32px !important; line-height: 32px !important; font-size: 0.8rem !important; }
  .contact-info-list { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 5px !important; }
  .contact-info-list li { font-size: 0.8rem !important; justify-content: center !important; text-align: center !important; margin-bottom: 0 !important; }
  .footer-bottom { font-size: 0.7rem !important; padding: 8px 0 !important; margin-top: 10px !important; }
}


/* ==========================================================
   23. SERVICE DETAIL PAGES
========================================================== */
@media (max-width: 768px) {
  .service-detail-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .service-features-list { columns: 1 !important; }
}


/* ==========================================================
   24. CTA SECTION
========================================================== */
@media (max-width: 768px) {
  .cta-section { padding: 40px 16px !important; text-align: center !important; }
  .cta-section h2 { font-size: 1.5rem !important; }
  .cta-section p { font-size: 0.9rem !important; margin-bottom: 22px !important; }
  .cta-section .btn { display: block !important; width: 100% !important; max-width: 280px !important; margin: 0 auto !important; }
}
@media (max-width: 480px) {
  .cta-section h2 { font-size: 1.3rem !important; }
}


/* ==========================================================
   25. WHY CHOOSE US SECTION (homepage)
========================================================== */
@media (max-width: 768px) {
  section[style*="background-image"] > .container-fluid > div { flex-direction: column !important; gap: 20px !important; }
  section[style*="background-image"] > .container-fluid > div > div[style*="flex: 0.9"] { flex: none !important; width: 100% !important; min-width: 0 !important; }
  section[style*="background-image"] > .container-fluid > div > div[style*="flex: 0.9"] img { max-height: 300px !important; object-fit: cover !important; width: 100% !important; }
  section[style*="background-image"] > .container-fluid > div > div[style*="flex: 2"] { flex: none !important; width: 100% !important; min-width: 0 !important; }
  section[style*="background-image"] h2 { font-size: 1.8rem !important; }
  .why-card[style*="calc(33.333%"] { flex: 1 1 100% !important; min-width: 0 !important; }
  .why-card[style*="calc(40%"] { flex: 0 1 100% !important; min-width: 0 !important; }
  section[style*="background-image"] div[style*="background: #ffffff"] { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; padding: 18px 16px !important; }
  .footer-feature-item { width: 100% !important; justify-content: flex-start !important; }
}
@media (max-width: 480px) {
  section[style*="background-image"] h2 { font-size: 1.5rem !important; }
  section[style*="background-image"] .why-card { padding: 18px 14px !important; }
  section[style*="background-image"] .container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
}


/* ==========================================================
   26. GLOBAL OVERFLOW PREVENTION
========================================================== */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  img, svg, video, canvas, iframe { max-width: 100% !important; }
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; }
  * { -webkit-tap-highlight-color: transparent; }
}


/* ==========================================================
   27. IOS FIXES & TOUCH POLISH
========================================================== */
@supports (-webkit-overflow-scrolling: touch) {
  section[style*="background-attachment: fixed"],
  section[style*="background-attachment:fixed"] {
    background-attachment: scroll !important;
  }
}

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  textarea,
  select { font-size: 16px !important; }

  .nav-link,
  .dropdown-menu a,
  .btn,
  .read-more,
  .service-btn-modern,
  .social-links a { min-height: 44px; display: inline-flex; align-items: center; }
  .nav-link { min-height: 48px; }
}


/* ==========================================================
   28. WHATSAPP BUTTON
========================================================== */
.whatsapp-float {
  position: fixed !important;
  z-index: 999999 !important;
  display: flex !important;
}


/* ==========================================================
   29. VERY SMALL PHONES (≤380px)
========================================================== */
@media (max-width: 380px) {
  .header, .header.scrolled { padding: 6px 10px !important; }
  .logo-text { display: none !important; }
  .site-logo { height: 34px !important; }
  .hero-content h1 { font-size: 1.35rem !important; }
  .hero-feature { min-width: 65px !important; }
  .hero-feature span { font-size: 0.5rem !important; }
  section { padding: 28px 0 !important; }
  .container { padding: 0 10px !important; }
  .cert-grid { grid-template-columns: 1fr !important; }
  .perks-grid { grid-template-columns: 1fr !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================
   30. CLIENT MARQUEE — responsive card sizes
========================================================== */
@media (max-width: 480px) {
  .clients-marquee-section { padding: 24px 0 20px; }
  .client-card { width: 130px; padding: 14px 16px 10px; }
  .client-logo-wrap { height: 48px; }
  .client-logo-img { max-height: 38px; max-width: 100px; }
  .client-card-name { font-size: 0.65rem; }
}
@media (max-width: 380px) {
  .client-card { width: 110px; padding: 12px 12px 8px; }
  .client-logo-wrap { height: 40px; }
  .client-logo-img { max-height: 32px; max-width: 86px; }
  .client-card-name { font-size: 0.6rem; }
}

/* ==========================================================
   31. "WHY CHOOSE US" & INLINE FLEX MIN-WIDTH OVERRIDES
========================================================== */
@media (max-width: 768px) {
  /* Prevent horizontal overflow from inline min-width styles */
  .industries-grid > div,
  section [style*="min-width: 350px"],
  section [style*="min-width: 320px"],
  section [style*="min-width:350px"],
  section [style*="min-width:320px"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* About features 2-col grid → single col */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Contact map height */
  iframe[src*="google.com/maps"] { height: 260px !important; }
  /* Footer gap */
  .footer-grid { gap: 20px !important; }
  /* Section inline gap overrides */
  section [style*="gap: 60px"] { gap: 30px !important; }
  section [style*="gap: 50px"] { gap: 24px !important; }
}
@media (max-width: 480px) {
  iframe[src*="google.com/maps"] { height: 220px !important; }
  section [style*="gap: 60px"] { gap: 20px !important; }
  .footer-grid { gap: 16px !important; }
}