/*Carregar font*/
@font-face {
    font-family: 'Linux Libertine G';
    src: url('LinLibertine.ttf') format('truetype');
}


/* Estilo general */
body {
    font-family: Arial, sans-serif; /* Define la fuente principal para el cuerpo */
    background-color: #fafffe; /* Establece el color de fondo */
    color: #333; /* Define el color del texto */
    margin: 20px; /* Agrega espacio entre el texto y los márgenes del navegador */
    padding: 0;
    text-align: justify;
    line-height: 1.5;
}

/* Estilo del encabezado */
header {
    background-color: #7ecab7; /* Establece el color de fondo del encabezado (verde menta) */
    color: white; /* Establece el color del texto en el encabezado */
    padding: 0; /* Elimina el relleno predeterminado */
    text-align: center; /* Centra el contenido del encabezado */
    border-radius: 10px; /* Agrega bordes redondeados */
}

header img {
    max-width: 300px; /* Limita el ancho máximo de la imagen dentro del encabezado */
    height: auto; /* Permite que la altura se ajuste automáticamente */
}

header h1 {
    margin: 0; /* Elimina los márgenes predeterminados */
    font-size: 2em; /* Establece el tamaño del título */
    color: #eef7f4; /* Cambia el color del texto del título */
    font-weight: lighter; /* Define el grosor de la fuente */
}

/* Estilo del menú de navegación */
nav ul {
    list-style: none; /* Elimina los marcadores de lista */
    background-color: #45c0a1; /* Establece el color de fondo del menú de navegación */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Agrega sombra al menú */
    border-radius: 10px; /* Agrega bordes redondeados */
    overflow: hidden; /* Oculta cualquier contenido que desborde */
    padding: 10px; /* Añade relleno alrededor de los elementos del menú */
}

nav ul li {
    display: inline-block; /* Hace que los elementos de la lista aparezcan en línea */
    margin-right: 20px; /* Establece el espacio entre los elementos de la lista */
}

nav ul li a {
    color: white; /* Establece el color del texto del enlace */
    text-decoration: none; /* Elimina el subrayado predeterminado del enlace */
    font-size: 1.2em; /* Define el tamaño del texto del enlace */
    transition: color 0.3s; /* Agrega una transición suave al color del texto */
    padding: 20px; /* Añade espacio alrededor del texto del enlace */
}

/*Idioma*/
.language-link {
    color: white; /* Canvia el color del text */
    background-color: #448373; /* Canvia el color de fons */
    padding: 5px 10px; /* Ajusta l'espai interior del botó */
    border-radius: 5px; /* Arrodoneix els cantons */
    text-decoration: none; /* Elimina el subratllat */
}

/* Cambio de color al pasar el ratón */
nav ul li a:hover {
    background-color: #fafffe; /* Cambia el color de fondo al pasar el ratón */
    color:#448373; /* Cambia el color del texto al pasar el ratón */
}

/* Estilo del contenido principal */
main {
    padding: 20px 0; /* Añade relleno alrededor del contenido principal */
}

section {
    display: flex; /* Cambia el comportamiento de visualización a flexbox */
    flex-direction: column; /* Apila los elementos de manera vertical */
    justify-content: flex-start; /* Alinea los elementos al principio del contenedor */
    margin-bottom: 20px; /* Agrega espacio entre las secciones */
    border-radius: 10px; /* Agrega bordes redondeados */
    overflow: hidden; /* Oculta cualquier contenido que desborde */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Agrega sombra a las secciones */
    padding: 20px; /* Añade relleno dentro de las secciones */
    box-sizing: border-box; /* Incluye el borde y el relleno en el ancho y alto del elemento */
}

section ul{
    text-align: left; /* Alinea el texto de la lista a la izquierda */
    margin-top: 40px;
    margin-left: 0; /* Elimina el margen izquierdo de la lista */
    list-style-type: none;
}

section ul li{
    margin-bottom: 10px; /* Espacio entre elementos */
    margin-left: 0;
}

section a{
    color:#448373;
} 

section ul li img{
    max-width: 20px; /* Establece el ancho máximo de la imagen */
    max-height: 20px; /* Establece la altura máxima de la imagen */
    border-radius: 0px; /* Agrega bordes redondeados a la imagen */
    margin-right: 5px;
}

section div{
    margin-top: 0px; /* Elimina el margen superior */
    padding-bottom: 20px; /* Añade espacio al final del contenido */
    overflow: hidden; /* Oculta cualquier contenido que desborde */
}

section h1 {
    font-family: 'Linux Libertine G';
    font-size: 28pt;
    font-weight: bold;
    color: #448373; /* Establece el color del texto del título */
    margin-top: 0px;
    margin-bottom: 30px;
}

section p{
    font-size: 12pt;
    margin-right: 40px; /* Ajusta el margen derecho */
}

section img{
    width:100%; /* Permite que la imagen se ajuste automáticamente */
    max-width: 400px; /* Establece el ancho máximo de la imagen */
    max-height: 400px; /* Establece la altura máxima de la imagen */
    margin-top: 0px; /* Elimina el margen superior de la imagen */
    border-radius: 10px; /* Agrega bordes redondeados a la imagen */
    overflow: hidden; /* Oculta cualquier contenido que desborde */
}

/* Estilos para la figura */
figure {
    margin-left: 0; /* Elimina el margen izquierdo de la figura */
    margin-right: 0; /* Elimina el margen derecho de la figura */
    max-width: 400px; /* Establece el ancho máximo de la figura */
    margin-top: 20px; /* Agrega espacio encima de la figura */
}

figcaption {
    font-size: smaller; /* Establece un tamaño de fuente más pequeño */
    color: gray; /* Establece el color del texto de la leyenda */
    margin-bottom: 20px; /* Agrega espacio debajo de la leyenda */
}

