body {
	background-image: url('sailboat.jpeg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed; 
}

.main-nav ul {
    list-style-type: none; /* Rimuove i pallini della lista */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Importante per float */
    background-color: #2c3e50; /* Colore di sfondo del menu */
    text-align: left; /* Centra le voci del menu */
}

.main-nav li {
    display: inline-block; /* Rende le voci orizzontali */
    text-align: center;
}

.main-nav li a, .dropbtn {
    display: block; /* Rende cliccabile tutta l'area del link */
    color: white; /* Colore del testo */
    text-align: center;
    padding: 14px 16px; /* Spaziatura interna */
    text-decoration: none; /* Rimuove la sottolineatura */
}

.main-nav li a:hover, .dropdown:hover .dropbtn {
    background-color: #E6B000; /* Colore al passaggio del mouse */
}

/* Stile per il dropdown */
.dropdown {
    display: inline-block; /* Permette al dropdown di stare sulla riga */
}

.dropdown-content {
    display: none; /* Nasconde il contenuto del dropdown di default */
    position: absolute; /* Posiziona il dropdown sopra il resto del contenuto */
    background-color: #2c3e50; /* Colore di sfondo del dropdown */
    min-width: 160px; /* Larghezza minima */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Ombra per profondità */
    z-index: 1; /* Assicura che sia sopra altri elementi */
}

.dropdown-content a {
    color: #2c3e50; /* Colore del testo dei link del dropdown */
    padding: 12px 16px;
    text-decoration: none;
    display: block; /* Ogni link occupa una riga */
    text-align: left; /* Allinea il testo a sinistra */
}

.dropdown-content a:hover {
    background-color: #ddd; /* Colore al passaggio del mouse sui link del dropdown */
}

/* Mostra il dropdown quando si passa il mouse sull'elemento padre */
.dropdown:hover .dropdown-content {
    color: #E6B000; 
    display: block;
}

.content-section {
	background-color: rgba(255, 255, 255, 0.85); /* Sfondo semi-trasparente per il contenuto */
        margin: 2rem auto; /* Margine e centratura automatica */
        padding: 2rem;
        max-width: 800px; /* Larghezza massima del contenuto */
        border-radius: 1rem; /* Bordi arrotondati */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Ombra più pronunciata */
        text-align: center;
}

.content-section h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        color: #2c3e50;
}

.content-section p {
        font-size: 1.1rem;
        line-height: 1.6;
        color: #555;
}

/* --- MEDIA QUERY PER SCHERMI PIÙ PICCOLI (es. max-width: 768px per tablet e cellulari) --- */
@media screen and (max-width: 768px) {
    /* Qui metti il CSS specifico per i dispositivi mobili */
    /* Queste regole sovrascriveranno quelle precedenti se la condizione è vera */

    .main-nav ul {
        /* Per i cellulari, potresti volere che ogni voce sia su una riga */
        text-align: left; /* Allinea il testo delle voci a sinistra */
        background-color: #34495e; /* Un colore leggermente diverso per mobile, opzionale */
    }

    .main-nav li {
        display: block; /* Ogni voce occupa l'intera larghezza su mobile */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Linea divisoria tra le voci */
    }

    .main-nav li:last-child {
        border-bottom: none; /* Rimuove la linea dall'ultima voce */
    }

    .main-nav li a, .dropbtn {
        padding: 10px 15px; /* Riduci un po' il padding per schermi più piccoli */
        font-size: 1.1em; /* Aumenta leggermente la dimensione del font per renderlo leggibile */
    }

    /* Per il dropdown su mobile, spesso si usa un approccio diverso */
    /* Magari non vuoi che si apra in overlay, ma che le voci si espandano sotto */
    .dropdown .dropbtn {
        width: 100%; /* Il bottone del dropdown occupa tutta la larghezza */
        text-align: left; /* Allinea il testo del bottone dropdown a sinistra */
    }

    .dropdown-content {
        position: static; /* Cambia da absolute a static per non far "fluttuare" il dropdown */
        display: none; /* Ancora nascosto di default */
        width: 100%; /* Occupa tutta la larghezza disponibile */
        box-shadow: none; /* Rimuovi l'ombra per un look più pulito su mobile */
        background-color: #4a6781; /* Sfondo diverso per il contenuto del dropdown su mobile */
    }

    .dropdown-content a {
        padding-left: 30px; /* Indenta le voci del dropdown per distinguerle */
        color: #f9f9f9; /* Cambia il colore del testo per leggibilità sul nuovo sfondo */
        font-size: 1em;
    }

    .dropdown-content a:hover {
        background-color: #5b7999; /* Colore hover diverso per mobile */
    }

    /* Questo è un esempio di come mostrare il dropdown su mobile quando il genitore è hover */
    /* Potresti voler implementare un menu hamburger con JavaScript per una migliore UX su mobile */
    .dropdown:hover .dropdown-content {
        display: block; /* Mostra il contenuto del dropdown su hover */
    }
}