/* Configuración General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    background-image: url('fondo.jpg'); /* Cambia esto por la ruta de tu imagen */
    background-size: cover; /* Hace que la imagen cubra toda la pantalla */
    background-attachment: fixed; /* Mantiene la imagen fija al desplazarse */
    color: #333; /* Color del texto */
}

header {
    background-color: black; /* Color verde con opacidad */
    color: white;
    padding: 40px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 24px;
}

.navbar {
    position: relative;
}

.menu {
    list-style-type: none;
    display: flex;
}

.menu li {
    position: relative;
}

.menu a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
}

.submenu {
    display: none;
    position: absolute;
    background-color: #333;
}

.menu li:hover .submenu {
    display: block; /* Mostrar el submenu al pasar el ratón */
}

.menu-toggle {
    display: none; /* Ocultar en pantallas grandes */
}

/* Secciones */
.section {
    padding: 40px 20px;
}

.section h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* Cards */
.cards {
    display: flex;
    justify-content: space-around;
}

.card {
    background-color: rgba(249, 249, 249, 0.9); /* Fondo blanco con opacidad */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}

.card:hover {
    transform: scale(1.05);
}

/* Estilo del Formulario */
.formulario-contacto {
    max-width: 100%; /* Ancho máximo del formulario */
    margin: auto; /* Centrar el formulario */
    background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco con opacidad */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0px 4px 10px rgba(0,0,0,0.2); /* Sombra para profundidad */
}

.formulario-contacto label {
    margin-top: 10px; /* Espaciado superior para etiquetas */
}

.formulario-contacto input,
.formulario-contacto textarea {
    width: calc(100% - 20px); /* Ancho completo menos espaciado */
    padding: 10px; /* Espaciado interno */
    margin-top: 5px; /* Espaciado superior para campos */
    border-radius: 5px; /* Bordes redondeados para campos */
    border: 1px solid #ccc; /* Borde gris claro */
}

.formulario-contacto button {
    margin-top: 15px; /* Espaciado superior para botón */
    background-color: #4CAF50; /* Color verde para botón */
    color: white; /* Texto blanco en botón */
    border-radius: 5px; /* Bordes redondeados para botón */
    border: none; /* Sin borde en botón */
    padding: 10px; /* Espaciado interno en botón */
}

.formulario-contacto button:hover {
   background-color: #45a049; /* Color más oscuro al pasar el cursor sobre el botón */
}

/* Footer */
footer {
   background-color: rgba(51,51,51,0.8); /* Fondo oscuro con opacidad en pie de página */
   color: white;
   text-align: center;
   padding: 10px 0;
}

/* Responsive Design */
@media (max-width:768px) { 
   .cards {
       flex-direction: column; /* Cambia a columna en pantallas pequeñas */
       align-items:center; 
   }
}