/* Estilos para el encabezado */
header {
    position: fixed;
    display: flex;
    justify-content: space-between;             
    align-items: center;
    width: 100%;
    padding: 20px;
    background-color: rgba(215, 14, 49,1); /* Cambia el color de fondo según tus preferencias */
    z-index: 10000;
    position: fixed;
    height: 15%;
    z-index: 1000;
    transition: background-color 0.5s;
    font-size: 16px;
}

* {
    box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el tamaño total */
}
.war {
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    width: 100%;
}
.grid-item {
    padding: 20px;
}
.product {
    display: flex;
    flex-direction: row;
}
.product img {
    max-width: 100%;
    border-radius: 10px;
}
.thumbnail-war {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}
.thumbnail-war img {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
    cursor: pointer;
    border-radius: 5px;
}
.price h1 {
    font-size: 24px;
    margin: 0;
}
.price p {
    margin: 10px 0;
}
.price .price-value {
    font-size: 20px;
    font-weight: bold;
}
.color-options, .size-options {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
}
.color-options img, .size-options button {
    width: 50px;
    height: 50px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
}
.size-options button {
    width: auto;
    padding: 10px;
    font-size: 14px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
}
.size-options button.selected {
    border-color: #000;
}
.actions {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
.actions button {
    padding: 15px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 10px;
}
.favorites {
    background-color: #fff;
    color: #000;
    border: 1px solid #ddd;
}
.favorites i {
    margin-right: 5px;
}

@media (max-width: 768px) {
    .war {
        padding: 10px;
    }
    .grid-item {
        padding: 10px;
    }
    .price h1 {
        font-size: 20px;
    }
    .price .price-value {
        font-size: 18px;
    }
    .actions button {
        padding: 10px;
        font-size: 14px;
    }
}
@media (max-width: 480px) {
    .thumbnail-war img {
        width: 40px;
        height: 40px;
    }
    .color-options img, .size-options button {
        width: 40px;
        height: 40px;
        margin: 3px;
    }
    .size-options button {
        padding: 8px;
        font-size: 12px;
    }
    .size-options {
        flex-direction: column;
    }
    .hamburger-menu {
        display: block;
        cursor: pointer;
        margin-bottom: 10px;
    }
    .size-options button {
        display: none;
    }
    .size-options.open button {
        display: block;
        margin-bottom: 5px;
    }
   }
.archivo-black-regular {
    font-family: 'Roboto', serif;
    font-weight: 400;
    font-style: normal;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif; /* Asegúrate de aplicar la fuente a los encabezados */
}

/* Estilos generales */
body {
   /* font-family: Arial, sans-serif; */
   font-family: 'Roboto', sans-serif; /* Cambia 'Roboto' por la fuente que elegiste */
    margin: 0;
    padding: 0;
    background-color: #fff;
}

h2 {
    color: #ddd;
}
.logo {
    display: flex;
    align-items: center;
}
.logo img {
    height: 80px;
    padding-left: 60px;
}

.logo h1 {
    color: #333;
    margin: 0;
    font-size: 24px; /* Tamaño del logotipo */
}

nav {
    display: flex;
    justify-content: space-between; /* Espacio entre logo y menú */
    align-items: center; /* Centrar verticalmente */
    padding: 10px 20px; /* Espaciado interno */
    margin-right: 15px;
}

/* Estilo del menú */
.nav-list {
    list-style: none; /* Sin viñetas */
    display: flex; /* Mostrar los elementos en línea */
    margin-top: 29px;
    padding: 0; /* Sin padding */
}

/* Estilo de los enlaces del menú */
.nav-list li {
    margin: 0 15px 10px 0; /* Espaciado entre elementos */
}

/* Estilo de los enlaces */
.nav-list a {
    text-decoration: none; /* Sin subrayado */
    color: white; /* Color del texto */
    font-weight: bold; /* Añadir negrita a la tipografía */
}

/* efecto en el over */
.nav-list a:hover {
    text-decoration: none; /* Sin subrayado */
    color: #F8CADC; /* Color del texto */

}

/* Estilo para el botón del menú */
.menu-icon {
    color: #F8CADC    ;
    display: none; /* Ocultar por defecto */
    font-size: 24px; /* Tamaño del icono del menú */
    cursor: pointer; /* Cambiar el cursor al pasar sobre el botón */
}

/* Ocultar el checkbox */
.menu-toggle {
    display: none; /* Ocultar el checkbox */
}
#home {
    background-image: url('img/background.jpg');
    position: relative;
    overflow: hidden;
    height: 100vh; /* Altura completa de la ventana */
    background-size: cover;
}

