/* Stili di base per la navbar e la pagina */


body {


    margin: 0;


    font-family: Arial, sans-serif;


}





.container {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));


    gap: 20px; /* Spazio tra i link */


}





.navbar {


    background-color: white;


    padding: 10px 50px;


    display: flex;


    align-items: center;


    justify-content: space-between;


    flex-wrap: wrap;


}





.navbar .link {


    display: flex;


}





.navbar .link a {


    color: black;


    text-decoration: none;


    margin-right: 30px;


    font-size: 17px;


}





.spazio-vuoto {


    margin-top: 100px; /* Spazio vuoto sopra l'elemento */


    margin-bottom: 50px; /* Spazio vuoto sotto l'elemento */


  }


  


/* Pulsante dropdown */


.dropbtn {


    background-color: white;


    color: black;


    padding: 10px 15px;


    font-size: 16px;


    border: 2px solid #9be937;


    border-radius: 5px;


    cursor: pointer;


    transition: background-color 0.3s, box-shadow 0.3s;


}





.dropbtn:hover {


    background-color: #9be937;


    color: white;


    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);


}





/* Dropdown contenuto */


.dropdown-content {


    display: none;


    position: absolute;


    background-color: white;


    min-width: 160px;


    box-shadow: 0 8px 16px rgba(0,0,0,0.2);


    z-index: 1;


    text-align: left;


}





.dropdown-content a {


    color: black;


    padding: 12px 16px;


    text-decoration: none;


    display: block;


}





.dropdown-content a:hover {


    background-color: #f1f1f1;


}





/* Media query per dispositivi grandi (sopra i 1126px) */


@media (min-width: 1126px) {


    .dropdown {


        display: none; /* Nasconde il menu a tendina sopra i 1126px */


    }


}





/* Media query per dispositivi medi (tra 769px e 1126px) */


@media (max-width: 1126px) and (min-width: 769px) {


    .navbar {


        flex-direction: row;


        align-items: center;


        justify-content: space-between;


    }


    .navbar .link {


        display: none; /* Nasconde i link originali */


    }


    .dropdown {


        display: block; /* Mostra solo il pulsante dropdown */


    }


    .dropbtn {


        margin-left: auto; /* Allinea il pulsante a destra */


    }


}





/* Media query per dispositivi piccoli (sotto i 768px) */


@media (max-width: 768px) {


    .navbar {


        flex-direction: column; /* Dispone gli elementi verticalmente */


        align-items: center;


    }


    .dropbtn {


        margin-top: 10px;


        width: auto;


        padding: 10px 20px;


        font-size: 14px;


        text-align: center; /* Centra il testo del pulsante */


    }


}





/* Effetti al passaggio del mouse */


.dropbtn:hover {


    background-color: #9be937;


    color: white;


    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);


}





/* Linea di separazione */


.linea {


    width: 100%;


    height: 3px;


    background-color: #9be937;


    border: none;


}





/* Stili per gli sfondi */


.sfondo, .sfondo2, .sfondo3 {


    background-size: cover;


    background-position: center;


    color: white;


    display: flex;


    align-items: center;


    justify-content: center;


    text-align: center;


    padding: 20px;


    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);


}





.sfondo { background-image: url('../imag/terra_mani.jpg'); height: 550px; }


.sfondo2 { background-image: url('../imag/eco-business.jpeg'); height: 550px; }


.sfondo3 { background-image: url('../imag/bambino.jpg'); height: 450px; }





/* Stili per le immagini */


.contenitore { text-align: center; }


.immagine-centrata { display: inline-block; width: 50%; max-width: 500px; }


.contenitore2 { text-align: center; }


.immagine-sinistra {


    float: left;


    margin-left: 100px;


    width: 25%;


    max-width: 250px;


}





/* Stile per il link */


.centered-link {


    display: block;


    text-align: center;


    text-decoration: none;


    color: #9be937;


    font-size: 1.5rem;


    padding: 10px 20px;


    border: 2px solid #9be937;


    border-radius: 5px;


    margin: 20px auto;


    width: fit-content;


}