@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');


body {

font-family: 'Lora', serif;
margin: 0;
padding: 0;
background-color: #333;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}

a {

color:#fff;
text-decoration:none; 
}

.a1 {

    color:#fff;
    text-decoration:none; 
    font-size: 1rem;
    background-color: #7c5f00; /* Colore di sfondo */
    padding: 0.18em 0.25rem; /* Spaziatura interna (alto/basso, sinistra/destra) */
    text-decoration: none; /* Nessuna decorazione del testo */
    border-radius: 0.3rem; /* Arrotonda gli angoli */
    } 
.a2 {
        
    color:#fff;
        text-decoration:none; 
} 

p{

margin:0 auto;
margin-top: 3.5vh;
}

header {

background-color: #333;
color: #fff;
text-align: center;
height: 20vh; /* Altezza del 20della viewport height */
}

.h1{
    
font-size: 4rem;
}

.logo {
    
width: 10vh;
height:10vh;
z-index: 1;
position: inherit;
justify-content: center;
vertical-align: middle;
}

.container4 {
pointer-events: none;
display: grid;
grid-template-columns: 25% 50% 25% ;
position: relative;
margin-top: 5vh; 
}

.left-element {
pointer-events: none;
position: inherit;
justify-content: center;
vertical-align: middle;
}

.centered-element {

justify-content: center;
vertical-align: middle;
position: inherit;
}

.right-element {

position: inherit;
}

    
.menu-toggle {

display: block;
color: #fff;
text-align: center;
padding: 10px;
cursor: pointer; 
}
    
.menu-toggle i {

font-size: 3.5rem;
}
    
nav {

background-color: #333;
color: #fff;
text-align: center;
overflow: hidden;
transition: max-height 0.9s ease;
max-height: 0;
}
    
nav ul {
  
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
    
nav ul li {

display: block;
margin-left: 0px;
margin-right: 0px;
}
    
nav ul li a {

color: #fff;
text-decoration: none;
font-weight: bold;
display: block;
padding: 10px 0;
font-size: 1.8rem;
}
    
nav ul li a:hover {

background-color: #7c5f00;
}
    
.active {

max-height: 400px;
}

.block-container {

background-size: cover;
background-position: center;
background-image: url('immagini/home.webp');
height: 65vh; /* Altezza del 55% della viewport height */
display: flex;
box-sizing: border-box;
flex-direction: column;
text-align: center;
position:relative;
}

.overlay {

position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Imposta il colore di sfondo con un'opacità del 50% */
}
/* titolo che slitta*/
@keyframes slideIn {

from {
opacity: 0;
transform: translateX(100%);
}

to {
opacity: 1;
transform: translateX(0);
}
}

.titolo {

display: inline;
font-size:2rem;
color: #fff;
padding: 10px;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
}
/* visalizzazione immagini rullo*/
#container2 {

width: 80%; /* larghezza del container, regolala a tuo piacimento */
overflow: hidden; /* nasconde il contenuto che va oltre il container */
position: relative; /* posizionamento relativo per consentire il posizionamento assoluto delle immagini */
height: 70%;
margin-left: 10%;
}

.container2 img {
  
width: 80%; /* Imposta la larghezza massima delle immagini */
height: 100%; /* Imposta l'altezza automaticamente rispetto alla larghezza */
overflow: hidden;
}

#slides {

display: flex; /* consente di allineare le immagini orizzontalmente */
transition: transform 0.5s ease; /* transizione scorrevole tra le immagini */
}

.slide {

width: calc(100% / 3); /* larghezza di ciascuna immagine, occupa l'intero container */
flex-shrink: 0; /* impedisce il restringimento delle immagini */
height: 38vh;
}

#prev, #next {

position: absolute; /* posizionamento assoluto rispetto al container */
top: 50%; /* mette i bottoni a metà altezza del container */
transform: translateY(-50%); /* centra verticalmente i bottoni */
background: rgba(0, 0, 0, 0.5); /* colore di sfondo trasparente per i bottoni */
color: white; /* colore del testo bianco */
padding: 2vh; /* spazio intorno ai bottoni */
cursor: pointer; /* cursore a forma di mano al passaggio del mouse */
z-index: 1; /* per sovrapporre i bottoni alle immagini */

}

