body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

header {
    background-color: #003366;
    color: #fff;
    padding: 1rem;
    text-align: center;
    font-size: 15px;
}

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

.header-container .logo1 {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-right: 1rem;
}

nav ul {
    list-style: none;
    padding: 0;
    font-size: 20px;
}

nav ul li {
    display: inline-block; /* Cambiado a inline-block para permitir el box-shadow */
    margin: 0 1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Agregado box-shadow */
    border-radius: 20px; /* Agregar bordes redondeados si lo deseas */
    transition: box-shadow 0.5s ease; /* Transición suave para el box-shadow */
}

nav ul li:hover {
    box-shadow: 0 12px 24px rgba(200, 255, 0, 0.5); /* Efecto hover para aumentar la sombra */
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px; /* Espaciado interno para un mejor efecto visual */
    display: block; /* Hacer que el enlace ocupe todo el espacio del elemento li */
    border-radius: 5px; /* Asegurar que el enlace también tenga bordes redondeados */
}

nav ul li a.donaciones {
    color: #ffcc00;
}

section {
   
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    
}








.nuestra-iglesia-container {
    display: flex;
    align-items: flex-start; /* Alinear los elementos al inicio del contenedor */
    justify-content: space-between; /* Espacio entre los elementos */
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan si no caben en una sola línea */
    margin: 20px; /* Margen para separar del borde de la página */
}

.nuestra-iglesia-text,
.nuestra-iglesia-imagen {
    flex: 1;
    max-width: 48%; /* Las imágenes y el texto ocuparán el 45% del contenedor */
    margin: 0 10px; /* Agrega márgenes a los lados */
    font-size: 15px;
    display: flex; /* Hacer que los elementos internos sean flexibles */
    align-items: flex-start; /* Alinear los contenidos al inicio */
    justify-content: center; /* Centrar horizontalmente los contenidos */
    flex-direction: column; /* Alinear el contenido en columna */
    font-style: italic;
    color: #667;
}

.nuestra-iglesia-text img,
.nuestra-iglesia-imagen img {
    width: 100%; /* Las imágenes se ajustarán al ancho del contenedor */
    height: auto; /* La altura se ajustará automáticamente para mantener la proporción */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 20px 10px rgba(2, 4, 112, 0.5); /* Borde brillante */
    margin: 0; /* Eliminar margen superior en la imagen */
}

.pie-pagina {
    text-align: center;
    margin-top: 1px;
    font-style: italic;
    color: #667;
}





.carousel-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 70px;
}

.image-container {
    width: 40%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 0 20px 10px #ffcc00; /* Brillo azul claro */
}


.image-container img {
    width: 100%;
    height: auto;
    display: none;
}

.image-container img.active {
    display: block;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 1rem;
    cursor: pointer;
    z-index: 1;
}

#prevBtn {
    left: 70px;
    border-radius: 100px;
    background-color:  #ffcc00;
}

#nextBtn {
    right: 70px;
    border-radius: 100px;
    background-color:  #ffcc00;
}












#nuestra-iglesia h2 {
    text-align: center;
    font-size: 40px;


}

.image-container1 img {
    width: 50%; /* Reducir el tamaño a la mitad */
    height: auto; /* Mantener la proporción original */
    display: block; /* Para centrar la imagen horizontalmente */
    margin: 0 auto; /* Para centrar la imagen horizontalmente */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 0 20px 10px rgba(208, 243, 7, 0.5); /* Brillo azul claro */
}






#jovenes-capacitacion {
    text-align: center;
    background-color: #003366;
    padding: 20px; /* Espacio alrededor del contenido */
}

.h2-container {
    display: inline-block;
    box-shadow: 0 0 10px 5px rgba(200, 255, 0, 0.7);
    border-radius: 50px;
    padding: 10px;
    background-color: #003366; /* Fondo para que coincida con el color del contenedor */
    margin-bottom: 50px; /* Separar el título de la imagen */
}

