.about {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background1);
    padding: 7rem 0;
}

.about_background {
    display: grid;
    grid-template-columns: minmax(200px, 562px) minmax(300px, 662px);
    column-gap: 32px; 
    justify-content: center; 
    align-content: center; 
    max-width: 1250px;
    width: 100%;
}

.about_header{
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.about_header p{
    margin-top: 2rem;
    font-size: var(--fs-title1);
    color: var(--bodyText);
    max-width: 560px;
    font-family: var(--font-main);
}

.about_image-container img{
    max-width: 660px;
    width: 100%;
}

.about_stats{
    display: flex;
    gap: 2rem;
    margin-bottom: 3rem;
}

.about_buttons{
    display: flex;
    gap: 2rem;
}

.about_stat-1, .about_stat-2{
    display: flex;
    flex-direction: column;
}

.about_stat-1 h2, .about_stat-2 h2{
    font-weight: 600;
    color: var(--primary);
}

.about_stat-1 p, .about_stat-2 p{
    font-size: var(--fs-caption);
    font-family: var(--font-main);
    color: var(--bodyText);
    font-weight: bold;
    letter-spacing: 2.2px;
}

.about_image-container{
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1250px) {
  .about_background {
    margin: 0 2rem;
  }
}

@media (max-width: 990px) {
    .about_background {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    .about_header h2, .about_stats, .about_buttons{
        min-width: 560px;
    }
    .about_content{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .about_header h2, .about_stats, .about_buttons{
        min-width: auto;
        max-width: 560px;
        text-align: center;
    }

    .about_header p{
        text-align: center;
    }

    .about_stats, .about_buttons{
        flex-direction: column;
        align-items: center;
    }
    .about_stats{
        margin-bottom: 5rem;
    }
    .about_buttons{
        gap: 3rem;
    }

    .about_content{
        margin-bottom: 4rem;
    }

    .about{
        margin: 0 1.5rem;
    }

    .about_image-container {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .about_image {
        width: 100%;
        height: auto;
        display: block;   /* Elimina espacios en blanco residuales debajo de la imagen */
        max-width: 100%;
        object-fit: contain; /* Asegura que el logo se vea completo dentro del espacio */
    }
}