/* 
 * Services Section Mobile Spacing
 * Adds a small gap between service items in the mobile view only
 * This creates better visual separation between service cards without affecting desktop layout
 */

/* Only apply these styles on mobile devices */
@media screen and (max-width: 767px) {
  /* Add vertical spacing between service items */
  #Services .w-layout-grid > div {
    margin-bottom: 40px !important; /* Increase space between service items */
  }
  
  /* Add space between image and title */
  #Services .utility-aspect-3x2.utility-margin-bottom-2rem {
    margin-bottom: 1.5rem !important; /* Space between image and title */
  }
  
  /* Add space between title and description */
  #Services .h4-heading {
    margin-bottom: 1rem !important; /* Space between title and description */
  }
  
  /* Add more distinct separation between items with subtle divider */
  #Services .w-layout-grid > div:not(:last-child):after {
    content: '';
    display: block;
    height: 1px;
    background-color: rgba(200, 200, 200, 0.1);
    margin-top: 20px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}