/* Definizioni delle variabili */



:root {



    --main-color: #d29cd0;



    --h1-color: #b47cb2;



    --h2-color: #d29cd0;



    --strong-color: #d29cd0;



    --sfondo-color: #faf8f1;



    --font-size: 16px;



    --padding: 10px;



    --font-family: 'Arial', sans-serif; /* Aggiungi qui la variabile per il font */



}







/* Stile di base */



body {



    font-family: var(--font-family);



    margin: 0;



    padding: 0;



    text-align: center;



    background-color: var(--sfondo-color);



}







/* Header */



header {



    background-color: var(--main-color);



    color: var(--sfondo-color);



    position: fixed; /* Fissa il menu in alto */



    top: 0;



    left: 0;



    width: 100%;



    padding: 0; /* RIDOTTO da 10px a 5px */



    z-index: 1000; /* Mantiene il menu sopra agli altri elementi */



    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Leggera ombra per separarlo dal contenuto */



}







header h1 {



    margin: 0;



    font-size: 2.5em;



    color: var(--h1-color);



}







nav ul {



    list-style-type: none;



    padding: 0;



    display: flex;



    justify-content: center;



    flex-wrap: wrap;



}







nav ul li {



    margin: 10px;



}







nav ul li a {



    text-decoration: none;



    color: rgb(255, 255, 255);



    padding: 10px;



    display: block;



    background-color: var(--main-color);



    border-radius: 5px;



    font-weight: bold;



}







nav ul li a:hover {



    background-color: #ffffff;



    color: var(--main-color);



}







.menu-icon {



    display: none;



    font-size: 30px;



    cursor: pointer;



    color: white;



    padding: 10px;



}







/* Sezioni */



section {



    padding: 50px 20px;



    border-bottom: 1px solid #ddd;



    max-width: 900px;



    margin: auto;



}







section h2 {



    font-size: 2em;



    color: var(--h2-color);



    margin-bottom: 20px;



}







.richiamo {



  color: var(--main-color);          /* Cambia il colore del testo */



  font-size: 12px;         /* Cambia la dimensione del testo */



  line-height: 1.6;        /* (Opzionale) Migliora la leggibilità */



}







.dovesiamo {



  color: var(--main-color);          /* Cambia il colore del testo */



  font-size: 16px;         /* Cambia la dimensione del testo */



  line-height: 1.6;        /* (Opzionale) Migliora la leggibilità */



}







.telefono {



  color: var(--main-color);



}







b {



    font-size: 2em;



    color: var(--strong-color);



    margin-bottom: 20px;



}







section p {



    font-size: 1.1em;



    line-height: 1.6;



    color: #555;



}







/* Form Contatti */



form {



    display: flex;



    flex-direction: column;



    align-items: center;



    max-width: 500px;



    margin: 0 auto;



}







form input,



form textarea {



    width: 100%;



    max-width: 400px;



    margin: 10px 0;



    padding: 10px;



    border: 1px solid #ccc;



    border-radius: 5px;



    font-size: 1em;



}







form input[type="checkbox"] {



    margin-right: 10px;



}







form button {



    background-color: #e76f51;



    color: white;



    border: 2px solid #fff;



    padding: 10px 20px;



    cursor: pointer;



    border-radius: 5px;



    font-size: 1.1em;



    transition: background-color 0.3s;



}







.button-container {



    display: flex;



    gap: 10px; /* Distanza tra i bottoni */



    justify-content: center; /* Per centrare i bottoni */



}







form button:hover {



    background-color: #d62828;



}







/* Galleria Fotografica Personale */

#galleryModal {

  position: fixed;

  top: 0; 

  left: 0;

  width: 100vw; 

  height: 100vh;

  background: rgba(0,0,0,0.8);

  display: none;

  align-items: center; 

  justify-content: center;

  z-index: 1000;

  padding: 20px;

  box-sizing: border-box;

}



#galleryContent {

  position: relative;

  background: white;

  padding: 15px;

  border-radius: 8px;

  text-align: center;

  max-width: 800px;

  width: 100%;

  box-sizing: border-box;

}



#galleryContent img {

  max-width: 100%;

  max-height: 60vh;

  object-fit: contain;

}



#closeGallery {

  position: absolute;

  top: 10px; 

  right: 15px;

  cursor: pointer;

  font-size: 28px;

}



#galleryContent button {

  margin: 10px 5px;

  padding: 8px 16px;

  font-size: 16px;

  border: none;

  background-color: #333;

  color: white;

  border-radius: 4px;

  cursor: pointer;

}



#galleryContent button:hover {

  background-color: #555;

}



/* Galleria Fotografica */



.gallery-container {



    display: grid;



    grid-template-columns: repeat(3, 1fr); /* 3 colonne per riga */



    grid-gap: 20px; /* Distanza tra le immagini */



    margin-top: 20px;



    justify-items: center; /* Allinea al centro ogni elemento */



}