#jovenes-capacitacion h2 {
    color: #ffcc00;
    font-size: 30px;
    margin: 0; /* Eliminar márgenes para un mejor ajuste */
}

#jovenes-capacitacion p {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 20px; /* Ajustar margen superior para coincidir con la separación deseada */
}

#jovenes-capacitacion .jovenes-text {
    font-size: 4.5rem;
    font-weight: bold;
    color: #ffcc00;
    margin-top: 20px; /* Asegurar que este párrafo también tenga la misma separación */
}

.jovenes-text2 {
    color: #b7c1cc;
    margin-top: 20px; /* Añadir margen superior */
}

.image-container11 {
    width: 100%; /* Ajustar el contenedor de la imagen al 100% del contenedor padre */
    display: flex; /* Flex para centrar el contenido */
    justify-content: center; /* Centrar horizontalmente */
    margin-top: 20px; /* Añadir margen superior */
}

.image-container11 img {
    width: 80%; /* Ajustar la imagen al 100% del contenedor */
    height: auto; /* Mantener la proporción de la imagen */
    border-radius: 15px; /* Bordes redondeados */
    box-shadow: 0 0 20px 10px rgba(208, 243, 7, 0.5); /* Brillo azul claro */
    object-fit: cover; /* Ajustar la imagen para cubrir completamente el contenedor */
}





#cronograma {
    text-align: center;
    font-size: 30px;
}

.days {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.day {
    width: auto; /* Ajustar automáticamente al tamaño del contenido */
    max-width: 200px; /* Limitar el ancho máximo para mantener el diseño */
    margin-bottom: 20px;
    overflow: hidden; /* Ocultar el contenido que se desborda */
    border-top-left-radius: 70px; /* Redondea la esquina superior izquierda */
    border-top-right-radius: 70px; /* Redondea la esquina superior derecha */
    border-bottom-left-radius: 80px; /* Borde inferior izquierdo redondeado */
    border-bottom-right-radius: 80px; /* Borde inferior derecho redondeado */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave para cada día */
    transition: box-shadow 0.3s ease; /* Transición para la sombra */
    display: flex; /* Convertir el contenedor en flexbox */
    flex-direction: column; /* Apilar elementos verticalmente */
}

.day:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Aumentar la sombra al pasar el cursor */
}

.day img {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0; /* Solo los bordes superiores redondeados */
    transition: transform 0.3s ease; /* Transición para el tamaño al pasar el cursor */
    flex-shrink: 0; /* Evitar que la imagen se encoja más de lo necesario */
}

.day:hover img {
    transform: scale(1.1); /* Aumentar el tamaño de la imagen al pasar el cursor */
}

.day h3 {
    margin-top: 10px;
    font-size: 20px;
    color: #333;
    flex-shrink: 0; /* Evitar que el texto se encoja más de lo necesario */
    margin-bottom: 10px; /* Agregar espacio entre el texto y la imagen */
    padding: 0 10px; /* Añadir relleno para separar el texto de los bordes */
    text-align: center; /* Centrar el texto dentro del contenedor */
}

/* Ajustes específicos para los días Lunes a Jueves */
.day:nth-child(-n+4) {
    margin-bottom: 10px; /* Reducir margen inferior */
    padding-bottom: 10px; /* Reducir padding inferior */
}

.dropdown-content {
    display: none; /* Inicialmente oculto */
    position: absolute;
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
}

#domingo:hover .dropdown-content {
    display: block; /* Mostrar al hacer hover sobre #domingo */
}

.dropdown-content ul {
    list-style-type: none;
    padding: 0;
}

.dropdown-content ul li {
    padding: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

.dropdown-content ul li:hover {
    background-color: #ddd;
}







#contactos {
    text-align: center;
    background-color: #003366;
    color: #ffcc00;
    padding: 20px; /* Añade espacio de relleno al contenedor */
}

