/* ==========================================================================
   Servora - Mobile Responsive Custom CSS
   Note: Most of the responsive styling is handled via Tailwind CSS utility 
   classes (e.g., md:, lg:, sm:) directly in the HTML.
   This file contains custom @media queries and mobile-specific overrides.
   ========================================================================== */

/* ----------------------------------------
   Global / Navbar
   Source: components/navbar.css
---------------------------------------- */
/* Mobile Link Active State for Sidebar/Drawer */
.global-mobile-link.active {
  color: #2563EB;
  border-left-width: 4px;
  border-left-color: #FF7A00;
  padding-left: 0.75rem;
}


/* ----------------------------------------
   AMC Page
   Source: html_folder/amc.html
---------------------------------------- */
@media (max-width: 767px) { 
  .process-connector::after { 
    display: none; 
  } 
}


/* ----------------------------------------
   How It Works Page
   Source: html_folder/how-it-works.html
---------------------------------------- */
@media (max-width: 767px) { 
  .process-connector::after { 
    display: none; 
  } 
}


/* ----------------------------------------
   Workforce Solutions Page
   Source: html_folder/workforce.html
---------------------------------------- */
@media (max-width: 767px) { 
  .process-connector::after { 
    display: none; 
  } 
}


/* ----------------------------------------
   Careers Page
   Source: html_folder/careers.html
---------------------------------------- */
/* Hide process step connector line on mobile */
@media (max-width: 767px) {
  .process-step::after {
    display: none;
  }
}

/* Adjust illustration size on tablets */
@media (max-width: 768px) { 
  .so-illus-outer { 
    width: 220px; 
  } 
}

/* Adjust illustration size on mobile phones */
@media (max-width: 480px) { 
  .so-illus-outer { 
    width: 170px; 
  } 
}

/* Accessibility: Disable animations for users preferring reduced motion */
@media (prefers-reduced-motion: reduce) {
  .so-illus-wrap, .so-sign-group, .so-plant-leaf,
  .so-dot-a, .so-dot-b, .so-dot-c, .so-shadow { 
    animation: none !important; 
  }
}