/* Estilo del pie de página */
footer {
    background-color: #7ecab7; /* Establece el color de fondo del pie de página */
    color: white; /* Establece el color del texto */
    text-align: center; /* Centra el contenido del pie de página */
    padding: 20px 0; /* Añade relleno arriba y abajo del pie de página */
    border-radius: 10px; /* Agrega bordes redondeados */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Agrega sombra al pie de página */
}

/*Google maps*/
.maps {
    max-height: 50%;
    max-width: 400px;
    border-radius: 10px; /* Agrega bordes redondeados */
    margin-right: 0px;
    margin-left: 0px;
    padding: 0px;
}

.maps iframe {
    width: 400px;
    border-radius: 10px; /* Agrega bordes redondeados */
}

/*Doctoralia Insta*/
.xarxes {
    margin-right: 10px;
    margin-left: 10px;
}

/*Inclou l'estil per al CARRUSEL*/
.carousel-container {
    max-width: 400px;
    width: 100%; /* Amplada del carrusel */
    height: auto;
    padding:0;
    position: relative;
    overflow: hidden; /* Oculta las imágenes fuera de la pantalla */
    border-radius: 10px; /* Agrega bordes redondeados */
}

/* Estilo para la imagen del carrusel */
.carousel-image {
    max-width: 100%;
    border-radius: 10px; /* Bordes redondeados */
}

/* Estilo para los botones de control */
.carousel-button {
    position: absolute;
    top: 50%; /* Centra verticalmente los botones */
    transform: translateY(-50%);
    font-size: 1.5em; /* Tamaño del icono */
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    color: white; /* Color del icono */
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px; /* Forma redonda */
    transition: background 0.3s ease-in-out; /* Efecto de transición */
    z-index: 10; /* Asegura que los botones estén por encima de otros elementos */
}

/* Añade estilos de hover para cambiar el color del botón */
.carousel-button:hover {
    background: rgba(0, 0, 0, 0.8); /* Oscurece el fondo al pasar el ratón */
}

/* Posición de los botones */
#prevButton {
    left: 10px; /* Posición a la izquierda */
}

#nextButton {
    right: 10px; /* Posición a la derecha */
}

/* Estilos para el formulario */
form {
    width: 80%; /* Ancho del formulario */
    margin-top: 40px;
    padding: 20px;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px; /* Borde redondeado */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra */
    margin-bottom: 60px;
}
/* Estilos para los elementos del formulario */
label {
    display: block;
    margin-top: 8px;
    margin-bottom: 2px;
    color: #343a40;
}

input[type="text"],
select {
    width: 45%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

input[type="tel"], input[type="email"] {
    width: 35%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
}

textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    resize: vertical; /* Permitir cambiar el tamaño verticalmente */
}

input[type="file"] {
    margin-bottom: 15px;
}

input[type="number"] {
    margin-bottom: 15px;
}

button {
    background-color: #329179;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #45c0a1;
}

input[type="checkbox"] {
    display: inline;
    vertical-align: middle;
}
.label-en-linia {
    display: inline; /* Assegura que el label es mostri en línia amb l'input */
    margin-left: 10px; /* Opcional: espai entre el checkbox i el text */
    vertical-align: middle;
}

/* Estilo para los botones */
button[type="submit"] {
    display: block;
    width: 100%; /* Botón de ancho completo */
}

button[type="submit"]:hover {
    background-color: #45c0a1;
}

/* Media queries para pantallas de hasta 1024px */
@media only screen and (max-width: 1024px) {
    /* Estilos específicos para pantallas más pequeñas */
    /*Ajuste menu*/
    nav ul {
        display: block; /* Cambia a diseño de bloque */
        padding: 0px;
    }

    nav ul li {
        display: block; /* Cambia a diseño de bloque */
        margin-top: 10px; /* Elimina el margen superior */
        margin-right: 0; /* Elimina el margen derecho */
        margin-left: 0; /* Elimina el margen izquierdo */
        margin-bottom: 10px; /* Añade margen inferior para separar los elementos */
    }

    nav ul li a {
        padding-top: 5px;
        padding-bottom: 5px;
        padding-right: 30px;
        padding-left: 30px;
    }

    /*Ajuste secciones*/
    section {
        align-items:flex-start; /* Aliniamos los elementos verticalmente en la parte superior */
    }

    section p{
        margin-right: 10px; /* Ajusta el margen derecho */
    }

    section div{
        padding: 5px; /* Ajusta el relleno */
        margin-right: 10px; /* Ajusta el margen derecho */
        max-width: 700px; /* Establece el ancho máximo del contenido */
    }

    /* Estilos para la figura */
    figure {
        width: 100%;
        max-width: 100%; /* Establece el ancho máximo de la figura */
        margin-top: 5px; /* Ajusta el margen superior */
    }
    .maps iframe {
        width: 100%;
    }
    input[type="text"],
    select {
        width: 100%;
    }

    input[type="tel"], input[type="email"] {
        width: 100%;
    }

}

/* Media queries para pantallas mayores a 1024px */
@media (min-width: 1024px) {
    /* Estilos específicos para pantallas más grandes */
    section {
        flex-direction: row; /* Cambia la dirección del flujo a fila en pantallas grandes */
        justify-content:center; /* Distribuye los elementos de forma uniforme */
        align-items: flex-start; /* Aliniamos los elementos verticalmente en la parte superior */
    }

    section div{
        justify-content:center; /* Distribuye los elementos de forma uniforme */
        margin-top: 0px; /* Ajusta el margen superior */
        max-width: 600px; /* Establece el ancho máximo del contenido */
    }

    section div img{
        max-width: 400px;
        width: 100%;
    }

}