body {
    margin: 0; /* Elimina el margen predeterminado */
    padding: 0; /* Elimina el padding predeterminado */
    background: radial-gradient(#E7E7E7, #E2E2E2); /* Aplicar el gradiente radial al fondo */
    font-family: Arial, sans-serif; /* Configura la fuente predeterminada (ajusta según sea necesario) */
}


.containerc {
    background: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    width: 100%;
}



label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
    color: #555;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 0.8rem;
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

textarea {
    height: 150px;
    resize: vertical;
}

input[type="submit"] {
    background-color: #007BFF;
    border: none;
    color: #fff;
    padding: 0.8rem 1.5rem;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

.success-message {
    display: none;
    margin-top: 1rem;
    color: #28a745;
    font-size: 16px;
}

.error-message {
    display: none;
    margin-top: 1rem;
    color: #dc3545;
    font-size: 16px;
}

p{
     font-size: 19px;
    margin-bottom: 20px;
    font-family: 'Roboto Black', sans-serif; /* Tipografía moderna y legible para el párrafo */
    color: #555; /* Color gris para el texto */


}

.map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh; /* Ajusta la altura del contenedor del mapa según sea necesario */
    margin: 0;
}

#map {
    border: 0;
    max-width: 100%; /* Hace que el mapa sea responsive */
    height: 450px; /* Ajusta la altura del mapa según sea necesario */
}




.contact-details, .hours-of-operation {
    background-color: #ffffff; /* Fondo blanco para claridad */
    border-radius: 8px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para profundidad */
    margin: 20px 0; /* Espaciado superior e inferior entre secciones */
    max-width: 800px; /* Máximo ancho para mejor lectura */
    margin-left: auto;
    margin-right: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

/* Efecto Hover para Secciones */
.contact-details:hover, .hours-of-operation:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra más pronunciada */
    transform: translateY(-5px); /* Elevación en hover */
}

/* Títulos de Sección */
.contact-details h3, .hours-of-operation h3 {
    font-family: 'Acumin Pro Condensed', sans-serif; /* Fuente Acumin Pro Condensed */
    font-weight: 700; /* Negrilla */
    font-size: 1.5rem; /* Tamaño de fuente grande para los títulos */
    color: #333; /* Color oscuro para el texto */
    margin-bottom: 15px; /* Espaciado inferior */
    border-bottom: 2px solid #25D366; /* Línea inferior color verde */
    padding-bottom: 5px; /* Espaciado interior debajo del título */
}

/* Datos de Contacto y Horas de Operación */
.contact-details p, .hours-of-operation p {
    font-family: 'Roboto', sans-serif; /* Fuente Roboto Medium */
    font-size: 1rem; /* Tamaño de fuente estándar */
    color: #555; /* Color gris oscuro para el texto */
    margin: 10px 0; /* Espaciado superior e inferior entre párrafos */
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-details, .hours-of-operation {
        padding: 15px; /* Menos espaciado interno en pantallas pequeñas */
        margin: 10px 0; /* Espaciado ajustado en pantallas pequeñas */
    }

    .contact-details h3, .hours-of-operation h3 {
        font-size: 1.25rem; /* Tamaño de fuente más pequeño para títulos */
    }

    .contact-details p, .hours-of-operation p {
        font-size: 0.9rem; /* Tamaño de fuente más pequeño para párrafos */
    }
}

@media (max-width: 480px) {
    .contact-details, .hours-of-operation {
        padding: 10px; /* Menor espaciado interno en pantallas muy pequeñas */
        margin: 5px 0; /* Espaciado ajustado en pantallas muy pequeñas */
    }

    .contact-details h3, .hours-of-operation h3 {
        font-size: 1rem; /* Tamaño de fuente aún más pequeño para títulos */
    }

    .contact-details p, .hours-of-operation p {
        font-size: 0.8rem; /* Tamaño de fuente aún más pequeño para párrafos */
    }
}