/*importo il font della pagina web scelto*/
@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');

/*caratteristiche del body*/ 
body {

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

background-color: #333;
color: #fff;
text-align: center;
height: 20vh;   
position:relative;  
}
/*caratteristiche commenti ipertestuali*/
a {

color:#fff;
text-decoration:none; 


} 

.a1 {

color:#fff;
text-decoration:underline; 
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; 
    } 

/*caratteristiche paragrafi*/
p{

margin:0 auto;
margin-top: 3.5vh;
}
/*caratteristica titolo "langoterm"*/
.h1{

font-size: 4rem;
}
/*caratteristica logo e posizionamento*/  
.logo {
    
width: 10vh;
height:10vh;
z-index: 1;
position: inherit;
justify-content: center;
vertical-align: middle;   
}
/*container del logo dove vengono diviso in 3 colonne*/
.container1 {
pointer-events: none;
display: grid;
grid-template-columns: 25% 50% 25% ;
position: relative;
margin-top: 5vh; 
}
/*colonna sinistra dove viene posizionato il logo*/
.left-element {
pointer-events: none;
position: inherit;
justify-content: center;
vertical-align: middle;  
}
/*colonna centrale dove viene posizionato il titolo "langoterm"*/ 
.centered-element {

justify-content: center;
vertical-align: middle;
position: inherit;
}
/*colonna destra vuota necessaria per posizionare centralmente le altre colonne*/
.right-element {

position: inherit;
}
/*elemento per interagire con l'utente menu' a tendina*/
.menu-toggle {

display: block;
color: #fff;
text-align: center;
padding: 10px;
cursor: pointer;
}

.menu-toggle i {

font-size: 3.5rem;
}
/*elementi che compongono il menu' a tendina*/  
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;
}
/*altezza menu' a tendina quando attivo*/  
.active {

max-height: 400px;
}
/*contenitore della parte centrale del sito dove sono presenti i contenuti*/
.block-container {

background-size: cover;
background-position: center;
background-image: url('immagini/home.webp');
height: 65vh;
display: flex;
text-align: center;
position: relative;
flex-direction: column;
box-sizing: border-box;
}
/*posizionamento e caratteristiche dello sfondo del contenitore dove sono presenti i contenuti*/
.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% */
}
/*motto chi siamo*/
.titolo {

font-size:3.5rem;
color: #fff;
padding: 10px;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
margin-top: 18vh;
}
/*motto azienda*/
.titolo1 {

font-size: 1.5rem;
color: #fff;
font-style: italic;
padding: 10px;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
margin-top: 0vh;
}
/*ingresso slide in del testo*/
@keyframes slideIn {

from {
    opacity: 0;
    transform: translateX(100%);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
/*footer*/
.footer {

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

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

p{

margin:0 auto;
margin-top: 2vh;
}
      
.h1{

font-size: 5vh;
}
             
.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:5vh;
color: #fff;
padding: 10px;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
margin-top: 18vh;
}

.titolo1 {

font-size: 3vh;
color: #fff;
font-style: italic;
padding: 10px;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
margin-top: 0vh;
}
       
.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:0 auto;
margin-top: 2vh;
}
     
.h1{
        
font-size: 4vh;       
}    
        
.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:4vh;
color: #fff;
padding: 10px;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
margin-top: 18vh;
}
        
.titolo1 {

font-size: 2.5vh;
color: #fff;
font-style: italic;
padding: 10px;
opacity: 0; /* Initially hidden */
animation: slideIn 1.5s forwards; /* Animation to slide in */
margin-top: 0vh;
}
                
.footer {
background-color: #333;
color: #fff;
text-align: center;
height: 10vh; 
font-size: 1rem;
}
.a1 {

    font-size: 0.5rem;
   
    } 

}