/* Styles for the main list */
.services-content-mainlist {
    list-style-type: none; /* Remove default bullet points */
    margin-left: 20px; /* Reset margin to default */
    padding-left: 0; /* Reset padding to default */
    color: #333; /* Dark color for main list items */
}

/* Styles for the sublist */
.services-content-sublist {
    list-style-type:circle; /* Circle bullet points for sub-list */
    margin-left: 30px; /* Additional indentation for sub-list */
    padding-left: 10px; /* Space between bullet and text */
	font-size: 18px;
    color: #333; /* Lighter color for sub-list items */
    margin-bottom: 20px; /* Add space between sublists */
}

/* Styles for Sublist Category Name */
.services-content-sublist-name {
    font-weight: bold; /* Ensure text is bold */
    font-size: 1.1em; /* Keep the font size consistent with the main text */
    color: #555; /* Neutral color for the category name */
    display: block; /* Makes the element take the full width for better layout */
    margin-bottom: 15px; /* Add space between the category name and the sublist */
    margin-top: 10px; /* Add space between the category name and the sublist */
    cursor: default; /* Default cursor to indicate it's not interactive */
}

.services-content-h2 {
    font-weight: bold; /* Ensure text is bold */
    font-size: 1.5em; /* Keep the font size consistent with the main text */
    color: #555; /* Neutral color for the category name */
    display: block; /* Makes the element take the full width for better layout */
    padding-bottom: 0.75em;
    cursor: default; /* Default cursor to indicate it's not interactive */
}

/* Styles for Sublist Category Name */
.services-content-h3 {
    font-weight: bold; /* Ensure text is bold */
    font-size: 1.10em; /* Keep the font size consistent with the main text */
    color: #555; /* Neutral color for the category name */
    display: block; /* Makes the element take the full width for better layout */
    margin-bottom: 5px; /* Add space between the category name and the sublist */
    padding-bottom: 1em;
    line-height: 1.6em;
    text-decoration: none !important;
}

.services-content-h4 {
    font-weight: bold; /* Ensure text is bold */
    font-size: 1em; /* Keep the font size consistent with the main text */
    color: #555; /* Neutral color for the category name */
    display: block; /* Makes the element take the full width for better layout */
    padding-bottom: 0.5em;
    cursor: default; /* Default cursor to indicate it's not interactive */

}

.services-section {
  display: flex;
  flex-direction: row;       /* ✅ define la fila */
  align-items: stretch;      /* alinea ambas columnas a la misma altura */
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;       /* espacio entre filas */
  box-sizing: border-box;
}

.services-image-center {
  display: flex;                 /* activa flexbox */
  align-items: center;           /* centra verticalmente */
  justify-content: center;       /* centra horizontalmente */
  width: 100%;                   /* ocupa todo el ancho disponible */
  height: 100%;                  /* o una altura fija si quieres */
  max-width: 60%;                /* ✅ limita el ancho total del bloque */
  margin: 0 auto;                /* centra el bloque dentro del padre */
  box-sizing: border-box;
}

.services-image-center img {
  max-width: 100%;               /* la imagen nunca excede el contenedor */
  height: auto;                  /* mantiene proporciones */
  object-fit: contain;           /* ajusta dentro del contenedor */
  display: block;
}

.services-image {
  flex: 0 0 20%;             /* ✅ columna fija del 20% */
  max-width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.services-image img {
  width: 100%;
  height: auto;              /* mantiene proporciones */
  object-fit: contain;
  display:block;
}

.services-content {
  flex: 0 0 80%;             /* ✅ columna del 80% */
  max-width: 80%;
  padding-left: 20px;
  box-sizing: border-box;
  text-align: justify;
}

/* =========================
   1200px
========================= */
@media (max-width: 1200px) {

  .services-content {
    padding-left: 18px;
  }

  .services-image {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .services-content {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .services-content-h2 {
    font-size: 1.4em;
  }

  .services-content-sublist {
    font-size: 17px;
  }
}


/* =========================
   1100px
========================= */
@media (max-width: 1100px) {

  .services-content {
    padding-left: 15px;
  }

  .services-content-h2 {
    font-size: 1.3em;
  }

  .services-content-h3 {
    font-size: 1em;
  }

  .services-content-sublist {
    font-size: 16px;
  }
}


/* =========================
   900px (tablet)
========================= */
@media (max-width: 900px) {

  .services-section {
    flex-direction: column; /* 🔥 cambio clave */
    align-items: center;
  }

  .services-image {
    flex: none;
    max-width: 120px;
    margin-bottom: 12px;
  }

  .services-content {
    flex: none;
    max-width: 100%;
    padding-left: 0;
    text-align: left; /* 🔥 mejor lectura */
  }

  .services-content-h2 {
    font-size: 1.2em;
    text-align: center;
  }

  .services-content-sublist {
    font-size: 15px;
    margin-left: 20px;
  }
}


/* =========================
   600px (mobile)
========================= */
@media (max-width: 600px) {

  .services-section {
    margin-bottom: 15px;
  }

  .services-image {
    max-width: 90px;
  }

  .services-content {
    text-align: left;
  }

  .services-content-h2 {
    font-size: 1.1em;
  }

  .services-content-h3 {
    font-size: 0.95em;
  }

  .services-content-h4 {
    font-size: 0.9em;
  }

  .services-content-sublist {
    font-size: 14px;
    margin-left: 15px;
    padding-left: 5px;
  }

  .services-content-mainlist {
    margin-left: 10px;
  }

  .services-content-sublist-name {
    font-size: 0.95em;
    margin-bottom: 10px;
  }

  .services-image-center {
    max-width: 100%;
  }
}