/* Estilos para las secciones parallax */
.parallax {
    background-image: url('img/background.jpg');
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: black;
    background-attachment: fixed; /* Fijar el fondo */
    background-position: center; /* Centrar la imagen */
    background-repeat: no-repeat; /* No repetir la imagen */
    background-size: cover; /* Cubrir todo el espacio */
    display: flex; /* Usar flexbox para centrar el contenido */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
    text-align: center; /* Centrar texto */
}

/* Imágenes de fondo para las secciones */
.parallax1 {
    background-image: url('img/background.jpg');
}

.parallax2 {
    background-image: url('img/background.jpg');
}

.parallax3 {
    background-image: url('img/background.jpg'); 
}

.parallax4 {
    position: relative;
    background-image: url('img/background.jpg');
    padding: 20px 0;
    height: auto;
}

.parallax5 {
    background-image: url('img/background.jpg');
}

/* Estilos para la galería de imágenes */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px; /* Espacio entre los cuadros */
    padding: 10px;
    color: white;
}

.gallery-item {
    width: 200px; /* Ancho del cuadro */
    height: 200px; /* Alto del cuadro */
    border: 2px solid #ccc; /* Color del borde */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Para que las imágenes no sobresalgan */
    text-align: center; /* Centrar el contenido */
}


.gallery-item button {
    margin-top: 10px; /* Espacio entre la imagen y el botón */
    padding: 10px 15px;
    background-color: #1b7ae0;
}
.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: pointer; /* Cambia el cursor al pasar el mouse */
    transition: transform 0.3s; /* Efecto de transición */
}

.gallery img:hover {
    transform: scale(1.05); /* Aumenta el tamaño al pasar el mouse */
}

.lightbox {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro */
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
}

.close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 40px;
    cursor: pointer;
}

.carousel {
    background-image: url('img/background.jpg');
    background-color: rgb(255, 255, 255); /* Blanco con 50% de opacidad */
    position: relative;
    width: 100%;
    height: 100vh; /* Altura completa de la ventana */
    overflow: hidden;
}

.carousel-item {
    display: none;
    width: 100%;
    height: 100%;
}

.carousel-item.active {
    display: flex;
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción de la imagen */
}

.carousel-control {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    user-select: none;
}

.carousel-caption {
    position: absolute;
    bottom: 30%; /* Ajusta la posición vertical */
    left: 10%; /* Ajusta la posición horizontal */
    color: white; /* Color del texto */
    background-color: rgba(255, 255, 255, 0); /* Blanco con 50% de opacidad */
    padding: 10px;
    border-radius: 5px;
}

.carousel-caption h2 {
    font-size: 3em; /* Tamaño de la fuente del título */
    margin: 0;
}
.carousel-caption p {
    font-size: 1.2em; /* Tamaño de la fuente del extracto */
    margin: 5px 0 0;
}
.carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 3em; /* Tamaño de los controles */
    text-decoration: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1000; /* Asegúrate de que los controles estén por encima de otros elementos */
}
.carousel-control.prev {
    left: 20px; /* Posición del control anterior */
}

.carousel-control.next {
    right: 20px; /* Posición del control siguiente */
}

/* Efecto de hover para los controles */
.carousel-control:hover {
    color: #b59a48; /* Cambia el color al pasar el mouse */
}
/* Pantallas grandes */
@media (min-width: 1200px) {
    .carousel {
        height: 100vh; /* Altura completa para pantallas grandes */
    }

    .carousel img {
        height: auto; /* Mantener la proporción en pantallas grandes */
    }
}

/* Pantallas medianas */
@media (min-width: 992px) and (max-width: 1199px) {
    .carousel {
        height: 70vh; /* Altura menor para pantallas medianas */
    }

    .carousel img {
        height: auto; /* Mantener la proporción en pantallas medianas */
    }
}

/* Pantallas pequeñas */
@media (min-width: 768px) and (max-width: 991px) {
    .carousel {
        height: 50vh; /* Altura menor para pantallas pequeñas */
    }

    .carousel img {
        height: auto; /* Mantener la proporción en pantallas pequeñas */
    }
}