.gallery-item {



    text-align: center;



    width: 100%; /* Occupiamo tutta la larghezza disponibile */



    height: 250px; /* Impostiamo una altezza uniforme per tutte le immagini */



    display: flex;



    flex-direction: column;



    justify-content: space-between;



}







.gallery-item img {



    width: 100%;



    height: 180px; /* Impostiamo una altezza fissa per l'immagine */



    object-fit: cover; /* Assicura che l'immagine non venga distorta */



    border-radius: 10px;



    transition: transform 0.3s ease;



}







.gallery-item img:hover {



    transform: scale(1.05);



}







.gallery-item p {



    font-size: 1.1em;



    color: #264653;



    margin-top: 10px;



    font-weight: bold;



    text-align: center;



}







/* imgTestata */



#imgTestata {



    width: 100%;



    height: 300px; /* Altezza del imgTestata */



    overflow: hidden;



    margin-top: 70px; /* Distanza dal menu */



}







#imgTestata img {



    width: 100%;



    height: 100%;



    object-fit: cover; /* Rende l'immagine responsiva senza distorsioni */



}







/* Banner container */



#banner-container {



    padding: 0;



    width: 100%;



    max-width: 1200px;



    height: 480px; /* Altezza iniziale */



    overflow: hidden;



    margin: 0 auto;



    position: relative;



    border-radius: 10px;



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



}







/* Contenitore immagini */



#banner-images {



    display: flex;



    transition: transform 1s ease-in-out;



}







/* Stile delle immagini */



#banner-images img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







/* Sfondo sfocato dietro la modale */



#myModal {



    display: none;



    position: fixed;



    z-index: 1000; /* Assicura che la modale sia in primo piano */



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background-color: rgba(0, 0, 0, 0.7); /* Sfondo semi-trasparente */



    backdrop-filter: blur(5px); /* Applica la sfocatura allo sfondo */



    -webkit-backdrop-filter: blur(5px); /* Supporto per browser Webkit */



}







#myModal-content {



    background-color: #fff;



    margin: 0;



    padding: 20px;



    border-radius: 10px;



    max-width: 600px;



    width: 90%; /* La modale avrà una larghezza del 90% della finestra */



    position: absolute;



    top: 50%;



    left: 50%;



    transform: translate(-50%, -50%); /* Centra la modale */



}







#close {



    color: #aaa;



    float: right;



    font-size: 28px;



    font-weight: bold;



}







.close:hover,



.close:focus {



    color: black;



    text-decoration: none;



    cursor: pointer;



}







.close-btn {



    background-color: red;



    color: white;



    padding: 15px 30px;



    border: none;



    border-radius: 5px;



    cursor: pointer;



    font-size: 1.1em;



    top: 20px; /* Imposta la distanza dal bordo superiore */



    left: 50%;



    margin-bottom: 30px; /* Aggiungi margine inferiore per separare dal contenuto */



}







.close-btn:hover {



    background-color: darkred;



}







/* Media query per schermi piccoli */



@media (max-width: 768px) {



    @media (max-width: 768px) {



        nav ul {



            display: none;



            flex-direction: column;



            width: 100%;



            position: absolute;



            top: 50px;



            left: 0;



            background: var(--main-color);



            text-align: center;



        }



    



        nav ul.active {



            display: flex;



        }



    



        .menu-icon {



            display: block;



        }



    }







    section {



        padding: 30px 15px;



    }







    .gallery-container {



        flex-direction: column;



        align-items: center;



    }







    .gallery-container img {



        max-width: 100%;



    }







    #imgTestata {



        height: 150px; /* Altezza più bassa su schermi piccoli */



    }



    @media (max-width: 1024px) {



        .gallery-container {



            grid-template-columns: repeat(3, 1fr); /* 3 colonne per schermi di media dimensione */



        }



    }



    



    @media (max-width: 768px) {



        .gallery-container {



            grid-template-columns: repeat(2, 1fr); /* 2 colonne per schermi piccoli */



        }



    }



    



    @media (max-width: 480px) {



        .gallery-container {



            grid-template-columns: 1fr; /* 1 colonna per schermi molto piccoli */



        }



    }







    /* Centrare e adattare il contenuto della modale su dispositivi mobili */



    .modal-content {



        width: 80%; /* La modale occupa l'80% della larghezza */



        padding: 15px;



    }







        /* Modifica il font della chiusura per essere più grande sui dispositivi mobili */



    .close {



        font-size: 24px;



    }



    @media (max-width: 1024px) {



        #banner-container {



            height: 400px;



        }



    }



    



    @media (max-width: 768px) {



        #banner-container {



            height: 300px;



        }



    }



    



    @media (max-width: 480px) {



        #banner-container {



            height: 200px;



        }



    }



/* Galleria Fotografica Personale */    

    @media (max-width: 480px) {

    #galleryContent {

        padding: 10px;

    }



    #galleryContent button {

        padding: 6px 12px;

        font-size: 14px;

    }



    #closeGallery {

        font-size: 24px;

        top: 5px;

        right: 10px;

    }

    }

    



}