/*===========================================
  MOBILE MARGIN OPTIMIZATIONS
  Specific margin adjustments for mobile viewports
  to improve vertical spacing and visual balance
===========================================*/

/* Mobile Viewport Optimizations (up to 768px) */
@media (max-width: 768px) {
  
  /* About Section - Decrease top margin to minimize excess whitespace */
  #about.section {
    margin-top: 20px !important; /* Override existing 70px margin */
    padding-top: 40px !important; /* Reduced from default 60px */
  }
  
  /* Our Value Add Section - Reduce both top and bottom margins for compact layout */
  #services.section {
    margin-top: 10px !important; /* Override existing 50px margin */
    margin-bottom: 10px !important; /* Override existing 50px margin */
    padding-top: 45px !important; /* Reduced from existing 70px */
    padding-bottom: 45px !important; /* Reduced from existing 70px */
  }
  
  /* Our Lines of Business Section - Decrease top and bottom margins for improved continuity */
  #business.section {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding-top: 45px !important; /* Reduced from default 60px */
    padding-bottom: 45px !important; /* Reduced from default 60px */
  }
  
  /* Our Technology Partners Section - Reduce top and bottom margins for consistent rhythm */
  #partner.partners-enhanced {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding-top: 45px !important; /* Reduced from default 60px */
    padding-bottom: 45px !important; /* Reduced from default 60px */
  }
}

/* Extra Small Mobile Devices (up to 480px) */
@media (max-width: 480px) {
  
  /* Further optimize for very small screens */
  #about.section {
    margin-top: 15px !important;
    padding-top: 35px !important;
  }
  
  #services.section {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  #business.section {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  
  #partner.partners-enhanced {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* Ensure proper spacing between sections on mobile */
@media (max-width: 768px) {
  
  /* Add subtle separation between sections while maintaining compact layout */
  section + section {
    border-top: 1px solid rgba(0, 160, 223, 0.05);
  }
  
  /* Section headings optimization for mobile */
  .section-heading,
  .section-heading-partners {
    margin-bottom: 20px; /* Reduced from default 30px */
    font-size: 1.5rem; /* Slightly smaller for mobile */
  }
  
  /* Card spacing optimization for mobile */
  .card {
    margin-bottom: 1rem;
  }
  
  /* Grid gap optimization for mobile */
  .row.gy-4 {
    --bs-gutter-y: 1.5rem; /* Reduced gap between cards */
  }
}

/* Tablet Portrait Optimization (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  
  /* Slightly less aggressive margins for tablet portrait */
  #about.section {
    margin-top: 25px !important;
    padding-top: 45px !important;
  }
  
  #services.section,
  #business.section {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  
  #partner.partners-enhanced {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}