body {
    background-color: beige;
}

.contenedor {
    background-color: #ADD8E6; 
    border-radius: 30px; 
    padding: 20px;
    width: 500px; 
    text-align: center; 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    align-items: center;
    margin: 0 auto; /* Alinea el contenedor en el centro */
}

.contenedor img {
    width: 80%; /* Reduce el tamaño al 80% del contenedor */
    max-width: 150px; /* Limita el tamaño máximo */
    border-radius: 8px; 
}

.contenedor h1 {
    font-size: 1.5em;
    color: rgb(8, 116, 31); 
    margin-top: 10px; 
}

.contenedor h2 {
    font-size: 2em; 
    color: #333; 
    margin-top: 15px; 
}

.contenedor p {
    font-size: 1.5em;
    color: brown;
    margin-top: 10px; 
}

.col {
    padding: 100px;
}

.bold-text {
    font-weight: 700;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

h1 {    
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-size: 19px;
}

/* Media Queries para Responsividad */
@media (max-width: 1200px) {
    .contenedor {
        width: 450px;
    }
    .col {
        padding: 50px; /* Reduce el padding en pantallas más pequeñas */
    }
}

@media (max-width: 992px) {
    .contenedor {
        width: 80%; /* El contenedor se adapta al 80% del ancho */
        margin: 20px auto; /* Centro el contenedor */
    }

    .col {
        padding: 30px; /* Reduce el padding */
    }

    .contenedor h1 {
        font-size: 1.3em; /* Reduce el tamaño de texto */
    }

    .contenedor h2 {
        font-size: 1.7em;
    }

    .contenedor p {
        font-size: 1.2em; /* Reduce el tamaño del texto */
    }
}

@media (max-width: 768px) {
    .contenedor {
        width: 90%; /* El contenedor se adapta al 90% del ancho */
        padding: 15px;
    }

    .col {
        padding: 20px; /* Reduce aún más el padding */
    }

    .contenedor h1 {
        font-size: 1.2em;
    }

    .contenedor h2 {
        font-size: 1.5em;
    }

    .contenedor p {
        font-size: 1em; /* Ajusta aún más el tamaño de texto */
    }

    .contenedor img {
        width: 70%; /* Ajusta el tamaño de la imagen */
        max-width: 120px; /* Limita aún más el tamaño de la imagen */
    }
}

@media (max-width: 576px) {
    .contenedor {
        width: 100%; /* El contenedor toma el 100% del ancho */
        padding: 10px;
    }

    .col {
        padding: 10px; /* Elimina el padding adicional */
    }

    .contenedor h1 {
        font-size: 1em; /* Ajusta el tamaño del texto */
    }

    .contenedor h2 {
        font-size: 1.2em;
    }

    .contenedor p {
        font-size: 0.9em; /* Ajuste final del tamaño de texto */
    }

    .contenedor img {
        width: 60%; /* Ajusta la imagen aún más */
        max-width: 100px; /* Limita el tamaño máximo de la imagen */
    }
}