@import url('https://fonts.googleapis.com/css2?family=Caladea&display=swap');
@import url('https://fonts.googleapis.com/css?family=Libre+Caslon+Text&display=swap');

body {
    font-family: 'Libre Caslon Text', serif;
    /* Fondo amarillo claro */
    background-size: cover;
    color: white;
    margin: 0;
    padding: 0;
}

/* contenedores, para que se vea un fondo y el texto dentro "flotando" */
.main-content {
    /* border: #000 1px solid; */
    margin-top: 90px;
    /* height: 110vh; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 90px;
    display: flex;
    align-items: center;

}

/* Contenedor inicial, que tenga un dondo y el contenido flote en el centro */
.imgInicialContainer{
    /* Hacer que flote en el centro */
    background-image: url("https://purina.com.pe/sites/default/files/2022-11/Purina-aprende-a-identificar-sintomas-de-envenenamiento-en-perros-nota02.png");
    justify-content: center;
    min-height: 100vh ;
}

/* Contenedor de nuestra motivacion, para que el contenido flote a la derecha */
.nuestraMotivacionContainer{
    background-image: url("https://img.freepik.com/fotos-premium/perro-corriendo-playa-al-atardecer_948735-128125.jpg?w=900");
    justify-content: right;
    min-height: 90vh;
    margin-bottom: 60px;
}

/* tamaño, posicion, color de fondo de los cuadritos que contienen texto */
.quote-right, .imgInicialContainer .h1-father {
    font-size: 1vw;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 50px; /*Aumenta este valor para agregar más espacio alrededor del texto*/
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: 'Caladea', serif; /* Fuente del menú */
}

/* Tamaño y configuraciones extra de cada letra */

@media (min-width: 0px){
    .imgInicialContainer h1{
        font-size: 9em;
        color: #333333;
        padding: 0px;
    }
    
    .quote-right h2 {
        font-size: 8em; /* Reduce este valor para hacer el texto "Nuestra motivación" más pequeño */
        font-weight: bold; /* Hace el texto "Nuestra motivación" en negritas */
    }
    
    .quote-right p {
        font-size: 6em; /* Reduce este valor para hacer el texto más pequeño */
    }

    .section h2 {
        font-size: 10vw;
    }
}

@media (min-width: 768px){
    .imgInicialContainer h1{
        font-size: 6em;
        color: #333333;
        padding: 0px;
    }
    
    .quote-right h2 {
        font-size: 4em; /* Reduce este valor para hacer el texto "Nuestra motivación" más pequeño */
        font-weight: bold; /* Hace el texto "Nuestra motivación" en negritas */
    }
    
    .quote-right p {
        font-size: 3em; /* Reduce este valor para hacer el texto más pequeño */
    }

    .section h2 {
        font-size: 7vw;
    }
}

@media (min-width: 993px){
    .imgInicialContainer h1{
        font-size: 3.3em;
        color: #333333;
        padding: 0px;
    }
    
    .quote-right h2 {
        font-size: 2.3em; /* Reduce este valor para hacer el texto "Nuestra motivación" más pequeño */
        font-weight: bold; /* Hace el texto "Nuestra motivación" en negritas */
    }
    
    .quote-right p {
        font-size: 1.7em; /* Reduce este valor para hacer el texto más pequeño */
    }
    .section h2 {
        font-size: 4vw;
    }

    
}


.main-content * {
    color: #000;
}


table {
    width: 100%;
    border-collapse: collapse;
    margin: 60px 0px;
}

th,
td {
    padding: 30px 0px;
    /* Reducir el relleno en la parte superior e izquierda */
    color: #000000;
    font-style: 2e;
}

td img {
    width: 100%;
}

h2 {
    font-size: 3em;
    /* Tamaño de la fuente aumentado */
    font-family: 'Caladea', serif;
    /* Fuente Caladea */
}

.section{
    margin-top: 80px;
}

/*tarjetas de más sobre nosotros*/

.section h2 {
    text-align: center;
    font-family: 'Caladea', serif;
    color: #333;
}

.section hr {
    width: 50px;
    border: 1px solid orange;
    margin: 0 auto;
    /* Centra la línea horizontal */
}

.card-container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.card {
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    margin: 10px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    /* Agrega sombra a las tarjetas */
}

.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.card-content {
    padding: 20px;
    font-family: 'Caladea', serif;
    color: #333;
}

/*CARRUSEL*/

.carousel-container {
    background-color: white;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    /* Efecto de sombra en la parte inferior */
}

.carousel-inner {
    width: 100%;
    height: 100%;
    padding: 0;
}

.carousel-item * {
    padding: 0;
    margin: 0;
    /* text-align: right; */
    /* Alinea el texto a la derecha */
}

.carousel-item .row .imgContainer img {
    margin: 60px auto;
    width: 80%;
    /* Ajusta el tamaño máximo de las imágenes */
}

.carousel-item .card-title,
.carousel-item .card-text {
    color: black;
    /* Color del texto */
    text-align: center;
    /* Centra el texto horizontalmente */
}

.carousel-control-prev{
    left: calc(-5%)
}
.carousel-control-next {
    right: calc(-5%);
    /* Posición vertical centrada de las flechas */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 30px;
    /* Tamaño de las flechas */
    height: 30px;
    /* Tamaño de las flechas */
    background-color: rgba(0, 0, 0, 0.5);
    /* Color de fondo de las flechas */
    border-radius: 50%;
    /* Forma redondeada */
}

.carousel-control-prev-icon:before,
.carousel-control-next-icon:before {
    font-size: 24px;
    /* Tamaño del icono de flecha */
    color: white;
    /* Color del icono de flecha */
}


/*Donaciones*/
.donation-container {
    background-color: white;
    margin: 0 auto;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    padding: 50px;
    margin-bottom: 90px;
}


.donation-img{
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */;
}

.donation-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    text-align: center; /* Alinea el texto al centro */
    /* Resto de tu código... */
}

.donation-contentText{
    text-align: center; /* Alinea el texto al centro */

}

.donation-content h3,
.donation-content p {
    color: black;
    /* Color del texto */
}

.btn-donate {
    display: block;
    width: 80%;
    /* Reduce el ancho del botón al 80% */
    padding: 10px;
    text-align: center;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin: 0 auto;
    /* Centra el botón horizontalmente */
}

.btn-donate:hover {
    background-color: #0056b3;
    text-decoration: none;
    color: white
}

/*parte de abajo*/

.contact-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    /* Asegura que el contenedor ocupe todo el ancho de la pantalla */
    background-color: #D3D3D3;
    /* Cambia el color de fondo a gris */
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    /* Centra el texto horizontalmente */
}

.contact-item {
    text-align: center;
    /* Alinea el texto al centro */
}

.contact-item h3,
.contact-item p {
    color: black;
    /* Color del texto */
    font-size: 0.8em;
    /* Reduce el tamaño de la letra */
}

.modal {
    color: black;
}

.modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}