/* Estilos generales */
body {
    font-family: 'Times New Roman', Times, serif;
    background-color: #F0F4EF; /* Fondo verde muy claro */
    color: #333333; /* Texto gris oscuro */
    font-size: large;
}

nav.navbar {
    background-color: #F7F7F7; /* Navbar en beige claro */
    border-bottom: 2px solid #8D6E63; /* Borde marrón */
}

nav.navbar .navbar-brand {
    font-weight: bold;
    color: #4CAF50; /* Texto verde oscuro */
}

nav.navbar .nav-link {
    color: #4CAF50;
}

nav.navbar .nav-link:hover {
    color: #333333; /* Al pasar el mouse */
}

/* Logo */
.logo {
    width: 50px;  /* Ajusta el tamaño del logo */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-right: 10px; /* Espacio entre el logo y el texto */
}

header.hero-section {
    background-image: url('../img/portada.jpeg'); /* Imagen de fondo de jardín */
    background-size: cover;
    background-position: center;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

header.hero-section h1 {
    color: white;
    font-size: 48px;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro semi-transparente */
    padding: 10px 20px;
    border-radius: 8px;
}

/* Sección de Galería */
#gallery {
    background-color: #F0F4EF; /* Fondo claro para la galería */
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

#gallery h2 {
    color: #4CAF50;
    margin-bottom: 40px;
}

#gallery h3 {
    color: #4CAF50;
    margin-bottom: 20px;
}

#gallery img {
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para las imágenes */
    transition: transform 0.3s ease;
}

#gallery img:hover {
    transform: scale(1.05); /* Zoom suave al pasar el mouse */
}


/* Estilos del Footer */
footer {
    background-color: #F7F7F7; /* Fondo neutro claro */
    color: #333333; /* Texto gris oscuro */
}

footer p {
    margin: 0;
    font-size: 14px;
}

footer .logo-footer {
    height: 50px; /* Tamaño del logo */
    width: auto;
}