/* Estilos para la sección completa */
.about-section {
    display: flex; /* Habilita Flexbox */
    align-items: center; /* Centra verticalmente la imagen y el texto */
    justify-content: center; /* Centra el contenido horizontalmente (si no ocupa todo el ancho) */
    padding: 60px 0; /* Espaciado superior e inferior para la sección */
    gap: 40px; /* Espacio entre la imagen y el texto */
    background-color: #0a011f; /* El color de fondo oscuro de tu sección hero */
    color: #fff; /* Color del texto para que contraste */
    padding: 80px 20px; /* Espaciado vertical y horizontal */
}

/* Contenedor de la imagen */
.about-image-container {
    flex: 0 0 auto; /* No permite que la imagen se estire o encoja automáticamente */
    width: 350px; /* Puedes ajustar el tamaño de la imagen si es necesario */
    max-width: 40%; /* Un ancho máximo relativo al contenedor */
    text-align: center; /* Para centrar la imagen si es más pequeña que su contenedor */
}

    .about-image-container img {
        max-width: 100%; /* Asegura que la imagen sea responsiva y no se desborde */
        height: auto;
        display: block; /* Elimina espacio extra debajo de la imagen */
    }

/* Contenedor del texto */
.about-text-content {
    flex: 1; /* Permite que este div ocupe el espacio restante */
    max-width: 60%; /* Un ancho máximo para el bloque de texto */
    padding-right: 20px; /* Un poco de padding a la derecha si no te gusta tan pegado al borde */
}

    .about-text-content h2 {
        font-size: 36px; /* Tamaño de fuente del título */
        color: #fff; /* Color del título */
        margin-bottom: 20px;
        text-align: left; /* Alineación del título como en tu imagen */
    }

        .about-text-content h2 span {
            color: #ff6b00; /* Color del span dentro del título, ajusta al color de tu diseño */
        }

    .about-text-content p {
        font-size: 0.8em;
        line-height: 1.6;
        margin-bottom: 15px;
        text-align: left; /* Alineación del párrafo como en tu imagen */
    }

/* Media Queries para Responsive Design (muy importante!) */
@media (max-width: 992px) { /* Para tabletas y pantallas más pequeñas */
    .about-section {
        flex-direction: column; /* Apila la imagen y el texto verticalmente */
        text-align: center;
        gap: 30px; /* Reduce el espacio entre elementos apilados */
    }

    .about-image-container,
    .about-text-content {
        max-width: 90%; /* Ocupa casi todo el ancho disponible */
        width: auto; /* Permite que el ancho se ajuste automáticamente */
        padding-right: 0; /* Elimina padding derecho */
    }

        .about-text-content h2,
        .about-text-content p {
            text-align: center; /* Centra el texto en pantallas pequeñas */
        }
}

@media (max-width: 576px) { /* Para móviles */
    .about-section {
        padding: 40px 0;
    }

    .about-image-container {
        width: 250px; /* Reduce el tamaño de la imagen en móviles */
    }

    .about-text-content h2 {
        font-size: 2.2em;
    }

    .about-text-content p {
        font-size: 1em;
    }
}