@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    font-family: 'Poppins', sans-serif; /* Fuente principal del cuerpo */
    background-color: #f0f0f0; /* Color de fondo del cuerpo */
}

.header {
    background-color: #ffffff; /* Color de fondo del encabezado */
    padding: 20px; /* Relleno del encabezado */
    border-bottom: 1px solid #ddd; /* Borde inferior del encabezado */
    text-align: center; /* Alineación centrada del texto en el encabezado */
}

.header nav a {
    margin: 0 15px; /* Margen entre enlaces de navegación */
    text-decoration: none; /* Sin subrayado en los enlaces */
    color: #333; /* Color del texto de los enlaces */
}

.header .home {
    font-weight: bold; /* Texto en negrita */
    color: #555; /* Color del texto */
}

/* Ajustes específicos para la sección "About Us" */
.about-us {
    display: flex; /* Usamos flexbox para la disposición de los elementos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
    gap: 10px; /* Espacio entre los cuadros */
    padding: 20px; /* Relleno alrededor de la sección */
    justify-content: center; /* Alineación centrada de los elementos */
}

.card {
    background-color: #ffffff; /* Color de fondo de las tarjetas */
    border-radius: 10px; /* Esquinas redondeadas de las tarjetas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra de las tarjetas */
    width: calc(30% - 10px); /* Ancho ajustado para que quepan 4 tarjetas en una línea */
    padding: 15px; /* Relleno dentro de las tarjetas */
    display: flex; /* Usamos flexbox dentro de las tarjetas */
    align-items: center; /* Alineación vertical centrada del contenido */
    justify-content: space-between; /* Espacio entre el contenido de las tarjetas */
}

.card img {
    width: 100px; /* Ancho ajustado de la imagen */
    height: 75px; /* Altura ajustada de la imagen */
    background-color: #ddd; /* Color de fondo de la imagen (por defecto) */
    margin-right: 10px; /* Margen a la derecha de la imagen */
    border-radius: 10px; /* Esquinas redondeadas de la imagen */
}

.card-content {
    text-align: center; /* Alineación centrada del texto */
    width: calc(100% - 100px - 10px); /* Ancho ajustado para el contenido textual */
    display: flex; /* Usamos flexbox para disposición del contenido */
    flex-direction: column; /* Disposición en columna */
    justify-content: center; /* Alineación centrada del contenido */
}

.card-content h3 {
    margin: 0; /* Sin margen alrededor del título */
    font-size: 1em; /* Tamaño de fuente del título ajustado */
    font-weight: 600; /* Peso de la fuente */
    color: #333; /* Color del texto del título */
}

.card-content p {
    margin: 5px 0 0; /* Margen superior alrededor del párrafo */
    font-size: 0.8em; /* Tamaño de fuente del párrafo ajustado */
    color: #666; /* Color del texto del párrafo */
}

/* Sección de servicios, sin cambios */
.services {
    display: flex; /* Usamos flexbox para la disposición de los elementos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
    gap: 20px; /* Espacio entre los cuadros */
    padding: 20px; /* Relleno alrededor de la sección */
    justify-content: center; /* Alineación centrada de los elementos */
}

/* Sin cambios en la clase section-title */
.section-title {
    width: 100%;
    font-size: 1.7em;
    margin-bottom: 10px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: Bold;
    color: #151515;
}

/* Sin cambios en los cuadros de servicios */
.service-card {
    display: flex;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: calc(33.333% - 20px);
    overflow: hidden;
    align-items: center;
}

.service-card img {
    width: 50%;
    object-fit: cover;
}

.service-info {
    padding: 10px;
    width: 50%;
}

.service-info h3 {
    margin: 0;
    font-size: 1em;
    font-weight: bold;
    color: #333;
}

.service-info p {
    font-size: 0.9em;
    color: #666;
}