/*-----------------------------------*\
  #service.css
\*-----------------------------------*/

/**
 * 
 */
 
/**
 * TABLE OF CONTENT
 *
 * COMPONENTS
 * Card...........................Cards style
 * Btn............................Button style
 *
 * MAIN CONTENT
 * Service........................Service style
 * Media queries..................Responsive for all devices
 */





/*-----------------------------------*\
  #COMPONENTS
\*-----------------------------------*/

@import url('../components/card.css');
@import url('../components/btn.css');





/*-----------------------------------*\
  #SERVICES
\*-----------------------------------*/

.service { 
  padding-block-start: calc(var(--section-padding) + 60px); 
  height: 100%;
  box-sizing: border-box;
  /* Removed overflow: auto and min-height: 0 to allow ion-content to handle scrolling */
}

.service-list {
  display: grid;
  gap: 25px;
  /* Removed min-height: 0 to avoid restricting scroll */
}

.card-title { margin-block-end: 10px; }

.card ion-icon { font-size: 3.2rem; }

.card .body-sm { color: var(--jet); }





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for large than 768px screen
 */

@media (min-width: 768px) {

  .service-list { grid-template-columns: 1fr 1fr; }

}

/*-----------------------------------*\
  #SCROLLBAR STYLES
\*-----------------------------------*/


ion-content .inner-scroll,
ion-content .scroll-content {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE 10+ */
}

ion-content .inner-scroll::-webkit-scrollbar,
ion-content .scroll-content::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}