/* Pantallas extra pequeñas */
@media (max-width: 767px) {
    .carousel {
        height: 40vh; /* Altura aún menor para pantallas muy pequeñas */
    }

    .product-card {
        flex: 1 1 100%; /* 1 tarjeta en línea en pantallas muy pequeñas */
        max-width: none; /* Elimina el ancho máximo para ocupar todo el espacio */
    }

    .gallery {
        grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
    }

    .gallery-item {
        width: 100%; /* Ancho completo para elementos de la galería */
    }

    /* Estilos para el encabezado y menú en móviles */
    .nav-list {
        flex-direction: column; /* Cambiar a columna */
        display: none; /* Ocultar el menú por defecto */
    }

    /* Mostrar el menú cuando el checkbox está marcado */
    #menuToggle:checked + .menu-icon + .nav-list {
        display: flex; /* Mostrar el menú */
    }
}

.prev {
    left: 10px;
    transform: translateY(-50%);
}

.next {
    right: 10px;
    transform: translateY(-50%);
}

.container {
    display: flex;
    padding: 20px;
}

.product-container {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan */
    justify-content: space-between; /* Espacio entre las tarjetas */
    padding: 10px; /* Espaciado interno */
}

.product-card {
    flex: 1 1 calc(30% - 20px); /* Ajusta el tamaño de las tarjetas para que ocupen el 22% del espacio disponible */
    max-width: 300px; /* Establece un ancho máximo para las tarjetas */
    border: 1px solid #ddd;
    padding: 10px;
    margin: 10px; /* Espaciado entre tarjetas */
    text-align: center;
    background-color: rgba(248, 202, 220, 0.5);
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente si es necesario */
    border-radius: 12px;
    width: 100%; /* Ancho de la imagen */
    height: auto; /* Alto automático para mantener la proporción */
    object-fit: cover; /* Ajustar la imagen al tamaño de la tarjeta */
    border-radius: 12px; /* Bordes redondeados para la imagen */
    transition: transform 0.2s, box-shadow 0.2s; /* Transición suave para la transformación y la sombra */
}

.post-card:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra al pasar el mouse */
}

.product-card img {
    width: 100%;
    max-width: 100%; /* Asegurarte de que la imagen no sobresalga */
    height: auto;
    object-fit: cover; /* Asegura que la imagen cubra el área sin distorsionarse */
    border-radius: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.post-card img:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra al pasar el mouse */
}

.product-card p {
    font-size: 12px;
    color: #999;
    margin: 5px 0;
    text-transform: uppercase;
}

.product-card h3 {
    font-size: 14px;
    color: #333;
    margin: 10px 0;
    font-weight: normal;
}

.price h1 {
    font-size: 24px;
    margin: 0;
}

.price p {
    margin: 10px 0;
}

.price .price-value {
    font-size: 20px;
    font-weight: bold;
}

.product-card .price {
    font-size: 16px;
    color: #000000;
    margin: 10px 0;
    font-weight: bold;
}

.price-range {
    margin-top: 20px;
}

.price-range input {
    width: 100%;
}

@media (max-width: 768px) {
    .war {
        padding: 10px;
    }
    .grid-item {
        padding: 10px;
    }
    .price h1 {
        font-size: 20px;
    }
    .price .price-value {
        font-size: 18px;
    }
    .actions button {
        padding: 10px;
        font-size: 14px;
    }
}
.product-card .btn {
    background-color: #F8CADC;
    color: #D70E31;
    padding: 10px;
    text-decoration: none;
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;  
}

.navigation {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px;
}

.navigation i {
    font-size: 24px;
    color: #333;
    
}

/* Estilos para las tarjetas de post */
.post-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.post-card {
    width: 45%; /* Ancho de cada tarjeta */
    margin: 20px; /* Espaciado entre tarjetas */
    background-color: #fff; /* Color de fondo de la tarjeta */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para la tarjeta */
    border-radius: 12px;
}

.post-card-image {
    position: relative; /* Necesario para el posicionamiento absoluto del título */
}

.post-card img {
    width: 100%; /* Ancho de la imagen */
    height: 50%; /* Alto de la imagen */
    object-fit: cover; /* Ajustar la imagen al tamaño de la tarjeta */
    border-radius: 12px; /* Bordes redondeados para la imagen */
    transition: transform 0.2s, box-shadow 0.2s;
}

