/* Importa il font Open Sans da Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

/* Stile generale */
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Contenitore del logo */
.logo-container {
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 10;
}

.logo-container img {
    width: 80px; /* Larghezza del logo */
    height: auto;
}

/* Contenitore del titolo */
.title-container {
    position: absolute;
    top: 150px; /* Spostato 20px più in alto (era 170px) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Sopra al banner */
    text-align: center;
    font-size: 1.9em; /* Ridotto da 3.8em a 1.9em (la metà) */
    font-weight: bold;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Ombra scura per contrasto */
    background-color: rgba(24, 136, 135, 0.85); /* Sfondo semi-trasparente verde acqua #188887 */
    padding: 15px 30px;
    border-radius: 8px;
    backdrop-filter: blur(5px); /* Effetto sfocatura dello sfondo */
    border: 2px solid rgba(255, 255, 255, 0.3); /* Bordo sottile bianco */
}

/* Banner con slideshow CSS */
.banner {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
}

.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    animation: slideshow 40s infinite;
    filter: saturate(0.2); /* Riduce la saturazione al 70% */
}

.slide-1 {
    background-image: url('uploaded-image-526602579.jpg');
    animation-delay: 0s;
}

.slide-2 {
    background-image: url('immagine2.jpg');
    animation-delay: 4s;
}

.slide-3 {
    background-image: url('immagine3.jpg');
    animation-delay: 8s;
}

.slide-4 {
    background-image: url('immagine4.jpg');
    animation-delay: 12s;
}

.slide-5 {
    background-image: url('immagine5.jpg');
    animation-delay: 16s;
}

.slide-6 {
    background-image: url('immagine6.jpg');
    animation-delay: 20s;
}

.slide-7 {
    background-image: url('immagine7.jpg');
    animation-delay: 24s;
}

.slide-8 {
    background-image: url('immagine8.jpg');
    animation-delay: 28s;
}

.slide-9 {
    background-image: url('immagine9.jpg');
    animation-delay: 32s;
}

.slide-10 {
    background-image: url('immagine10.jpg');
    animation-delay: 36s;
}

@keyframes slideshow {
    0% { opacity: 0; }
    2.5% { opacity: 1; }
    10% { opacity: 1; }
    12.5% { opacity: 0; }
    100% { opacity: 0; }
}

/* Contenitore principale */
.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 60px 20px 20px; /* Mantiene il contenitore in basso di 40px */
}

/* Immagini */
img {
    display: block;
    margin-right: 20px;
}

/* Contenuto */
.content {
    max-width: 600px;
}

/* Sezioni di contenuto */
.content-section {
    margin-bottom: 20px; /* Spaziatura tra le sezioni */
}

.content-section:last-child {
    margin-bottom: 0; /* Rimuove il margine dall'ultima sezione */
}

.content-section h3 {
    font-size: 1.5em;
    font-weight: bold;
    color: #000;
    margin-bottom: 10px;
    margin-top: 0;
}

p {
    font-size: 1.2em;
    color: #6b6b6b;
    margin-top: 10px;
}

/* Footer */
footer {
    background-color: #188887;
    height: 150px;
    color: white;
    position: relative;
    margin-top: auto;
    border-top: 6px solid #f28d6d; /* Fascia arancione */
}

footer p {
    position: absolute;
    bottom: 30px;
    right: 30px;
    margin: 0;
    color: #ffffff;
}