#contactos h1 {
    font-size: 50px;
    text-align: center;
    padding: 20px;
    margin-bottom: 20px; /* Espacio inferior entre el título y el siguiente elemento */
    display: inline-block; /* Hace que el título se ajuste al contenido */
    color: #333; /* Cambia el color del texto del título */
    background-color: rgba(200, 255, 0, 0.7); /* Fondo con transparencia */
    border-radius: 50px;
    box-shadow: 0 0 10px 5px rgba(200, 255, 0, 0.7);
}

#contactos h2 { 
    font-size: 20px;
    text-align: center;
    padding: 10px;
    margin: 0 auto; /* Centra horizontalmente */
    width: 80%; /* Ancho del h2 */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo con transparencia */
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(200, 255, 0, 0.5); /* Sombra */
}

.button {
    display: inline-block;
    margin-top: 20px; /* Espacio arriba del botón */
    padding: 10px 20px;
    font-size: 16px;
    color: #ffcc00;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo con transparencia */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: rgba(0, 0, 0, 0.7); /* Cambio de color al hacer hover */
}










#social-media div {
    display: inline-block;
    margin: 5px;
}

#social-media img {
    width: 50px; 
    height: 50px; 
    border-radius: 50%;
    border: 2px solid #ccc; /* Opcional: añade un borde */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Opcional: añade una sombra */
    transition: transform 0.2s; /* Opcional: añade una transición para el hover */
}

#social-media img:hover {
    transform: scale(1.5); /* Opcional: efecto zoom al pasar el ratón */
}



.map-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.map-container iframe {
    border: 0;
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    height: 450px;
}





#donaciones {
    text-align: center;
    background-color: #f2f2f2; /* Color de fondo */
    padding: 30px; /* Espacio interno */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-bottom: 30px; /* Margen inferior */
    position: relative; /* Posición relativa para el posicionamiento de la imagen */
}

#donaciones h2 {
    font-size: 50px; /* Tamaño del título */
    color: #003366; /* Color del texto */
    margin-bottom: 20px; /* Espacio inferior */
    text-align: center; /* Centrar el título */
}

#donaciones p {
    font-size: 18px; /* Tamaño del texto */
    line-height: 1.6; /* Espaciado entre líneas */
    color: #555; /* Color del texto */
    margin-bottom: 20px; /* Espacio inferior */
    text-align: left; /* Alinear el texto a la izquierda */
}

#donaciones h3 {
    font-size: 24px; /* Tamaño del subtítulo */
    color: #003366; /* Color del texto */
    margin-bottom: 10px; /* Espacio inferior */
    text-align: center; /* Centrar el subtítulo */
}

#donaciones ul {
    text-align: left; /* Alineación del texto de la lista */
    margin-bottom: 20px; /* Espacio inferior */
    padding-left: 0; /* Elimina el padding izquierdo predeterminado */
}

#donaciones ul li {
    font-size: 18px; /* Tamaño del texto de la lista */
    line-height: 1.6; /* Espaciado entre líneas */
    color: #555; /* Color del texto */
    list-style-type: none; /* Elimina los marcadores de la lista */
}


.image-container111 {
    margin: 0 auto 20px; /* Margen automático arriba y abajo, centrado horizontalmente */
    width: 300px; /* Ancho deseado para la imagen */
    height: auto; /* Altura automática según la imagen */
}

.rounded-image {
    width: 100%; /* Asegura que la imagen ocupe todo el espacio del contenedor */
    height: auto; /* Altura automática para mantener la proporción */
    border-radius: 50px; /* Bordes redondeados para la imagen */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* Sombra suave */
}


.btn-consignar {
    display: inline-block;
    padding: 12px 24px; /* Padding interno del botón */
    font-size: 20px; /* Tamaño del texto del botón */
    color: #fff; /* Color del texto del botón */
    background-color: #003366; /* Color de fondo del botón */
    border: none; /* Sin borde */
    border-radius: 20px; /* Bordes redondeados */
    text-decoration: none; /* Sin subrayado */
    transition: background-color 0.3s ease; /* Transición al hacer hover */
}