.post-card img:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el mouse */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Sombra al pasar el mouse */
}

.post-card-content {
    padding: 10px; /* Espaciado interno de la tarjeta */
}

.post-card-content h2 {
    margin-top: 0; /* Quitar margen superior del título */
}

.post-card-content p {
    height: 50px; /* Alto fijo para el resumen */
    overflow: hidden; /* Ocultar texto que sobrepase el alto */
    text-overflow: ellipsis; /* Agregar puntos suspensivos al final del texto */
}
.post-card .btn {
    background-color: #F8CADC; /* Color de fondo verde */
    color: #D70E31; /* Color del texto */
    border: none; /* Sin borde */
    padding: 15px 30px; /* Espaciado interno */
    text-align: center; /* Centrar texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Para que se comporte como un botón */
    font-size: 16px; /* Tamaño de fuente */
    margin: 10px 2px; /* Margen alrededor del botón */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
    border-radius: 5px; /* Bordes redondeados */
    transition: background-color 0.3s, transform 0.3s; /* Transiciones suaves */
    font-weight: bold;
}

.btn:hover {
    background-color: #F8CADC; /* Color de fondo al pasar el ratón */
    transform: translateY(-2px); /* Efecto de elevación */
}

.shadow-effect {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
}

.shadow-effect:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más intensa al pasar el ratón */
}

.read-more {
    text-decoration: none; /* Sin subrayado */
    color: #ff5100; /* Color del enlace */
}

/* Estilos para la sección de contacto */
.content {
    position: relative;
    color: white;
    z-index: 2;
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}

.contact {
    text-align: center;
    width: 100%;
    background-color:#f0f0f0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact aside {
    width: 40%;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
header {
    position: flex;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(215, 14, 49,1); /* Color de fondo del header */
    z-index: 1000; /* Asegura que el header esté por encima del contenido */
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px; /* Altura fija para el header */
}
.main-content {
    width: 80%;
}
.main-content .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.main-content .header span {
    font-size: 14px;
}
.main-content .header select {
    padding: 5px;
}
.contact .map {
    width: 60%;
    padding: 20px;
}

/* Estilos para la sección de contacto */
.contact-container {
    display: flex; /* Usar flexbox para la distribución */
    flex-wrap: wrap; /* Permitir que los elementos se envuelvan */
    width: 100%;
    height: auto;
}
.container {
    margin-top: 40px; /* Ajusta este valor según la altura de tu header */
    display: flex;
    justify-content: center; /* Centrar contenido */
    align-items: flex-start; /* Alinear al inicio verticalmente */
    flex-wrap: wrap; /* Permitir que las tarjetas se envuelvan */
    padding: 20px;
}

.wrappher {
    margin-top: 40px; /* Ajusta este valor según la altura de tu header */
    display: flex;
    justify-content: center; /* Centrar contenido */
    align-items: flex-start; /* Alinear al inicio verticalmente */
    flex-wrap: wrap; /* Permitir que las tarjetas se envuelvan */
    padding: 20px;
    background-image: url('img/background.jpg');
}
.background3 {
    margin-top: 40px; /* Ajusta este valor según la altura de tu header */
    display: flex;
    justify-content: center; /* Centrar contenido */
    align-items: flex-start; /* Alinear al inicio verticalmente */
    flex-wrap: wrap; /* Permitir que las tarjetas se envuelvan */
    padding: 20px;
    background-image: url('img/background.jpg');
}


aside {
    flex: 1; /* Ocupa el 50% del ancho en pantallas grandes */
    min-width: 300px; /* Ancho mínimo para evitar que se colapse demasiado */
    margin-right: 20px; /* Espaciado entre el aside y el mapa */
}
.sidebar {
    width: 20%;
    padding-right: 20px;
}
.sidebar h3 {
    font-size: 18px;
    margin-bottom: 10px;
}
.sidebar ul {
    list-style: none;
    padding: 0;
}
.sidebar ul li {
    margin-bottom: 10px;
}
.sidebar ul li a {
    text-decoration: none;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.sidebar ul li ul {
    display: none;
    list-style: none;
    padding-left: 20px;
}
.sidebar ul li ul li {
    margin-bottom: 5px;
}
.sidebar ul li ul li a {
    color: #666;
}
.map {
    flex: 1; /* Ocupa el 50% del ancho en pantallas grandes */
    min-width: 300px; /* Ancho mínimo para evitar que se colapse demasiado */
    position: relative; /* Necesario para el iframe */
}

.map iframe {
    width: 100%; /* El iframe ocupa el 100% del ancho del contenedor */
    height: 100%; /* El iframe ocupa el 100% de la altura del contenedor*/
    border: 0; /* Sin borde */
    position: absolute; /* Posicionamiento absoluto */
    top: 0; /* Alineado al top del contenedor */
    left: 0; /* Alineado al lado izquierdo del contenedor */
}

.nav-list {
    display: flex; /* Mostrar el menú en pantallas grandes */
    justify-content: space-between; /* Espacio entre los elementos */
    align-items: center; /* Centrar verticalmente */
}
.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
    margin-bottom: 20px;
}
#pagos {
    height: 100vh; /* Altura completa de la ventana */
    display: flex; /* Usar flexbox para centrar el contenido */
    flex-direction: column; /* Alinear el contenido en columna */
    justify-content: center; /* Centrar verticalmente */
    align-items: center; /* Centrar horizontalmente */
    /*background: url('ruta/a/tu/fondo.jpg') no-repeat center center; /* Fondo parallax (opcional) */
    color: white;
    background-size: cover; /* Cubrir toda la sección con la imagen de fondo */
}


