@media (max-width: 1024px) {
  section#expertise {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  section#expertise .max-w-7xl {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}
@media (max-width: 767px) {
  .grid {
    justify-content: center !important;
  }
  .grid > div:first-child {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    width: 100% !important;    
  }
  /* .grid > div:first-child * {
    text-align: center !important;
  } */
}
/* ============================================
   MOBILE SPACING FIXES
   Removes extra padding/margins on mobile
   ============================================ */

/* Hero Section - Remove extra spacing on mobile */
@media (max-width: 768px) {
  /* Main hero section spacing fix */
  section.relative.min-h-\[95vh\] {
    min-height: auto !important;
    padding: 60px 16px 30px 16px !important;
  }
  
  /* Remove extra padding from inner container */
  section.relative.min-h-\[95vh\] .max-w-7xl {
    padding: 0 !important;
  }
  
  /* Fix py-12 and py-24 classes on mobile */
  section.relative.min-h-\[95vh\] .py-12,
  section.relative.min-h-\[95vh\] .md\:py-24 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Remove gap from grid */
  section.relative.min-h-\[95vh\] .grid {
    gap: 20px !important;
  }
}

/* Reviews Section - Remove extra spacing on mobile */
@media (max-width: 768px) {
  /* Reviews section spacing */
  section.px-6.py-24.md\:py-48.bg-zinc-50,
  section[data-section="reviews"] {
    padding: 30px 16px !important;
  }
  
  /* Reviews carousel container */
  .reviews-carousel {
    padding: 0 !important;
    margin: 0 auto !important;
  }
  
  /* Remove extra margins from sections */
  section.bg-zinc-50 .max-w-7xl {
    padding: 0 !important;
  }
  
  /* Fix header spacing */
  section.bg-zinc-50 .mb-24 {
    margin-bottom: 20px !important;
  }
}

/* Header - Make sure it doesn't add extra space */
@media (max-width: 768px) {
  .main-header {
    padding: 10px 16px !important;
  }
}

/* General mobile spacing cleanup */
@media (max-width: 768px) {
  /* Remove excessive padding from all sections */
  section.px-6 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  
  /* Reduce vertical padding on all sections */
  section.py-24,
  section.py-48 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  
  /* Fix container padding */
  .max-w-7xl,
  .max-w-4xl {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Form grid - single column on mobile */
  form .grid.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  
  /* Labels inside space-y-1 - force left align */
  form .space-y-1 label {
    text-align: left !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}