/* --------------------------------------------------------------------------- MAIN  -----------------------------------------------------*/

@font-face {
 font-family: Nunito;
 /* src:  url("../fonts/Nunito-Regular.ttf" ) format( "truetype" ); */
 src:  url("../fonts/Mulish-Regular.ttf" ) format( "truetype" );
 font-weight: 400;
 font-style: normal;
}  

@font-face {
 font-family: NunitoSans;
 src:  url("../fonts/NunitoSans.ttf" ) format( "truetype" );
 /* src:  url("../fonts/NunitoSans.ttf" ) format( "truetype" ); */
 font-weight: 400;
 font-style: normal;
}  

@font-face {
font-family: Mulish-Regular;
src:  url("../fonts/Mulish-Regular.ttf" ) format( "truetype" );
} 


main {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 padding-top: 20px;
 paddin-bottom: 20px;
 border: solid 1px: #333;
 max-width: 95%;
 margin: 0 auto;
 box-shadow: -3px 0px 10px rgba(1,1,1,0.1), 3px 0px 10px rgba(1,1,1,0.1);	
 font-family: Nunito;
}

main h2, p {
  font-family: Mulish-Regular;
  font-size: 18px;
  letter-spacing: -0.1px; /* -0.02px; */ /* -0.08px; 0.252px; */
  line-height: 28px;
} 

main h2 {
 font-family: NunitoSans;
 font-size: 21px; 
 letter-spacing: 0.32px;
} 


main a { 
 font-family: Mulish-Regular;
 font-size: 18px;
 letter-spacing: -0.02px;
 line-height: 26px;
 color: #0093fb;
 text-decoration: none;
 outline: none;
 cursor: pointer;
} 

main a:hover { 
 text-decoration: underline;
 outline: none;
} 

@media (min-width: 1920px) {
    main {
       width: 75%;
    }
}

/* --------------------------------------------------------------------------- UPPER CONTENT ----------------------------------------------------- */

.upper_content {
 background-color: #0093fb; 
 opacity: 0.8; 
 width: 100%; 
 height: 22vh; 
 padding-left: 90px;
 display: flex; 
 margin-top: 65px;
 align-items: center; 
 font-size: 48px; 
 color: white; 
 border-radius: 10px;
}

/*
@media screen and (max-width: 1080px) {
  .upper_content {
    height: 10vh;
  }
}*/


/* --------------------------------------------------------------------------- CONTENITORE CENTRALE -----------------------------------------------------*/

/* Stile per il contenuto principale */
.content {
    flex-grow: 2;
    max-width: 59%;
	/* border: solid 1px #333; */
	padding: 20px;
	padding-top: 50px;
	padding-left: 90px; 
	border-right: solid 1px rgba(1,1,1,0.1);
	
}

.nav_pie {
  display: flex; 
  list-style:none; 
  gap: 10px;
  margin-top: 50px; 
  margin-bottom: 60px;
}

/* --------------------------------------------------------------------------- BARRA LATRALE -----------------------------------------------------*/

/* Stile per la barra laterale */
.sidebar {
    flex-basis: 30%; 
    max-width: 35%; 
   /* border: solid 1px #333;  */
	padding-top: 70px;
	padding-left: 10px;
	padding-right: 5px;
	padding-bottom: 40px;
}

.photo {
 max-width: 70%; 
 height: auto; 
}


/* ---------------------------------------------------------------------------- MOBILE: MAIN e SIDEBAR -----------------------------------------------------*/

@media (max-width: 768px) {
    main {
        flex-direction: column;
    }

    /* Regola gli stili per il layout mobile */
    .content,
    .sidebar {
        max-width: 100%;
		margin: 0 auto;
		border: solid 0px;
		padding: 5px;
    }
	
	.content {
	 padding-left: 10px;
	 padding-right: 10px;
	}
	
	.sidebar {
	  
	  margin-bottom: 20px;
	}
	
	.upper_content {
	 font-size: 42px;
	 text-align: center;
	 padding: 10px;
	 margin-bottom: 20px;
	 
	}
	
	.nav_pie {
     flex-direction: column;
     align-items: flex-start; /* Allinea gli elementi a sinistra */
	 margin-top: 20px;
	 margin-bottom: 30px;
    }
	
	
	.sep {
	  display: none;
	}
	
	  
}