@media (max-width: 1024px) {
    .gallery-item {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .nav-list {
        flex: 1 1 100%; /* Una tarjeta por fila en pantallas pequeñas */
        display: none; /* Ocultar el menú por defecto */
        flex-direction: column; /* Cambiar a columna */
        position: absolute; /* Posicionar el menú */
        top: 60px; /* Alinear debajo del encabezado */
        left: 0; /* Alinear al lado izquierdo */
        background-color: #2e2e2e85; /* Color de fondo */
        width: 100%; /* Ancho completo */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra para el menú */
        margin-top: 29px;
        margin-right: 30px;
        
    }

/* Pantallas grandes */
@media (min-width: 1200px) {
    .product-card {
        flex: 1 1 calc(20% - 20px); /* Más tarjetas en pantallas grandes */
    }
}

/* Pantallas medianas */
@media (min-width: 992px) and (max-width: 1199px) {
    .product-card {
        flex: 1 1 calc(25% - 20px); /* Ajusta el número de tarjetas en pantallas medianas */
    }
}

/* Pantallas pequeñas */
@media (min-width: 768px) and (max-width: 991px) {
    .product-card {
        flex: 1 1 calc(33% - 20px); /* 3 tarjetas en pantallas pequeñas */
    }
}

/* Pantallas extra pequeñas */
@media (max-width: 767px) {
    .product-card {
        flex: 1 1 100%; /* 1 tarjeta en línea en pantallas muy pequeñas */
        max-width: none; /* Elimina el ancho máximo para ocupar todo el espacio */
    }
}

@media (max-width: 480px) {
    .product-card {
        flex: 1 1 100%; /* 1 tarjeta en línea en pantallas muy pequeñas */
    }
}

    /* Mostrar el menú cuando el checkbox está marcado */
    #menuToggle:checked + .menu-icon + .nav-list {
        display: flex; /* Mostrar el menú */
    }

    .nav-list li {
        height: 30px;
        margin-top: 5px;
        padding-top: 10px;
        padding-left: 25px;
    }

    .nav-list li:hover {
        clear: inherit;
        background-color: rgba(0, 78, 106, 0.619);
    }

    .nav-list a {
        padding-top: 5px;
        padding-bottom: 5px;
        color: #fff;
    }

    .nav-list a:hover {
        padding-top: 5px;
        padding-bottom: 5px;
        color: #6d6d6d !important;
    }

    .menu-icon {
        display: block; /* Mostrar el botón en pantallas pequeñas */
    }

    .contact-container {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }

    .post-cards {
        flex-direction: column; /* Cambiar a columna en pantallas pequeñas */
    }
    .post-card {
        width: 100%; /* Ancho completo en pantallas pequeñas */
    }
    .gallery {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas medianas */

    }

    .gallery-item {
        flex: 1 1 calc(50% - 10px);
    }
    
    aside, .map {
        width: 100%; /* Cada uno ocupa el 100% en pantallas pequeñas */
        margin-right: 0; /* Eliminar el margen derecho en pantallas pequeñas */
        margin-bottom: 20px; /* Espaciado inferior para separar los elementos */
    }
    .map {
        position: relative; /* Asegurar que el contenedor tenga posición relativa */
        min-height: 300px; /* Altura fija para el mapa en pantallas pequeñas */
    }

    .map iframe {
        height: 100%; /* Mantener el iframe al 100% de la altura del contenedor */
    }
}

