body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

html, body {
    height: 100%;
    margin: 0;
}

header, main, footer {
    padding: 20px;
}

header, header a {
    color: white !important;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

a {
    text-decoration: none;
    color: #007BFF;
}

a:hover {
    text-decoration: underline;
}

footer {
    text-align: center;
    margin-top: 20px;
    flex-shrink: 0;
}


/* Centrar el título principal */
h1 {
    text-align: center;
}

/* Centrar el menú */
nav {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

nav a {
    margin: 0 15px; /* Ajusta el espaciado entre los elementos del menú según necesites */
    text-decoration: none;
    color: #000; /* Cambia el color según tu diseño */
}

nav a:hover {
    color: #ff6347; /* Mantenemos el efecto hover para los enlaces del menú */
}


/* Establecer la imagen de fondo */
body {
    background-image: url('../assets/images/main_background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Estilo para <main> */
main {
    flex: 1;
    width: 80%; /* O el ancho que prefieras */
    margin: 20px auto; /* Centra el recuadro horizontalmente y añade margen superior e inferior */
    background-color: rgba(255, 255, 255, 0.8); /* Blanco con transparencia para ver la imagen de fondo */
    padding: 20px; /* Espaciado interno */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Opcional: añade sombra para resaltar el recuadro */
    border-radius: 10px; /* Opcional: bordes redondeados */
}


/* Animación para imágenes */
.animate-image {
    transition: transform 0.5s ease;
    transform: scale(1.1); /* Aumenta el tamaño de la imagen */
}

/* Cambio de color de enlaces al pasar el ratón */
a:hover {
    color: #ff6347; /* Cambia este color según prefieras */
}


/*
===================================================================
                            INDEX
===================================================================
*/

.features-container {
    display: flex;
    justify-content: space-around; /* Distribuye el espacio entre las secciones */
    flex-wrap: wrap; /* Permite que las secciones se ajusten en filas según el ancho de la pantalla */
}

.feature-box {
    flex: 1; /* Permite que las cajas se expandan para ocupar el espacio disponible */
    margin: 10px; /* Añade un poco de espacio alrededor de las cajas */
    max-width: 45%; /* Limita el ancho máximo de las cajas para evitar que sean demasiado grandes */
    text-align: center;
    border: 2px solid #b7edff; /* Establece un borde sólido celeste */
    border-radius: 5px; /* Opcional: añade bordes redondeados */
    display: flex;
    flex-direction: column;
}

.feature-box img {
    width: 100%; /* Asegura que la imagen se expanda para cubrir el ancho del contenedor */
    height: 400px; /* Establece una altura fija para todas las imágenes */
    object-fit: cover; /* Asegura que la imagen cubra el espacio asignado sin distorsionarse */
    border-radius: 5px;
    margin-bottom: 20px; /* Espacio debajo de la imagen */
}

/* Asegura que el contenido textual se alinee en la parte inferior */
.feature-box div.text-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Ajustes adicionales para centrar el contenido y mejorar la presentación */
.feature-box h3, .feature-box p, .feature-box a {
    text-align: center;
    margin-top: 20px; /* Ajusta según sea necesario para uniformizar el espacio debajo de las imágenes */
}

.feature-box a {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.feature-box a:hover {
    background-color: #0056b3;
}



/*
===================================================================
                            TEAM
===================================================================
*/

.team-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* Esto asegura un espaciado uniforme y que los elementos se centren */
    gap: 20px; /* Espacio entre los elementos */
}

.team-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra los elementos horizontalmente */
    align-items: center; /* Centra los elementos verticalmente (útil si hay espacio adicional) */
    gap: 20px; /* Mantiene el espacio entre los elementos */
}

.team-member {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1; /* Esto permite que los elementos crezcan para llenar el espacio disponible */
    min-width: 250px; /* Mínimo ancho antes de que el elemento pase a la siguiente fila */
    max-width: 300px; /* Máximo ancho del elemento */
    text-align: center;
    margin-bottom: 20px; /* Espacio adicional en la parte inferior, si es necesario */
}

.team-photo {
    width: 150px; /* Ajusta el ancho según tus necesidades */
    height: 150px; /* Ajusta la altura según tus necesidades */
    border-radius: 50%;
    object-fit: cover; /* Asegura que la imagen cubra el espacio asignado sin distorsionarse */
    display: block;
    margin: 0 auto 10px; /* Centra la imagen y añade margen en la parte inferior */
}

.team-area, .team-role {
    font-size: 0.8rem; /* Reduce el tamaño de la fuente */
    margin-top: 2px; /* Reduce el espacio superior */
    margin-bottom: 2px; /* Reduce el espacio inferior */
}

.team-member h3 {
    margin-bottom: 0; /* Reduce o elimina el margen inferior del nombre */
}





/*
===================================================================
                            RESEARCH / NEWS
===================================================================
*/


.news-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Ajusta el espacio entre las tarjetas */
}

.news-item {
    flex: 1 1 calc(50% - 20px); /* Ajusta el ancho de las tarjetas para que ocupen el 50% menos el espacio del gap */
    border: 1px solid #a7d4ff; /* Borde de las tarjetas */
    padding: 15px; /* Espaciado interno de las tarjetas */
    border-radius: 5px; /* Bordes redondeados */
    box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el ancho total */
}

.news-item h3 {
    margin-top: 0;
}

.news-item img {
    max-width: 100%; /* Asegura que la imagen no exceda el ancho de su contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Evita que la imagen tenga espacio extra debajo */
    margin: 0 auto; /* Centra la imagen si no ocupa el ancho completo */
}

.news-item p {
    text-align: justify; /* Justifica el texto dentro de .news-item */
}

.news-item a {
    display: block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s;
    text-align: center;
    margin-top: 10px;
}

.news-item a:hover {
    background-color: #0056b3;
}



/*Profile - for seanimalmove service*/


.profile-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin: 2rem 0;
}

.profile-container img.team-photo {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid #005b66; /* un color acorde con temática marina */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.profile-text {
    flex: 1;
    min-width: 260px;
}

.profile-text h2 {
    font-size: 1.8rem;
    color: #005b66;
    margin-bottom: 0.5rem;
}

.profile-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
}

.spectrogram {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2rem auto;
    text-align: center;
}