body{
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Oculta cualquier desbordamiento horizontal */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

* {
    box-sizing: border-box; /* Asegura que el padding se incluya en el ancho */
}
.mapa1 {
    align-items: center;
    text-align: center;
}

.services__item2 h5{
    color: yellow;
    font-size: 70px;
}


@media (max-width: 929px) {
    .mapa1 img {
        max-width: 100%; /* Las imágenes no deben exceder el ancho del contenedor */
        height: auto;
    }
    .mapa1 {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        top: 30px;
        box-sizing: border-box;
    }

    .team {
        padding-top: 0;
        width: 100%;
        height: 1700px;
    }
    .team-content {
        flex-direction: column; /* Columnas para pantallas pequeñas */
        align-items: center;
    }

    .services__item2 {
        max-width: 90%; /* Tarjetas más pequeñas en móviles */
        text-align: center;
    }

    .team-image {
        text-align: center;
        align-items: center;
        position: relative;
    }
}

@media (max-width: 660px) {
    .mapa1 {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding-top: 20px;
        box-sizing: border-box;
        text-align: center;
        width: fit-content;
    }

    .mapa1 .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* Centra las columnas horizontalmente */
        gap: 100px; /* Espacio opcional entre columnas */
    }

    .team {
        padding-top: 0;
        width: 100%;
        height: 2700px;
    }

    .team-image {
        display: flex; /* Asegura que align-items tenga efecto */
        align-items: center;
        justify-content: center; /* Centra la imagen horizontalmente */
        width: 100%;
        height: 500px;
        overflow: hidden; /* Oculta cualquier desborde */
    }

    .team-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* O usa cover si quieres que la imagen cubra todo el área */
    }

    .team-content {
        text-align: center;
        height: 100%;
        width: 100%;
        height: 500px;
    }
}

@media (max-width: 344px) {
    .mapa1 {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding-top: 20px;
        box-sizing: border-box;
    }
    .team {
        padding-top: 0;
        width: 100%;
        height: 2700px;
    }
}