@media (max-width: 480px) {
    .gallery {
        grid-template-columns: 1fr; /* 1 columna en pantallas pequeñas */
    }
}

/* Estilos generales para el formulario */
form {
    display: flex; /* Usar flexbox para el formulario */
    flex-direction: column; /* Colocar los elementos en columna */
    gap: 15px; /* Espacio entre los elementos del formulario */
}

/* Estilos para los labels */
form label {
    font-weight: bold; /* Negrita para los labels */
    margin-bottom: 5px; /* Espacio debajo del label */
    color: #ffffff; /* Color del texto */
}

/* Estilos para los inputs y textarea */
form input[type="text"],
form input[type="email"],
form textarea {
    padding: 10px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde gris claro */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente */
    transition: border-color 0.3s; /* Transición suave para el borde */
}

/* Estilo para los inputs al enfocar */
form input[type="text"]:focus,
form input[type="email"]:focus,
form textarea:focus {
    border-color: #EB65A2; /* Cambia el color del borde al enfocar */
    outline: none; /* Eliminar el contorno predeterminado */
}

/* Estilos para el botón de envío */
form button {
    padding: 10px 15px; /* Espaciado interno */
    background-color: #EB65A2; /* Color de fondo */
    color: white; /* Color del texto */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    font-size: 16px; /* Tamaño de fuente */
    cursor: pointer; /* Cambiar cursor al pasar sobre el botón */
    transition: background-color 0.3s; /* Transición suave para el fondo */
}

/* Estilo para el botón al pasar el ratón */
form button:hover {
    background-color: #F4AEAE; /* Color más oscuro al pasar el ratón */
}

/* Estilos para el botón flotante */
.btn-flotante {
    position: fixed;
    margin-right: 20px;
    bottom: 20px; /* Distancia del fondo */
    right: 20px; /* Distancia del lado derecho */
    background-color: rgb(235, 101, 162); /* Color de fondo */
    color: white; /* Color del texto */
    padding: 10px 15px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    text-decoration: none; /* Sin subrayado */
    font-size: 16px; /* Tamaño de fuente */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra */
    transition: background-color 0.3s; /* Transición suave */
    z-index: 3;
}
.shadow-effect {
    border: none;
    color: white;
    padding: 14px 28px;
    cursor: pointer;
    border-radius: 5px;
    background-color: #EB65A2; /* Color base del botón */
    transition: box-shadow 0.3s ease-in-out; /* Transición suave del efecto de sombra */
  }
  
.shadow-effect:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Aumenta el desplazamiento y la opacidad de la sombra */
  }
.btn-flotante:hover {
    background-color: #D71032; /* Color al pasar el ratón */
}
.shadow-effect {
    border: none;
    color: white;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 5px;
    background-color: #D71032; /* Color base del botón */
    transition: box-shadow 0.3s ease-in-out; /* Transición suave del efecto de sombra */
  }
  
.shadow-effect:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* Aumenta el desplazamiento y la opacidad de la sombra */
  }

.payment-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.payment-button img {
    width: 150px; /* Adjust the size as needed */
    height: auto;
    cursor: pointer; /* Changes cursor to pointer on hover */
    transition: transform 0.2s; /* Smooth scaling effect */
}

.payment-button img:hover {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
}
.whatsapp {
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
  }
  
  .whatsapp-icon {
    margin-top:13px;
  }
/* Estilos del pie de página */
footer {
    color: #F4AEAE;
    background-color: #D71032;
    text-align: center;
    padding: 20px;
}
/* Estilos para los iconos sociales */
.social-icons {
    display: flex; /* Usar flexbox para alinear los iconos */
    justify-content: center; /* Centrar horizontalmente */
    margin: 20px 0; /* Espaciado vertical */
}

.social-icon {
    margin: 0 10px; /* Espaciado entre los iconos */
    color: #ffffff; /* Color del icono */
    font-size: 24px; /* Tamaño del icono */
    transition: color 0.3s; /* Transición suave para el color */
}

.social-icon:hover {
    color: #F8CADC; /* Color al pasar el ratón */
}