#prev {

left: 0; /* posiziona il pulsante 'precedente' a sinistra */
}

#next {

right: 0; /* posiziona il pulsante 'successivo' a destra */
}

.footer {

background-color: #333;
color: #fff;
text-align: center;
height: 10vh; 
font-size: 2rem;
}

/*regole di visualizzazione per dispositivi mobili*/
@media only screen and (max-width: 1030px) {


p{

margin:0 auto;
margin-top: 2vh;
}
  
.h1{
        
font-size: 5vh;
}
     
.menu-toggle {

display: block;
color: #fff;
text-align: center;
padding: 10px;
cursor: pointer;
}
        
.menu-toggle i {
  
font-size: 7vh;
}
 
nav ul li a {

color: #fff;
        
text-decoration: none;
font-weight: bold;
display: block;
padding: 10px 0;
font-size: 3vh;
}
        
.titolo {

font-size: 2.8vh;
color: #fff;
padding: 10px;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
margin-top: 0.5vh;
margin-bottom: 1h;
}    
/* visalizzazione immagini rullo*/
#container2 {

width: 80%; /* larghezza del container, regolala a tuo piacimento */
overflow: hidden; /* nasconde il contenuto che va oltre il container */
position: relative; /* posizionamento relativo per consentire il posizionamento assoluto delle immagini */
height: 70%;
margin-left: 10%;
}

.container2 img {
      
width: 80%; /* Imposta la larghezza massima delle immagini */
height: 100%; /* Imposta l'altezza automaticamente rispetto alla larghezza */
overflow: hidden;
}
    
    
#slides {

display: flex; /* consente di allineare le immagini orizzontalmente */
transition: transform 0.5s ease; /* transizione scorrevole tra le immagini */
}

.slide {

width: calc(100% / 3); /* larghezza di ciascuna immagine, occupa l'intero container */
flex-shrink: 0; /* impedisce il restringimento delle immagini */
height: 30vh;
}
  
.footer {

background-color: #333;
color: #fff;
text-align: center;
height: 10vh; 
font-size: 1.5rem;
}
.a1 {

 
    font-size: 0.8rem;
   
    } 
}

/* Stili per smartphone con larghezza massima di 480px */
@media only screen and (max-width: 480px) {
  
p{
      
margin-top: 2vh;
}
    
.h1{
        
font-size: 4vh;
}
    
.menu-toggle {

display: block;
color: #fff;
text-align: center;
padding: 10px;
cursor: pointer; 
}
        
.menu-toggle i {

font-size: 7vh;
}
        
nav ul li a {

color: #fff;
text-decoration: none;
font-weight: bold;
display: block;
padding: 10px 0;
font-size: 3vh;
}
.block-container {

    background-image: url('immagini/home-480.webp');
    
    }   
.titolo {

font-size: 1rem;
color: #fff;
padding: 10px;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
margin-top: 0.5vh;
margin-bottom: 1h;
}

/* visalizzazione immagini rullo*/
    
#container2 {

width: 80%; /* larghezza del container, regolala a tuo piacimento */
overflow: hidden; /* nasconde il contenuto che va oltre il container */
position: relative; /* posizionamento relativo per consentire il posizionamento assoluto delle immagini */
height: 50%;
margin-left: 10%;
}

.container2 img {
      
width: 80%; /* Imposta la larghezza massima delle immagini */
height: 100%; /* Imposta l'altezza automaticamente rispetto alla larghezza */
overflow: hidden;
}
    
#slides {

display: flex; /* consente di allineare le immagini orizzontalmente */
transition: transform 0.5s ease; /* transizione scorrevole tra le immagini */
}
    
.slide {

width: 100%; /* larghezza di ciascuna immagine, occupa l'intero container */
flex-shrink: 0; /* impedisce il restringimento delle immagini */
height: 33vh;
}
  
.footer {

background-color: #333;
color: #fff;
text-align: center;
height: 10vh; 
font-size: 1rem;
}
.a1 {

    font-size: 0.5rem;
   
    } 
}