.btn-consignar:hover {
    background-color: #ffcc00;; /* Color de fondo del botón al hacer hover */
}







.mission-title {
    text-align: center;
    font-size: 40px;
    margin-bottom: 20px;
}

.mission-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.image-box {
    width: 40%; /* Ajusta el tamaño del contenedor */
    max-width: 200px; /* Limita el tamaño máximo del contenedor */
    box-shadow: 0 4px 8px rgba(0, 0, 255, 0.3);
    padding: 10px;
    margin: 10px 0;
    text-align: center;
    border-radius: 70%; /* Hace que el contenedor tenga una forma circular */
    overflow: hidden; /* Asegura que el contenido no se salga del contenedor */
    transition: transform 0.3s ease-in-out; /* Suaviza la transición de expansión */
    cursor: pointer; /* Cambia el cursor a una mano para indicar que es clickeable */
}

.image-box img {
    width: 100%;
    height: auto;
    border-radius: 40%; /* Hace que la imagen tenga una forma circular */
    transition: transform 0.3s ease-in-out; /* Suaviza la transición de expansión */
}

.image-box:hover {
    transform: scale(1.5); /* Expande el contenedor al pasar el cursor */
}

.image-box:hover img {
    border-radius: 10px; /* Cambia el borde redondeado cuando está expandido */
}

.caption {
    font-style: italic;
    margin-top: 10px;
    color: #003366;
}





.btn-Versiculo {
    display: inline-block; /* Muestra el enlace como bloque en línea */
    padding: 10px 20px; /* Espaciado interno del botón */
    background-color:  #003366; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    text-decoration: none; /* Quita el subrayado del texto */
    border-radius: 20px; /* Bordes redondeados */
    transition: background-color 0.3s ease; /* Transición suave al cambiar color de fondo */

}

.btn-Versiculo:hover {
    background-color: #ffcc00; /* Color de fondo del botón al pasar el cursor */
}



.boton-flotante, .boton-flotante2 {
    display: flex; /* Usa flexbox para centrar verticalmente el contenido */
    justify-content: center;
    align-items: center; /* Centra verticalmente el contenido */
    width: 50px; /* Ancho del botón */
    height: 50px; /* Altura del botón */
    background-color:  #003366; /* Color de fondo del botón */
    color: #fff; /* Color del texto */
    border: none; 
    border-radius: 50%; 
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    text-align: center; 
    font-size: 16px; /* Tamaño del texto */
    text-decoration: none; /* Quita el subrayado del texto */
    transition: background-color 0.3s ease; /* Transición suave al cambiar color de fondo */
    position: fixed; /* Posición fija */
    z-index: 1000; /* Capa z-index para estar por encima de otros elementos */
    box-shadow: 0 0 10px #ffcc00; /* Sombra suave */
}

.boton-flotante {
    top: 200px; /* Ajusta la posición vertical según sea necesario */
    right: 20px; /* Ajusta la posición horizontal según sea necesario */
}

.boton-flotante2 {
    top: 270px; /* Ajusta la posición vertical según sea necesario */
    right: 20px; /* Ajusta la posición horizontal según sea necesario */
}

.boton-flotante:hover, .boton-flotante2:hover {
    background-color: #ffcc00; /* Cambio de color de fondo al pasar el cursor */
}






footer {
    background-color: #003366;
    color: #fff;
    text-align: center;
    line-height: 1px; /* Ajusta la altura de línea para centrar verticalmente */
    position: fixed;
    bottom: 0;
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Centra horizontalmente */
    width: 1000px;
    border-top-left-radius: 70px; /* Redondea la esquina superior izquierda */
    border-top-right-radius: 70px; /* Redondea la esquina superior derecha */
}

#likeButton {
    background-color: #ffcc00;
    border-radius: 30px;
    padding: 0.5rem 1rem;
    margin-top: 1rem;
    cursor: pointer;
    font-size: 1rem;
    text-align: center;
}

#likeCount {
    margin-top: 0.5rem;
}